Overview
How might we design onboarding progress tracking so people can trust and act on AI output?
When this pattern fits
- Ideal for multi-step onboarding flows, tutorial systems, and applications where visual progress tracking motivates completion and reduces abandonment.
When to skip or lighten it
- Single-screen signup with no follow-on tasks.
- Gamified badges that trivialize enterprise products.
- Progress bars that lie about optional steps.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Progress stuck at 90 percent with hidden steps.
No way to reopen checklist after dismiss.
Celebrations that block continue button.
Steps that do not reflect real activation.
How products use it
| Product | Implementation |
|---|---|
| Duolingo | Lesson path progress and streak counters. |
| Codecademy | Course percent and skill checkpoints. |
| Productivity apps | Getting started checklists on home. |
| Gaming platforms | Achievement and tutorial quest trackers. |
Real-world examples
How shipped products implement onboarding progress tracking, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Onboarding Progress Tracking" AI interface design pattern.
Pattern Definition:Frequently asked questions
What steps belong on AI onboarding?
First prompt success, connect data, try key AI feature, invite teammate, optional advanced tool.
Progress vs learning path?
Progress tracks any checklist. Learning path recommends ordered curriculum.
Show percent or steps?
Both: step list for clarity, bar for momentum.
Incomplete after 30 days?
Collapse to reminder, do not nag daily forever.