InStyle.com: Subscription user flow.
InStyle.com: Subscription user flow.
Convert InStyle’s digital audience into paying members.
Convert InStyle’s digital audience into paying members.
A membership flow designed and pitched internally as an opportunity to modernize how InStyle converts its digital audience into paying members. The challenge: make a premium, multi-tier subscription feel native to an editorial brand — not a SaaS checkout.
A membership flow designed and pitched internally as an opportunity to modernize how InStyle converts its digital audience into paying members. The challenge: make a premium, multi-tier subscription feel native to an editorial brand — not a SaaS checkout.
A membership flow designed and pitched internally as an opportunity to modernize how InStyle converts its digital audience into paying members. The challenge: make a premium, multi-tier subscription feel native to an editorial brand — not a SaaS checkout.
The User
A digitally-native woman in her late 20s to mid-30s who reads InStyle.com regularly but hasn't paid for it yet. She has the income and the brand affinity — she just needs the right offer with the right amount of friction.
A digitally-native woman in her late 20s to mid-30s who reads InStyle.com regularly but hasn't paid for it yet. She has the income and the brand affinity — she just needs the right offer with the right amount of friction.
A digitally-native woman in her late 20s to mid-30s who reads InStyle.com regularly but hasn't paid for it yet. She has the income and the brand affinity — she just needs the right offer with the right amount of friction.
The Flow
Starting on paper keeps the focus on structure before aesthetics. The flow maps every step and decision point — including where the experience branches for different membership tiers.
Starting on paper keeps the focus on structure before aesthetics. The flow maps every step and decision point — including where the experience branches for different membership tiers.
Starting on paper keeps the focus on structure before aesthetics. The flow maps every step and decision point — including where the experience branches for different membership tiers.
The Landing Page
The landing page has one job: convince the user that membership is worth it before she clicks anything. Three tiers, equal visual weight, tier-specific CTAs — always active, never disabled.
The landing page has one job: convince the user that membership is worth it before she clicks anything. Three tiers, equal visual weight, tier-specific CTAs — always active, never disabled.
The landing page has one job: convince the user that membership is worth it before she clicks anything. Three tiers, equal visual weight, tier-specific CTAs — always active, never disabled.
On mobile, the three-column layout collapses to a single scrollable card. The tier expands on tap, keeping the full perks list accessible without overwhelming the screen.
On mobile, the three-column layout collapses to a single scrollable card. The tier expands on tap, keeping the full perks list accessible without overwhelming the screen.
On mobile, the three-column layout collapses to a single scrollable card. The tier expands on tap, keeping the full perks list accessible without overwhelming the screen.
Account Creation
The form asks for as little as possible. The persistent tier summary anchors the left column throughout the entire flow — always visible, always editable.
The form asks for as little as possible. The persistent tier summary anchors the left column throughout the entire flow — always visible, always editable.
The form asks for as little as possible. The persistent tier summary anchors the left column throughout the entire flow — always visible, always editable.
This is also where the progress indicator appears for the first time, giving the user a clear sense of how many steps remain.
This is also where the progress indicator appears for the first time, giving the user a clear sense of how many steps remain.
This is also where the progress indicator appears for the first time, giving the user a clear sense of how many steps remain.
Payment
The order summary at the top confirms exactly what the user agreed to, with no surprises. Credit card leads as the primary input, with Apple Pay and Google Pay always present as a faster alternative.
The order summary at the top confirms exactly what the user agreed to, with no surprises. Credit card leads as the primary input, with Apple Pay and Google Pay always present as a faster alternative.
The order summary at the top confirms exactly what the user agreed to, with no surprises. Credit card leads as the primary input, with Apple Pay and Google Pay always present as a faster alternative.
Delivery Address
This screen only exists for Insider and Muse members. Reader members skip directly to payment — there's nothing to ship, so there's nothing to ask.
This screen only exists for Insider and Muse members. Reader members skip directly to payment — there's nothing to ship, so there's nothing to ask.
This screen only exists for Insider and Muse members. Reader members skip directly to payment — there's nothing to ship, so there's nothing to ask.
Confirmation
Each tier gets its own confirmation because each tier delivers a different experience. The headline is the same — You're In. Everything after it is specific to what the user actually signed up for.
Each tier gets its own confirmation because each tier delivers a different experience. The headline is the same — You're In. Everything after it is specific to what the user actually signed up for.
Each tier gets its own confirmation because each tier delivers a different experience. The headline is the same — You're In. Everything after it is specific to what the user actually signed up for.
A single primary CTA returns the user to the product — "Start Reading", pointing them toward the home page. The confirmation email note is present but secondary — a practical detail, not the emotional beat.
A single primary CTA returns the user to the product — "Start Reading", pointing them toward the home page. The confirmation email note is present but secondary — a practical detail, not the emotional beat.
A single primary CTA returns the user to the product — "Start Reading", pointing them toward the home page. The confirmation email note is present but secondary — a practical detail, not the emotional beat.
Reflection
The most interesting problems weren't the obvious ones. The branching logic, the tier change overlay, the three confirmation versions — the decisions users never notice when they're made well, and immediately notice when they're not.
If I were to take this further, I'd validate the Muse tier with real users. Exclusive events are high value but low frequency — a member outside New York might not see the point. That tier needs a digital perk that's immediate and universally accessible.
The most interesting problems weren't the obvious ones. The branching logic, the tier change overlay, the three confirmation versions — the decisions users never notice when they're made well, and immediately notice when they're not.
If I were to take this further, I'd validate the Muse tier with real users. Exclusive events are high value but low frequency — a member outside New York might not see the point. That tier needs a digital perk that's immediate and universally accessible.
The most interesting problems weren't the obvious ones. The branching logic, the tier change overlay, the three confirmation versions — the decisions users never notice when they're made well, and immediately notice when they're not.
If I were to take this further, I'd validate the Muse tier with real users. Exclusive events are high value but low frequency — a member outside New York might not see the point. That tier needs a digital perk that's immediate and universally accessible.