Onboarding Flow
The designed sequence of steps that guides new users from sign-up to their first moment of value.
Plain English
Onboarding is the product's first impression — the gap between users who become power users and those who churn immediately. The goal of onboarding is not to teach users how the product works; it is to get them to their first "aha moment" as fast as possible. Every extra step in onboarding is a door in front of that moment. The best onboarding designs ask for only what is absolutely necessary upfront, defer optional setup, and show value before asking for work.
Technical
Onboarding patterns: (1) Progressive disclosure — show features as they become relevant, not all at once. (2) Empty state onboarding — first-use empty states that guide setup. (3) Checklists — show progress toward full setup, satisfying to complete. (4) Interactive product tours — overlays that highlight features in context. (5) Welcome emails — continuation of in-product onboarding. Design considerations: skip button always available, progress indicator, skip-able steps for returning users, contextual help triggered by specific user actions rather than time.
Live Demo
Welcome!
Let's personalise your experience. What's your name?
Onboarding should take under 2 minutes. Ask only what you need right now.
Usage
✓ Good usage
An onboarding that collects email/password at sign-up, immediately shows the empty dashboard, then surfaces an in-context checklist ("Add your first project") — users reach value in 2 minutes.
✗ Bad usage
An onboarding that collects: email, password, full name, company name, company size, role, use case, referral source, and profile photo — all before showing the product.
Recommended values
- Steps to first value: aim for under 5 minutes
- Required fields at sign-up: email + password only (defer the rest)
- Progress: show step N of M during multi-step onboarding
- Skip: always offer a skip for optional steps
- Aha moment: identify and remove every barrier between sign-up and it
Common mistakes
- Collecting non-essential information upfront — every field reduces completion rate.
- Product tours that block interaction — users want to explore, not watch a presentation.
- No progress indicator in multi-step onboarding — users do not know how close they are to done.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design onboarding: Step 1 (sign-up) = email + password only. Step 2 = immediate dashboard access + contextual checklist (5 items, each marking the first use of a feature). Skip available on all optional steps. Progress indicator shows N/M. No blocking product tour — only inline contextual hints.