User Onboarding Flow

Build a multi-step onboarding that captures real user data, persists progress, and lands users in a personalized app.

6 steps18 verify checks45-75 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#onboarding #wizard #signup #activation #profile

The Route

0/6 verified

Define onboarding steps and data

Decide exactly what to ask, why, and where each answer lives.

3 checks 02

Build the wizard shell

A solid multi-step frame: progress, navigation, and validation gates.

3 checks 03

Persist answers per step

Save as you go so progress and answers survive anything.

3 checks 04

Add routing rules

Onboarding must gate correctly: incomplete users in, completed users out.

3 checks 05

Personalize the app from answers

Prove the data matters: the app must visibly use what it asked for.

2 checks 06

Onboarding QA pass

Verify the wizard, persistence, routing, and personalization end to end.

4 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
I am adding a first-run onboarding wizard so new users set up their profile and preferences before using the app.

GOAL:
Implement a multi-step onboarding wizard whose answers persist and personalize the app.

REQUIREMENTS:
- 3-5 onboarding steps with progress indicator
- Each step validates before continuing
- Answers saved to the user profile in the database
- Resume mid-onboarding after refresh
- Completed users skip onboarding; app reflects their choices

CONSTRAINTS:
- Answers must actually persist - not vanish after the wizard
- Do not let users reach the app with required steps skipped
- Keep each step to one decision

DEFINITION OF DONE:
- A new user is routed into onboarding after signup
- Answers persist and appear in their profile/settings
- Refresh mid-wizard resumes the same step
- Completed users go straight to the dashboard
- At least one app surface visibly changes based on answers

COMMON FAILURES TO AVOID:
- A pretty wizard whose answers are thrown away
- Users stuck in onboarding loops after completing it
- Refresh restarting the wizard from step one
- Skip buttons bypassing required data

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More App Builder flows that share ground with this one.

App Builder

Generated

Build Real Web App Authentication with Sessions and Protected Routes

A step-by-step flow to implement real signup, login, logout, session persistence, password reset, validation, and protected routes with visible UI states and mobile responsiveness.

01Set the auth architecture and choose the real persistence layer

02Create the auth state layer and session restoration

03Build the signup flow with validation and duplicate email handling

+6 more steps to Done

Best forbuilders who have shipped a basic app before

9 steps60-120 minutesIntermediate

Start Route Details

App Builder