Recipe
Designing a Product Tour
A step-by-step guide to building onboarding flows that convert trial users into paying customers.
1
Map the Aha Moment
Identify the single action that delivers core value. Build every tour step backward from that moment.
2
Progressive Disclosure
Show one concept per step. Use tooltips anchored to UI elements — never modal overlays that block the product.
3
Measure & Iterate
Track completion rate, time-to-value, and drop-off per step. Kill steps that users skip.
Implementation Checklist
- ✓Define a tour state machine with step IDs, completion flags, and skip conditions.
- ✓Anchor tooltips to DOM elements using getBoundingClientRect with scroll-aware positioning.
- ✓Persist tour progress per user — resume from last incomplete step on return.
- ✓Add an escape hatch: always show a "Skip tour" link and a "Restart tour" option in settings.