Paywall Design System
A reusable paywall system for a mobile app publisher's portfolio of freemium apps on iOS and Android, designed to turn free users into subscribers.
- Role
- Product Designer
- Year
- 2024
Turning free users into subscribers
A mobile app publisher runs a portfolio of freemium apps on iOS and Android, from a second-hand fashion marketplace to a cloud gaming service. In every one of them the business depends on the same moment: the screen where a free user is invited to subscribe.
I designed the paywall system for the whole portfolio, on my own from research to final screens, with one goal: maximize conversion without hiding the terms.
One moment, many products
Each app has its own audience, brand and offer, but the decision on the paywall is always the same and takes a few seconds. The system had to:
- Work across categories and brands without redesigning the page from scratch for every app.
- Support different pricing models: a single plan with a free trial, or several plans with one recommended option.
- Meet App Store and Google Play rules, with clear renewal terms, an easy way out and a visible way to restore purchases.
- Be ready for experimentation, so variants can be compared without rebuilding the page each time.
How the system came together
Competitive benchmark
I started by mapping the paywalls of leading subscription apps across categories: how they structure the page, present prices, word the free trial and label the main action. The patterns that kept coming back became the starting point; the outliers showed where there was room to stand out.
One anatomy, many themes
Every paywall shares the same structure: a header visual, a headline, three benefits, the renewal terms, the pricing and call-to-action area, and Restore Purchases. Each app then applies its own theme (colors, typography, imagery and tone of voice), so the page feels like part of the product rather than a generic checkout.
Two pricing patterns
For a single offer, a full-screen visual and one button that states both the free trial and the price that follows. For multiple plans, the options are stacked as full-width buttons, with the recommended plan filled and labeled with its saving while the alternative stays outlined.
Variants for A/B testing
Within the same anatomy I designed variants to test against each other, such as layout, visual style, pricing presentation and copy, so each experiment changes one thing at a time and the results are easy to read.
iOS and Android
The components were adapted to both platforms and both stores' subscription rules, keeping the same structure and hierarchy so a variant that wins on one platform can be carried over to the other.
The principles behind the layout
Every choice on the page maps to a known pattern in how people make quick decisions.
Hick's Law
The time it takes to decide grows with the number of options. Each paywall offers at most two plans and one main action, so choosing is quick.
Von Restorff Effect
The item that stands out is the one people remember. The recommended plan is the only filled button, and it carries its saving, so it stands out from the alternative.
Cognitive Bias
Showing the weekly price first anchors the comparison, so the monthly plan reads as the better deal. The free trial lowers the commitment of the first step.
Chunking
Benefits come in three short blocks, each with a bold headline and one supporting line, so they can be scanned in seconds instead of read.
Fitts's Law
The main action is a full-width button at the bottom of the screen, in the thumb zone and easy to hit.
Jakob's Law
People expect a paywall to work like the ones they already know: close at the top left, terms above the button, Restore Purchases at the bottom. Following those conventions builds trust at the moment money is involved.
A paywall that scales with the portfolio
The result is a system, not a set of one-off screens. Launching the paywall in a new app means theming the shared anatomy, and testing a new idea means swapping one variable within a structure that already works, on both iOS and Android.