User Journey and Flow Design
Mapping paths, edge cases, and flows from first touch to task completion.
Journey maps and user flows: two lenses
A user journey map is a timeline of experience — awareness, consideration, purchase, use, support, loyalty — with actions, touchpoints, emotions, pain points, and opportunities at each stage. Scope can be macro across the brand relationship or micro for a single task like resetting a password.
A user flow diagrams screens and actions inside the product — nodes, arrows, decision diamonds, start and end points. Wireframes and prototypes grow from flows. Nova Lab uses both: journeys for empathy and strategy, flows for execution and developer handoff.
Building a journey map step by step
Define persona and scenario, choose three to seven stages, and document per stage: user goal, channel, action, thoughts, and emotion. Highlight pain points and opportunities honestly — checkout often includes anxiety before relief, and negative peaks reveal the best fixes.
Service blueprints add backstage operations — APIs, warehouses, support calls — useful in fintech, healthcare, and logistics where invisible ops affect visible experience.
Task flows, happy paths, and edge cases
The happy path is the minimum-step route to goal without errors — for example, landing → CTA → form → verify email → welcome. Each step should have one clear primary action; progress indicators reduce anxiety in multi-step flows.
Professional flows document error branches: network failure, validation errors, empty states, permission denials, session timeouts. Every error path needs recovery — retry, support contact, or return home. Audit flows with a “I am stuck” walkthrough to eliminate dead ends.
Reducing friction and handing off artifacts
Reduce steps without removing necessary information. Social login, autofill, smart defaults, and guest checkout lower friction when security allows. Split long forms into chunked steps to manage cognitive load.
Document flows in FigJam with color coding — green happy path, red errors, blue optional branches — and link Figma frames to nodes. Annotate business rules and dependencies. Update flows when features change; outdated diagrams mislead engineering worse than having none.
Related paths
FAQ
How many stages should a journey map have?
Macro journeys usually have five to seven stages. Fewer than three is too vague; more than ten is hard to maintain. Micro journeys for single tasks often need three to five steps.
What fidelity should a user flow use?
Low-fidelity boxes and arrows work for early alignment. Link to wireframe frames once information architecture stabilizes, then high-fidelity prototypes for testing and demos.
How do I align flows with business goals?
Map each step to user goals and business metrics such as signup, purchase, or retention. Steps that only dump features without metric purpose deserve scrutiny.