# 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. - Author: [Jacopo Marcolini](https://www.jacopomarcolini.com), Deployment Strategist & Product Design Lead - Role: Product Designer - Year: 2024 - Area: Product Design - Tags: Mobile App, Monetization, Design System - Web page: https://www.jacopomarcolini.com/case-studies/paywall-design-system ![The title Paywall Design System in a white and silver retro script over black liquid chrome with silver reflections](https://www.jacopomarcolini.com/images/case-studies/paywall-design-system/hero-v5.jpg) ## 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. ![Paywall for a fashion resale app: full-screen lifestyle photo, three benefits and a single free-trial button](https://www.jacopomarcolini.com/images/case-studies/paywall-design-system/paywall-fashion.webp) *Single plan with a free trial, for a fashion resale marketplace.* ![Paywall for a cloud gaming app: illustrated header, three benefits, a weekly plan and a highlighted monthly plan that saves 50%](https://www.jacopomarcolini.com/images/case-studies/paywall-design-system/paywall-gaming.webp) *Two plans with a recommended option, for a cloud gaming app.* ## How the system came together ### 1. 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. ### 2. 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. ### 3. 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. ### 4. 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. ### 5. 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.