Paywall UI Concept
A mobile upgrade screen for a made-up game streaming service. Most of my day job is enterprise dashboards, so I set myself the brief of designing something louder, more consumer-facing, and mobile-first — and to see if I could make the pricing section feel fair rather than pushy.
My Role
// What I personally ownedUX/UI designer — self-initiated concept. I set the brief, researched paywall patterns, designed the UI, and wrote all the microcopy.
The Problem
// Why this needed to existMost of my professional work lives on the enterprise side: dense dashboards, internal tools, long-session use. I wanted a project on the opposite end of the spectrum — short attention span, emotional pull, a mobile screen that has a few seconds to land a pricing decision.
The question I was most curious about: can a paywall feel premium without reaching for the usual dark patterns? I wanted to see how far clear copy and honest pricing could carry the screen, without tricks like suppressed alternatives or confusing per-unit rates.
Project type
Format
Tool
Key Design Decisions
// What I tried, what I changed, whyEarly wireframes from the design phase. The shipped app adapted these — layouts were simplified and flows evolved during development.
Benefit-first structure, not feature-first
Typical paywall screens list features in bullet points — a checklist of what the product does, not what the user gets.
Three benefits in scannable format: 'First-in-Line' (priority access), 'Best Visual Experience' (quality), 'Infinite Gaming' (library). Focused on what the user gets, not what the product does.
Why: Nobody upgrades to get "priority queue access" — they upgrade to stop waiting. Reframing each bullet around what the user actually gets puts the emotional pull before the pricing ask, rather than after it.
Pricing that aids comparison without dark patterns
Many paywall screens visually suppress the cheaper option or use confusing per-unit pricing to obscure cost.
Two options presented side-by-side: $9.99/month with a 'Save 50%' badge and $4.99/week as the alternative. Both prices equally visible — the annual option designed to feel like the obvious choice without hiding the weekly price.
Why: Anchoring works even when you're honest about it. Putting both prices at the same visual weight means the monthly price reads as a saving on its own — no need to hide the weekly option or fiddle with per-unit maths.
Hero section with illustration
Generic gradient backgrounds or static screenshots that don't communicate brand personality.
Bold purple background with high-energy illustration. Headline ('Stream. Play. Win.') is direct and benefit-first. Tagline ('No console? Pumpkin got you handled.') uses casual, confident copy to build brand voice.
Why: By the time someone scrolls to the pricing section, they've already decided how they feel about the product. The hero is where that decision gets made, so it needs to carry most of the personality.
Outcomes & Validation
// What I can point toThis was a self-set brief, so there's nothing to measure — but it gave me a chance to work on the things I don't usually get to:
- Writing microcopy where every word has to earn its space
- Designing a screen where emotion is doing as much work as information
- Building a pricing layout that nudges honestly rather than hiding options
- Getting hands-on with illustration, colour, and type hierarchy in a consumer register