Design case

Paywall redesign for a subscription AI photo app

This is a design exploration of a subscription AI photo app paywall, whose name is withheld. It builds six versions, V1 to V6, so that each step isolates one change and a test can be set up from any pair. No version has been tested yet, so the case covers the method and the outputs only.

Published November 12, 2026. Part of the open-source growth skills.

Problem

The question

The paywall needed a rebuild that could be tested: a clearer offer, better trust signals, honest price display, and an interaction layer that supports the offer without slowing the screen.

Skills applied

Skills used

paywall-audit
The audit that drives V3 and the ranked change list.
View on GitHub

Method

How the work went

V1: rebuild the original paywall as it was, with real buttons, to get a baseline that matches the control.
V2: polish only, with no change of offer or copy. A 4 and 8 px grid, small-text contrast of at least 4.5 to 1, a 44 px close target, aligned prices, a one-line discount badge, and Terms, Privacy and Restore on the first screen.
V3: V2 plus the audit. An outcome-led headline, social proof above the plans, full price and auto-renew terms next to the selection, a button that states the action and the price, and cancel-anytime text under it. An offer layer was added: a first-month discount strip with a reserve timer, a per-day price anchor, and an order summary with a savings line. Motion uses transform and opacity only, and respects reduced motion.
V3.2: V3 with the original prices, a collage without tilt and with slow drift, and a gradient button with a slow light sweep, all disabled for reduced motion.
V4: a new layout built from V1, with a live collage across the top, plans as side-by-side tiles, a 2 by 2 benefits grid and a gradient button whose darker end tone keeps white text readable. Same offer and prices as V1.
Hero variants: for V3, V3.2 and V4, several alternatives for the top photo block only (a single photo with slow zoom, a fan of cards, story progress bars, a scrolling feed, a tilted wall, a carousel, a mosaic and grids). The offer and the rest of the screen stay the same, and the interface is generic, with no logos or brand names.
V5: V3 with a new plan set taken from the brief, using illustrative prices. The discount strip and timer were removed because those plans carry no discount, and a timer without a real offer would mislead.
V6: V5 with one difference, a white button with dark text.

Output

What was produced

A baseline (V1), a polish-only version (V2), two audited versions (V3, V3.2), a new layout (V4) and two trial-plan versions (V5, V6).
Sixteen further hero-block variants for V3, V3.2 and V4.
Notes on why each version differs, so a test can be built from any pair.

Reasoning worth keeping

V2 isolates polish from offer changes, so a later test can tell which part moved the number.
V5 drops the timer when the offer has no discount. An urgency device needs a real rule behind it.
Per-day price is shown as support next to the billing price.
The button colour change in V6 tests contrast and emphasis only.

Results

Results: not measured yet

This case is a design exploration. No version has been run on real traffic, so there are no conversion, trial start, retention or refund figures to report. The numbers on any mock-up are illustrative placeholders.

No measured results: no paywall view to trial start rate, no paid conversion, no refund rate and no revenue per visitor for any version.
Social proof placeholders such as rating and count need real, substantiated figures.
Whether the first-month offer layer helps or hurts the app's economics has not been tested.

Planned test

Test order: default plan and trial structure first, then headline and proof, then the offer layer, then motion. One change per test. The primary metric is paid conversion per paywall view, with refunds as a guardrail.

Request an audit Back to the open-source skills

Let’s talk