templates/onboarding-flow-template.md

Onboarding Flow Template

Use this template to design clear, encouraging onboarding experiences that help users succeed quickly.

Onboarding Principles

1. Show value early — Help users succeed in their first session
2. Progressive disclosure — Don't overwhelm with all features at once
3. Optional whenever possible — Let users skip and explore
4. Celebrate small wins — Acknowledge each completed step
5. Be concise — Users want to start using the product, not read about it

Core Flow Structure

Welcome → Setup → First Success → Next Steps

Each step should answer:

• Where am I? (Progress indicator)
• What do I do here? (Clear instruction)
• Why does this matter? (Benefit to user)
• Can I skip this? (Exit option)

Template: Welcome Screen

Purpose: Orient user and set expectations

**Headline**: [Welcome + value proposition]
**Body**: [2-3 benefits, bulleted]
**Primary CTA**: [Get started action]
**Secondary CTA**: [Sign in, if applicable]

Example:

**Headline**: Welcome to TaskFlow
**Body**: 
• Organize projects with your team
• Track progress in real time  
• Never miss a deadline

**Primary CTA**: Create account
**Secondary CTA**: Sign in

Template: Account Setup

Purpose: Collect essential information only

**Title**: [Action-oriented title]
**Body**: [Why this information is needed]
**Fields**: [Minimum required fields]
**Primary CTA**: [Continue/Next action]
**Secondary CTA**: [Skip, if truly optional]

Example:

**Title**: Tell us about yourself
**Body**: We'll personalize your experience.

**Fields**:
- Name
- Email  
- Password

**Primary CTA**: Continue
**Secondary CTA**: I'll do this later

Best practices:

• Only ask for what you absolutely need now
• Explain why each field is required
• Use smart defaults when possible
• Allow skipping optional steps

Template: Feature Introduction

Purpose: Teach one feature at a time through action

**Title**: [Feature name + benefit]
**Body**: [Brief explanation, 1-2 sentences]
**Visual**: [Screenshot or illustration]
**Primary CTA**: [Action to try the feature]
**Secondary CTA**: Skip / Next
**Progress**: [X of Y steps]

Example:

**Title**: Create your first project
**Body**: Projects help you organize related tasks and collaborate with your team.

[Visual: Screenshot of project view]

**Primary CTA**: Create project
**Secondary CTA**: Skip for now
**Progress**: Step 2 of 4

Best practices:

• Show, don't tell (use visuals)
• Let users try immediately
• Keep explanations under 20 words
• Always allow skipping

Template: First Success / Completion

Purpose: Celebrate user's first win, encourage next action

**Title**: [Celebratory statement]
**Body**: [What they accomplished + what's possible next]
**Primary CTA**: [Next natural action]
**Secondary CTA**: [Alternative or exit to product]

Example:

**Title**: You're all set!
**Body**: You created your first project. Ready to invite your team?

**Primary CTA**: Invite team members
**Secondary CTA**: Explore on my own

Best practices:

• Use exclamation points sparingly (once per flow max)
• Make the celebration feel earned
• Suggest logical next step
• Provide exit to main product

Onboarding Step Checklist

For each step in your onboarding flow, verify:

• Single focus — One action or concept per step
• Clear value — User knows why this matters
• Actionable — User knows exactly what to do
• Skipable — Optional steps can be skipped
• Progress visible — User knows how many steps remain
• Concise — Body text under 30 words
• Appropriate tone — Encouraging without being patronizing

Content Patterns by Step Type

Welcome/Introduction

Pattern: "Welcome to [Product]. [Do X to achieve Y]."

Examples:

• "Welcome to Notion. Create beautiful docs, wikis, and projects."
• "Welcome to Figma. Design, prototype, and collaborate in real time."

Permission Request

Pattern: "Enable [permission] to [specific benefit]"

Examples:

• "Enable notifications to stay updated on team activity"
• "Allow camera access to scan documents instantly"

Feature Tutorial

Pattern: "[Action]. [Brief benefit]."

Examples:

• "Add your first task. Stay organized and never miss a deadline."
• "Create a workspace. Collaborate with your team in one place."

Completion

Pattern: "[Celebration]! [What's now possible]. [Optional: Next step]"

Examples:

• "You're ready to go! Start creating, or invite teammates to collaborate."
• "Setup complete! Your workspace is ready for your team."

Tone Variations

Professional/B2B

**Title**: Set up your workspace
**Body**: Add team members and create your first project.
**CTA**: Continue setup

Consumer/Casual

**Title**: Let's get you started!
**Body**: This will only take a minute.
**CTA**: Let's go

Technical/Developer

**Title**: Configure your environment
**Body**: Connect your repository to start deploying.
**CTA**: Connect repo

Multi-Screen Flow Example

Screen 1: Welcome

**Welcome to WriteRight**

Write better, faster with AI-powered editing.

• Fix grammar instantly
• Improve clarity and tone
• Write with confidence

[Get started]

Screen 2: Setup

**What brings you to WriteRight?** (2 of 4)

Select all that apply:
□ Business writing
□ Creative writing  
□ Student papers
□ Personal projects

[Continue] [Skip]

Screen 3: First Action

**Try it out** (3 of 4)

Paste any text below and watch WriteRight improve it.

[Text input box]

[Analyze my writing] [Skip]

Screen 4: Success

**Nice work!**

You improved your first piece of writing. Ready to write your next masterpiece?

[Start writing] [See tips]

Common Mistakes to Avoid

❌ Too many steps: 10+ screens before using the product ✅ Focused flow: 3-5 steps to first value

❌ Feature dump: "Here are 47 things you can do!" ✅ Progressive disclosure: One key feature at a time

❌ No skip option: Forcing users through every screen ✅ Respect choice: Skip available for optional features

❌ Passive voice: "Your account has been created" ✅ Active voice: "You created your account!"

❌ Corporate speak: "Facilitate enhanced productivity" ✅ Plain language: "Get more done"

Quick Flow Builder

Use this to draft a basic onboarding flow:

Product name: Core value (one sentence): Key features to introduce (pick 2-3): 1. 2. 3.

First user action that shows value: Celebration/success moment:

Draft flow:

1. Welcome → [Value prop]
2. Setup → [Essential info only]
3. Feature 1 → [Try it action]
4. Feature 2 → [Try it action]
5. Success → [Celebrate + next step]

Testing Your Onboarding

Questions to answer:

1. Can users complete onboarding in under 2 minutes?
2. Do users achieve something meaningful in their first session?
3. Can users skip optional steps without confusion?
4. Is the tone encouraging without being condescending?
5. Does each screen have a single, clear purpose?