Skip to main content

Paywall Design: 10 Layouts That Convert Free Users

Paywall design for mobile apps: 10 proven layouts, the anatomy of a converting paywall, App Store and Google Play rules, copy and what to test.

Insights10 min read1,990 words

This guide is for founders, PMs and designers of subscription apps who want more free users to become paying ones without tricking anyone. You'll get the anatomy of a paywall that converts, 10 layouts with when to use each, the store rules your design must follow, copy templates, and a list of tests worth running.

TL;DR: A good paywall shows what the user gets, what it costs, and exactly how billing works, in that order. Lead with outcomes, preselect the plan most people should choose, make trial terms impossible to misread, and always include close, restore purchases, terms and privacy. Then test placement and layout, because where the paywall appears often matters as much as how it looks.

The anatomy of a converting paywall

Nearly every effective paywall contains the same building blocks, top to bottom:

BlockPurposeTips
Close or skipRespect and trustVisible, in a top corner; hiding it risks review problems and resentment
HeroMake the outcome feel realIllustration, a preview of premium content, or the user's personalised plan
HeadlineThe promiseOutcome-focused: "Reach conversational Spanish faster"
BenefitsWhy pay3–4 rows with icons, each one specific
Social proofReduce riskA rating, a short review, or a well-known award
Plan optionsThe choice1–3 plans, one preselected, savings shown clearly
Trial and billing termsClarityPrice, period, trial length, when billing starts, how to cancel
Primary buttonThe actionFull width, in thumb reach: "Start free trial" or "Continue"
Footer linksComplianceRestore purchases, Terms of Use, Privacy Policy

Store rules your paywall must follow

Both stores review subscription screens closely.

Apple App Store (App Store Review Guidelines, section 3.1.2 and Apple's subscription guidance):

  • •Clearly describe what the user gets for the price.
  • •Show the price, billing period and that the subscription renews automatically.
  • •Explain free trial length and what happens when it ends.
  • •Apple's guidance says the amount that will be billed should be the most clear and conspicuous pricing element; don't bury it under a calculated monthly equivalent.
  • •Include a way to restore purchases.
  • •Provide links to your Terms of Use and Privacy Policy.
  • •Digital goods and subscriptions sold in the app generally must use in-app purchase, with regional exceptions that have changed in recent years.

Google Play (subscriptions policy): be clear about the price, billing frequency, trial terms and what the subscription includes, and make it easy to understand how to cancel. Use Google Play Billing for digital goods in most regions.

Check the current guidelines before each major change.

10 paywall layouts

1. Classic plan picker

Benefits at the top, two plan cards (annual and monthly) with annual preselected and a "Save 40%" style badge calculated honestly from your actual prices, then a primary button.

Use when: you want a solid default. Show the annual price itself prominently; a per-month breakdown can sit beside it as secondary text.

2. Trial timeline

A vertical timeline explains exactly what happens: "Today: full access", "Day 5: we'll remind you your trial ends", "Day 7: you're charged, cancel any time before". Blinkist popularised this pattern and wrote publicly about how transparent trial reminders reduced complaints while keeping conversion healthy.

Use when: you offer a free trial and want to reduce the fear of forgotten charges. Only promise a reminder if you actually send one.

3. Free vs. Pro comparison

A table with two columns, Free and Pro, and checkmarks for each feature. Makes the upgrade's value concrete.

Use when: you have a meaningful free tier and users need to see what changes. Keep it to 5–7 rows, and make sure the free column isn't so empty that it looks dishonest.

4. Single-plan hero

One plan, one price, one button, with a large hero image or preview. No choice to deliberate.

Use when: you have one plan, or you're testing whether choice is slowing people down.

5. Personalised plan paywall

Shown at the end of an onboarding quiz, it reflects the user's answers: "Your 12-week plan to run 5K" with their goal, schedule and a progress preview, then the plans. Many fitness, language and wellness apps use this pattern.

Use when: your onboarding collects goals. See our onboarding screen design playbook for building the quiz that feeds it.

6. Contextual (feature-gated) paywall

Appears when a free user taps a premium feature: "Offline downloads are part of Premium." A short sheet with that feature as the hero and the same plan options.

Use when: you have a freemium model. Pair it with a lock icon on premium items so users aren't surprised.

7. Social proof paywall

The hero is a rating or a short testimonial ("Finally stuck with a habit for 3 months"), with benefits and plans below.

Use when: your app has strong reviews and the main objection is "will this work for me?" Use real reviews only, and keep them short.

8. Trial toggle

A switch reading "Enable free trial" that changes the plan and button text between "Start 7-day free trial" and "Subscribe". It lets users choose transparency over surprise.

Use when: you want to test trial vs. no-trial with user choice. Make sure the toggle's state and the resulting billing are unmistakable; review teams look closely at toggles that obscure what the user will pay.

9. Tiered plans

Three tiers (for example Basic, Plus, Family) as cards or a horizontal selector, with the middle option highlighted as most popular.

Use when: you serve distinct segments, such as individuals and families or students and professionals. More than three tiers on a phone screen usually overwhelms.

10. Win-back or limited offer

A discounted offer shown to lapsed users or after a user dismisses the main paywall: "Come back for 50% off your first year." Both stores support introductory and promotional offers natively.

Use when: you have enough users to segment. Use countdown timers only if the deadline is real; fake urgency erodes trust and can breach store rules.

Where to show the paywall

Common options:

  • •End of onboarding: while motivation is highest. Common in subscription-first apps.
  • •On premium feature tap: contextual, high intent.
  • •After a usage limit: "You've used 3 of 3 free scans this month."
  • •After a success moment: "You finished your first week. Keep going with Premium."
  • •In settings or profile: a permanent "Upgrade" entry point for users who want to find it.

Meditation apps are a good case study: many show a trial paywall after onboarding and lock premium sessions in the library; our meditation app design guide shows how.

Visual specs and styling

ElementSpec
Close button44 × 44 pt (iOS) or 48 × 48 dp (Android) tap area, top corner
Headline28–34pt bold, under 8 words
Benefit rowsIcon 24–28pt, text 16–17pt, 12–16pt between rows
Plan cardsAt least 64pt tall, 2pt border or filled background on the selected card
Savings badgeSmall pill on the annual card, high-contrast text
Billing terms13pt minimum, full contrast, directly above or below the button
Primary buttonFull width, 50–56pt tall, brand primary
Footer links12–13pt, spaced so each is easy to tap

Use your primary color for the button and the selected plan only, so the decision stands out; our guide to choosing a mobile app color palette explains this restraint. Billing terms must be readable, not light grey fine print: check them with the contrast checker against WCAG's 4.5:1.

Copy templates

  • •Headline: "[Outcome] with [App] Premium" → "Sleep better with Lumen Premium"
  • •Benefit row: "[Specific feature], so you can [outcome]" → "Unlimited offline downloads, so you can listen anywhere"
  • •Annual plan: "Annual · $59.99/year" with secondary text "Just $5.00/month" and a badge "Save 37%" (true against a $7.99 monthly plan; calculate your own)
  • •Trial terms: "Free for 7 days, then $59.99 per year. Cancel any time in Settings before [date]."
  • •Primary button: "Start my free trial" or "Continue"
  • •Dismiss: "Not now" or a close icon, never guilt-trip copy like "No, I don't want to sleep better"

What to test

Paywalls reward experimentation. You can generate several of the layouts above in floow to pick test candidates quickly. Tools like RevenueCat and Superwall let you change paywalls remotely and run tests without app updates. High-impact tests:

  1. •Paywall placement: end of onboarding vs. first premium feature.
  2. •Trial vs. no trial, or trial length.
  3. •Annual preselected vs. monthly preselected.
  4. •Two plans vs. three.
  5. •Personalised hero vs. generic benefits.
  6. •Trial timeline vs. classic layout.
  7. •Price points, carefully and with enough traffic to read results.

Measure trial start rate, trial-to-paid conversion, refund rate and retention at renewal, not just taps on the button. A paywall that boosts trials but increases refunds isn't a win. If you're planning the full product, our guide on how to build a mobile app covers setting up StoreKit and Google Play Billing in the build.

Paywall design checklist

  • • Close or dismiss is visible and easy to tap.
  • • Headline and benefits describe outcomes, not just features.
  • • One plan is preselected; savings are calculated honestly.
  • • The billed amount is the most prominent price.
  • • Trial length, renewal price and billing period are stated in plain text.
  • • Restore purchases, Terms of Use and Privacy Policy links are present.
  • • Billing text passes 4.5:1 contrast and is at least 13pt.
  • • Countdown timers or offers are only shown when they're real.
  • • The paywall works with large text sizes and screen readers.
  • • Analytics track views, plan selection, trial starts and conversions.

FAQ

What makes a good paywall design?

Clear outcomes, honest and prominent pricing, a sensible default plan and plain-language trial terms. It should also be easy to dismiss and include restore purchases, terms and privacy links, which the app stores expect.

Should I show the paywall during onboarding?

Many subscription apps see strong results showing a paywall at the end of onboarding, when motivation is highest, as long as users can dismiss it. Test it against a contextual paywall shown when users first tap a premium feature.

Is a hard paywall or a freemium model better?

It depends on your product. Hard paywalls (no meaningful free tier) work when value is clear quickly and the onboarding builds motivation; freemium works when users need time to form a habit. Many apps combine a free tier with a trial of premium features.

What does Apple require on a subscription paywall?

Apple expects a clear description of what the subscription includes, the price and billing period, auto-renewal and trial terms, a restore purchases option, and links to your terms of use and privacy policy. The amount that will be billed should be the most prominent pricing element.

Design it with floow

Generate several paywall layouts for your app on floow.design, compare them side by side and refine the copy through chat. Try: "Design an iOS paywall for a sleep app: close button, moonlit hero illustration, headline 'Sleep better with Lumen Premium', three benefit rows with icons, annual and monthly plan cards with annual preselected and a savings badge, a 7-day trial timeline, a full-width Start free trial button, and Restore purchases, Terms and Privacy links. Deep navy and soft lavender."

Design your mobile app with AI.

Generate pixel-perfect iOS and Android screens in seconds, then export to Figma or code.