# 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?