Recipe Journey Map
A step-by-step visual guide that walks users through multi-stage workflows — from onboarding to mastery — using progressive disclosure and milestone tracking.
When to use
Onboarding flows, setup wizards, learning paths, and any experience where users need clear orientation through a sequence of steps.
Entry Point
A clear call-to-action that sets expectations — estimated time, step count, and the outcome the user will achieve.
Progressive Steps
Each step reveals only what the user needs right now. Completed steps collapse; upcoming steps stay hidden until the user reaches them.
Milestone Celebrations
Micro-rewards at key checkpoints reinforce progress and reduce drop-off. Confetti, checkmarks, or brief animations signal accomplishment.
Completion State
A summary view with next actions — share results, save progress, or advance to the next journey. Never dead-end the user.
Best Practices
- ▸Keep total steps between 3 and 7 — fewer feels trivial, more feels overwhelming.
- ▸Persist progress so users can resume mid-journey after closing the tab.
- ▸Allow backward navigation without losing forward progress.
- ▸Use the brand violet for active steps and pink for completed milestones to maintain visual consistency.