A/B TESTING • MICROINTERACTIONS • UI DESIGN

Increasing revenue by redesigning the plan display.

Babbel | Q1 2025 | Product Designer

In this case study, I redesigned Babbel’s default paywall to help leads choose high-value plans with more confidence, improving clarity and driving business results.

By improving offer clarity and visual hierarchy, the new design drove a 16% uplift in revenue.

Summary

Problem

The existing paywall failed to surface the most cost-effective plan, making it harder for Leads to make confident decisions.

Solution

Redesigned UI for the paywall including improvements in visual language, hierarchy and microinteractions.

My role

UI Design • Prototyping • Microinteractions

Impact: +16% in selected revenue metric 📈

Context

To improve revenue metrics, we explored ways to better guide Leads toward higher-value subscription plans. This approach not only helps the business but also ensures that Leads choose the best value-for-money option. We tested whether reordering plans and improving visual hierarchy could improve user decision-making and increase conversions.

Chapter 1

Existing research

A few weeks before discovery began, we ran a short usability test on one of our paywall designs. From that test, I extracted a valuable insight that helped shape the direction of this project:

Pricing Insight

Leads perceive the 12-month subscription as the best value-for-money option due to its lower monthly cost and overall affordability.

In other words, increasing the visibility of high-value offers benefits both the business and the user.

Constraints

Due to legal limitations and tight project timelines a complete redesign of the pricing cards was out of scope for this project. The pricing cards are dense and potentially confusing for users. Adding clarity within the pricing card information hierarchy is something we decided to pick up as a separate experiment. This reinforced the value of designing iteratively, even when ideal solutions are out of scope.

Chapter 2

Plan Order & Visual Hierarchy

After assessing the original paywall, I decided that my key goal for this experiment should be to make the 12-month plan the focal point of the screen. I drew inspiration from paywalls at two companies famous for their conversion strategies: Dulingo and Blinkist. Their paywalls feel clean, intentional and focused on the key task a user needs to complete, which is selecting a plan that offers best value for money.

The result was a clean, minimal paywall with the following changes:

  • a pre-selected state for the 12 month offer with a gradient border which makes the option feel more “premium”

  • an increased width of the selected state compared to unselected offers to make the offer more visually prominent

  • cleaned up pricing cards focusing only on the most relevant information to facilitate decision-making

  • a new illustration reflecting common learner goals to convey product value faster

Chapter 3

Microinteractions

Seeing how much the visual hierarchy has improved with the new UI treatment, I decided to push the redesign a bit further and bring more joy and motion to the experience.

To achieve this I made the gradient of the 12 month cards shimmer in the selected state. Since this option is pre-selected, it further increased it’s visibility on the screen guiding Leads eye to this plan option.

Gradient shimmer

Card interaction

Prototyping in Figma

Chapter 4

Results & learnings

The experiment has shown a 16% uplift in the key revenue metric, proving that making the high-value subscription plan more prominent can have a significant impact on the revenue. .

Chapter 7

Personal learnings

This project has taught me to think even more critically about challenging the status quo and pushing for UI changes despite short sprints.

  1. The power of UI design - within the Growth teams there might be a tendency to cut corners and prioritise shipping multiple revenue experiments quickly. This sometimes also makes us cut corners sacrificing small UX enhancements like microinteractions or custom visuals. This experiment taught me that it is worth it to take time and polish the way the information will be presented to the users.

  2. Real-time engineering collaboration - it was a great pleasure to review the animations together with my team and see how a Figma prototype is translated into code. This collaboration helped me understand how to improve design handoff and clarify which information engineers need most.

Up next

How did we bridge user needs and product value in onboarding to drive conversion?

If you’re interested in time-to-value for Product-Led Growth, this project is for you.