Onboarding in Four Screens

01The problem

Four screens between a stranger and the first thing your product is actually for.

02The brief

A consumer app was losing 60% of new accounts before the first meaningful action. The onboarding was six screens of explanation followed by an empty home screen — the product explained itself thoroughly and then abandoned the user at the point of use.

Who it's forFoundersMobile product teams

ConstraintsiOS first, one thumb, no account required before the third screen.

03The approach

Move the account creation as late as it can go, and make the first two screens do real work rather than describe work. Explanation is replaced by a small, completable action whose output the user keeps.

Reference landscape

Duolingo — Right about doing before signing up
Notion — Wrong for consumer — template choice as a first act is paralysing

04The insight it turns on

“Ask for the account after the value, not before it.”

Every field asked before the user has felt anything is a field asked on credit. Moving sign-up to screen three meant the user had already produced something they didn't want to lose, which is a far better reason to hand over an email address than a promise.

05How it was made

Stage by stage

01
User profiling
Two audiences with opposite tolerances: the curious browser who will abandon at any friction, and the intent-driven arrival who resents being slowed down. The flow has to serve both without branching.
02
Wireframes
Four layouts, each with a single primary action and no dismissible chrome. Nothing is skippable because nothing is filler.
03
Design system
Nine components, all of which recur later in the product — onboarding introduces the vocabulary rather than inventing its own.

06The hard parts

What was difficult

Deferring sign-up means holding state for an anonymous user.

The flow is designed so the produced artefact is small enough to hold locally and re-attach on account creation, which is documented in the handoff notes rather than left for engineering to discover.

07What's inside

Exactly what you get

Figma source
4 screens
Light + dark
Interactive prototype

Version: 1.0.0
Formats: Figma
Screens: 4
Components: 9
Dark mode: Yes
Prototype: Yes
Accessibility: AA

08What it changed

First-action completion moved from 40% to a projected 70% in prototype testing.