Myfitnesspal

Premium Design System

Premium Design System

Driving measurable growth across shifting business priorities and strategic initiatives while strengthening and evolving the Premium brand identity.

24%

lift in incremental subscriptions

lift in incremental subscriptions

7%

lift in registration
to trail

lift in registration
to trail

$5M

increase in

annualized sales

increase in

annualized sales

Our goal was to reimagine the Premium subscription experience through a focused blend of brand, UX, and growth strategy — improving value communication, simplifying subscription decisions, and driving significant increases in conversion and annual plan adoption across iOS and Android.

My Role

Led the redesign of our Premium brand and subscription paywall experience across strategy, UX/UI, illustration, motion, and design systems, partnering closely with our cross-funtional team from concept through launch.

The Challenge

Beyond the Hub

Designed in 2024 as part of a broader tiering initiative, the existing 'Premium Hub' improved conversion and established the foundation of our premium design system. However… its dense, feature-heavy experience made it difficult for users to quickly understand the core value of Premium.

What wasn't working:

Users were asked to process feature education and pricing simultaneously

Core Premium benefits were buried within dense content

The experience felt functional, but not aspirational

Conversion opportunities were being lost due to overwhelm and friction

The Journey

Focused Excitment

Our team focused on progressive disclosure and reducing cognitive load throughout the conversion journey. Guided by years of user research, we hypothesized that separating value education from pricing decisions would create a clearer, more effective subscription experience — drawing inspiration from focused multi-step upsell patterns used by industry leaders.

Simplifying information architecture

Prioritizing clarity over feature density

Focusing on digestible decision points

Elevating emotion through movement and visual storytelling

The Solution

Multi Screen Upsell

A major breakthrough was restructuring the experience into a two-step “Primer + Spoke” model. However, we initially tested a 4 screen model that included 3 primers before the user actually got to the payment screen (aka spoke). This was our first iteration, and altho we knew we had executed our plan, the results were shockingly bad.. a -9% decrease in trails starts vs control.

Primer

The first screen focused entirely on communicating the value of Premium in a concise, emotionally engaging way. This allowed users to understand the offering before encountering pricing.

Poppin off:

The "rocket strawberry" scene creates visual delight with illustration & motion

Simplified list of core logging features

Headline sets the tone for the overall message

CTA reinforces the free trial

Spoke

Once users expressed intent by continuing, they were shown a simplified pricing-focused screen designed specifically to support decision-making.

Poppin off:

Clear trial focused headline

Both plans are framed in equivalent monthly value terms

Savings on the annual plan became immediately understandable

Yearly plan is pre-selected creating a clear visual hierarchy

Reflection

This project was a strong example of strategy, research, and craft working together at scale.

It demonstrated the impact that thoughtful UX structure, brand expression, and emotional design can have on business outcomes — especially within monetization experiences that are often treated as purely functional.

It was also personally rewarding to help lead a project where design quality directly influenced measurable revenue growth. The combination of systems thinking, visual storytelling, motion, and behavioral psychology ultimately created an experience that felt both effective and distinctly premium.