Onboarding Flow
First-run experience that helps new users reach their first value moment quickly.
Layout
Centered single column, 480px max-width. Progress indicator at top (steps or percentage). One primary question or action per screen. Skip option always available. Brand mark in top-left or top-center.
Content Slots
Progress indicator
Step counter ("2 of 4") or progress bar at top. Required for multi-step.
Step heading
20–24px bold — states what this step accomplishes, not what to do.
Step description
14–16px — one sentence explaining why this step matters.
Primary input or choice
The single action for this step. One thing only.
Continue CTA
Full-width primary button. Disabled until required input complete.
Skip option
Text link below CTA — always available. Never guilt-trip.
Value hint
Small contextual note explaining what this unlocks.
Hierarchy Rules
- One decision per screen — progressive disclosure prevents overwhelm
- Skip is always available — forcing completion increases abandonment, not quality
- The continue button is the primary element — must be most visually prominent
- Progress indicator must always be visible — users abandon when they can't see the end
- Apply Hick's Law: each additional required step measurably reduces completion rate
Examples
- Step 1: "What are you building?" (product type picker) → Step 2: "Name your workspace" → Step 3: "Invite your team"