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"