10 KiB
User Flow Template
Use this template when mapping user journeys through your interface.
User Flow Structure
Flow Overview
Flow Name: [Descriptive name of the flow] Primary User: [Which persona is this for?] User Goal: [What is the user trying to achieve?] Success Metric: [How do you measure successful completion?]
Flow Diagram
Entry Point → Step 1 → Decision Point → Step 2 → Success
↓
Error Recovery → Step 2
Detailed Steps
Entry Point
Where does the user start?
- Homepage
- Landing page
- Email link
- Search result
- Social media
- Direct URL
User context at entry:
- What do they know?
- What are they expecting?
- What device are they likely using?
Step 1: [First Action]
What the user does: [Description] What they see: [Screen/page description] What they think: [Expected mental model]
Potential friction points:
- Unclear what to do next?
- Too many options?
- Missing information?
Design considerations:
- Clear call-to-action
- Helpful guidance
- Error prevention
Decision Point: [Choice or Condition]
Condition: What determines the path? Options:
- Option A: → [Next step if A]
- Option B: → [Next step if B]
- Option C: → [Next step if C]
Design considerations:
- Make options clearly distinct
- Provide context for decision
- Allow easy return/correction
Step 2: [Next Action]
[Repeat step structure as needed]
Success State
What success looks like:
- Task completed
- Clear confirmation
- Next steps offered
What the user feels:
- Satisfied
- Confident
- Ready to continue
Error/Alternative Paths
Common errors:
- [Error type] → [Recovery path]
- [Error type] → [Recovery path]
Exit points:
- Where might users abandon flow?
- Why would they leave?
- How to prevent or recover?
Example User Flows
Example 1: E-commerce Purchase Flow
Flow Name: First-Time Product Purchase Primary User: Sarah (busy professional, mobile-first) User Goal: Buy running shoes quickly and confidently Success Metric: Completed purchase, confirmation email received
Flow:
Homepage → Product Search → Product Details → Add to Cart
↓
Size Selection Modal Cart Review → Checkout
↓ ↓
Confirm Selection Shipping Info → Payment → Confirmation
↓ ↓ ↓
Added Notification Saved Address Saved Card
↓ ↓
Review Review
Detailed Steps:
Entry: Homepage
- User arrives from Google search "running shoes"
- Expecting: Shoe selection, easy browsing
- Device: Mobile (70% of traffic)
Step 1: Search
- User types "running shoes women" in search
- Sees: Grid of products with images, prices, ratings
- Friction: Too many options (300+ results)
- Solution: Smart filters (size, brand, price)
Step 2: Product Detail
- User taps product card
- Sees: Large images, reviews, size chart, "Add to Cart" CTA
- Friction: Uncertain about size
- Solution: Size guide, reviews mention fit
Decision: Size Selection
- Modal appears with size options
- Context: Size chart visible, "True to size" indicator
- Required: Must select size to add to cart
Step 3: Add to Cart
- Success toast: "Added to cart"
- Options: "Continue shopping" or "View cart"
- 60% continue shopping, 40% checkout immediately
Step 4: Cart Review
- Shows: Product, size, quantity, price
- Edit options: Change quantity, remove item
- Clear CTA: "Proceed to Checkout"
Step 5: Checkout
- Shipping address (saved if returning user)
- Payment method (saved if returning user)
- Order review
- Single page vs multi-step based on A/B test
Success: Confirmation
- Order number displayed
- Email confirmation sent
- Estimated delivery date
- Next step: "Track order" or "Continue shopping"
Error Paths:
- Out of stock: Show similar products
- Payment declined: Clear error, retry option
- Shipping address invalid: Suggest corrections
Exit Points:
- Search results (too many options → better filters)
- Product page (price too high → show value, reviews)
- Checkout (unexpected shipping cost → show earlier)
Example 2: SaaS Onboarding Flow
Flow Name: New User Account Setup Primary User: David (IT Director, desktop user) User Goal: Set up secure team account with proper permissions Success Metric: Team invited, first project created, security configured
Flow:
Sign Up → Email Verification → Profile Setup → Team Setup
↓
Invite Team → Security Settings → First Project
Detailed Steps:
Entry: Sign Up Page
- Arrived from marketing site "Start Free Trial"
- Expectations: Professional, secure, straightforward
- Concerns: Data security, team permissions
Step 1: Account Creation
- Work email required (no personal emails)
- Strong password requirements shown
- Company name field
- See: Security badges, privacy policy link
Step 2: Email Verification
- Confirmation email sent immediately
- Clear instructions in email
- Return to product after verification
- Fallback: Manual verification link
Step 3: Profile Setup
- Role selection (Admin/User)
- Department (for categorization)
- Use cases (for personalization)
- Optional: Profile picture
Step 4: Team Invitation
- Add team members by email
- Assign roles (Admin/Editor/Viewer)
- Bulk upload option for larger teams
- Can skip (but encouraged to invite at least 1)
Step 5: Security Configuration
- Two-factor authentication setup
- SSO integration option
- IP whitelist option
- Compliance requirements checklist
Step 6: First Project
- Guided project creation
- Template selection
- Import existing data option
- Sample data for exploration
Success: Dashboard
- Welcome message
- Team status visible
- Quick action buttons
- Link to comprehensive documentation
Progressive Disclosure:
- Critical: Email, password, role
- Important: Team invites, security
- Optional: Advanced settings, integrations
Example 3: Mobile App First Use
Flow Name: Fitness App First Workout Primary User: Marcus (personal trainer, mobile-first) User Goal: Complete first workout tracking Success Metric: Workout logged, felt easy and quick
Flow:
App Launch → Permission Requests → Goal Setting → First Workout
↓
Exercise Selection → Timer → Completion
Detailed Steps:
Entry: App Launch
- First time opening app
- Just downloaded from App Store
- Expecting: Quick start, not lengthy setup
Step 1: Permissions
- Health data access (for tracking)
- Notifications (for reminders)
- Camera (for progress photos)
- Each explained with benefit
Step 2: Goal Setting
- Fitness goal (lose weight, gain muscle, maintain)
- Experience level (beginner, intermediate, advanced)
- Available time per workout
- Can modify later
Step 3: First Workout Prompt
- "Ready for your first workout?"
- Pre-selected based on goals
- "Quick Tour" option for UI explanation
- Can browse workouts instead
Step 4: Exercise Selection
- Simple list of exercises
- Tap to add to today's workout
- Popular/recommended highlighted
- Search for specific exercises
Step 5: During Workout
- Exercise name and demo GIF
- Timer for sets/reps
- Easy logging (checkmarks or swipes)
- Minimal UI, maximum screen space
Success: Completion
- Celebration animation
- Workout summary
- Share option
- "Schedule next workout" CTA
Recovery Paths:
- Paused mid-workout → "Resume" or "End"
- Closed app → "Continue workout" on reopen
- Different exercise → Easy swap
User Flow Best Practices
Keep Flows Simple
Minimize steps:
- Every step is a chance to lose users
- Combine steps where logical
- Remove unnecessary fields
Progressive disclosure:
- Show only what's needed now
- Reveal advanced options later
- Don't overwhelm upfront
Provide Clear Paths
Visual clarity:
- Clear primary CTA at each step
- Secondary options less prominent
- Breadcrumbs for multi-step processes
Feedback:
- Show current step
- Indicate steps remaining
- Confirm actions taken
Handle Errors Gracefully
Prevention:
- Validate as user types
- Clear input format examples
- Disable impossible choices
Recovery:
- Specific error messages
- Clear fix instructions
- Easy return to previous step
Test and Iterate
Methods:
- User testing (observe real users)
- Analytics (where do users drop off?)
- A/B testing (compare variations)
- Support tickets (common problems)
Iterate:
- Remove friction points
- Simplify complex steps
- Add helpful context
- Test again
User Flow Checklist
- Clear entry point identified
- User goal explicitly stated
- Each step has clear purpose
- Decision points well-defined
- Success state described
- Error paths mapped
- Exit points identified
- Friction points noted
- Mobile considerations included
- Accessibility considered
- Analytics tracking planned
- Alternative paths documented
Common Flow Patterns
Linear Flow
When to use: Simple, sequential tasks Example: Sign up, checkout, form submission
Hub and Spoke
When to use: Dashboard with multiple features Example: Social media app, productivity tool
Guided Flow
When to use: Complex processes needing explanation Example: Tax software, loan application
Open-Ended Flow
When to use: Exploration and discovery Example: Shopping, content browsing
Mapping Tools
Simple flows:
- Text outline (like these examples)
- Whiteboard sketch
- Sticky notes
Complex flows:
- Flowchart tools (Figma, Miro, Lucidchart)
- Specialized UX tools (Overflow, FlowMapp)
- Collaborative tools for teams
Key: Choose tool that helps thinking, not impresses stakeholders