Menu

Tier 1 Topic UX.1.03

Journey Mapping, Flows & Task Analysis

Visualize the full experience from the user's emotional arc to the screen-by-screen path through your product. Four complementary tools — journey maps, empathy maps, user flows, and task analysis — at different zoom levels of the same question: what is the user going through?

20% Theory 55% Methods & Templates 25% Examples
Theory

What journey mapping is and why it matters

Journey mapping is the practice of visualizing the complete experience a person has while trying to accomplish a goal. It shows the sequence of steps, the touchpoints where they interact with your product or service, the emotions they feel along the way, and the pain points where things break down.

The core value of a journey map is perspective shift. When you work on a product day after day, you see it from the inside out — features, components, sprints. A journey map forces you to see it from the outside in — through the eyes of someone who just wants to get something done. That shift consistently reveals problems that are invisible from the inside.

But journey maps are just one tool in a family of visualization methods. This topic covers four related tools that work at different levels of detail, each answering a different question:

The four tools and their questions

Journey maps: "What is the full experience like, emotionally and practically?"

Empathy maps: "What is this person thinking, feeling, saying, and doing right now?"

User flows: "What screens and decisions does the user move through to complete this task?"

Task analysis: "What are the exact steps, decisions, and cognitive demands of this task?"

These tools are complementary, not competing. On a real project you might build a journey map to see the full picture, create empathy maps for key personas at critical moments, then design user flows for the specific features you're building, and run task analysis on the most complex interactions. Each tool gives you a different lens on the same user experience.

The zoom-level framework

Think of these four tools as zoom levels on the same map. Each level reveals different details and supports different decisions.

Zoom Levels of User Experience Visualization Framework

Use this to choose the right tool for your current question.

Level 1: Experience map (widest view)

The entire relationship over time — from first awareness through long-term use and advocacy. Not tied to a specific product. Shows the full context of the user's life as it relates to the problem space. Useful for strategy and positioning.

Level 2: Journey map (product-level view)

One specific scenario from the user's perspective — e.g., "booking a flight" or "onboarding as a new user." Shows stages, touchpoints, emotions, and pain points. This is where most teams spend their time. Useful for identifying opportunities and prioritizing improvements.

Level 3: User flow (screen-level view)

The specific path through your product's interface — screens, clicks, decision points, branches, error states. Tied to your actual (or planned) UI. Useful for design and development — this is what gets built.

Level 4: Task analysis (action-level view)

The granular breakdown of what the user must do, decide, and remember at each step. Identifies cognitive load, error-prone moments, and unnecessary complexity. Useful for optimizing specific interactions and reducing friction.

Practical

Journey maps

A journey map is a visual timeline of a user's experience with your product or service for a specific scenario. It typically includes the stages of the journey, what the user is doing at each stage, what they're thinking and feeling, the touchpoints where they interact with you, and the pain points where things break down.

Anatomy of a journey map

Every journey map has the same basic structure, regardless of visual style:

The horizontal axis is time — divided into stages (Awareness, Consideration, Purchase, Onboarding, Regular Use, etc.). These stages come from your research, not from your org chart. If users think of the experience as "before, during, and after," those are your stages — even if your company has twelve internal departments involved.

The vertical lanes capture different dimensions:

Actions: What the user is doing at each stage. Observable behaviors.

Thoughts: What they're thinking. Internal monologue, questions, concerns.

Emotions: How they feel. Usually shown as a curve from positive to negative. The emotional valleys are your biggest opportunities.

Touchpoints: Where they interact with your product, brand, or team. Website, app, email, phone call, physical location.

Pain points: Where things break down. Frustrations, confusion, friction, abandonment.

Opportunities: Your annotations — ideas for improving each pain point.

Practical tip

The emotion curve is the most powerful element of a journey map. When you present it to stakeholders, their eyes go straight to the valleys. Those valleys become the prioritization tool — "why is the user miserable at this point, and what can we do about it?" No amount of feature requests or roadmap debates is as persuasive as a visual dip in user happiness.

Building a journey map step by step

Journey Mapping Workshop Core Method

Use when: You have research data (interviews, observations, surveys) and need to synthesize it into a visual that reveals opportunities. Also works as a collaborative alignment exercise with cross-functional teams.

1. Choose the scenario and persona

A journey map covers one persona doing one thing. "Sarah, a first-time buyer, purchasing a sofa online" — not "all users doing everything." The more specific the scenario, the more useful the map. If you have multiple personas, create separate maps. Trying to combine them produces a vague average that helps no one.

2. Define the stages

What are the major phases of this experience from the user's perspective? Start before they encounter your product (what triggers the need?) and end after the immediate task is done (what happens next? do they come back?). Typical stages: Trigger/Need, Research, Decision, First Use, Regular Use, Problem/Support, Renewal/Churn. Use your research to name these in the user's language.

3. Fill in the lanes

For each stage, populate the actions, thoughts, emotions, touchpoints, and pain points. Use actual research data — direct quotes, observed behaviors, survey responses. The team works together, placing sticky notes (physical or digital) in each cell. Disagreements are good — they reveal assumptions that need more research.

4. Draw the emotion curve

Plot the user's emotional state across the journey — high points (delight, confidence, relief) and low points (frustration, confusion, anxiety). Connect the dots. The shape of this curve tells the story: a steady decline means the experience degrades over time. A V-shape means there's a crisis point followed by recovery. A flat line means the experience is forgettable.

5. Identify opportunities

At every pain point, ask: "What could we do here?" Annotate the map with opportunity notes. Prioritize by impact (how many users does this affect? how severe is the pain?) and feasibility (can we actually fix this?). The top 3–5 opportunities become your action items.

6. Share and iterate

A journey map that lives in a drawer is worthless. Put it on the wall. Present it in sprint planning. Reference it in design reviews. Update it as you learn more. The map is a living document — when you fix a pain point, update the map. When new research reveals a new problem, add it.

Empathy maps

An empathy map captures what a user or persona is experiencing at a specific moment — not across a journey, but at one point in time. It's a four-quadrant canvas: Says, Thinks, Does, Feels.

Empathy Mapping Synthesis Tool

Use when: After interviews or observations, to organize what you've learned about a user segment. Also useful before building a journey map — one empathy map per persona per critical stage gives you the raw material.

Says: Direct quotes from interviews. What did the user actually say out loud? Use their exact words, not your paraphrase.

Thinks: What the user is thinking but might not say. Inferred from behavior, body language, pauses, workarounds. What concerns them? What are they hoping for?

Does: Observable actions and behaviors. What did you actually see them do? Include workarounds — unofficial steps they take because the official process doesn't work.

Feels: Emotional state. Frustrated, anxious, confident, overwhelmed, excited. Look for mismatches — if they say "it's fine" but their behavior shows frustration, that's an insight.

The power is in the contradictions

The most valuable insights from empathy maps come from contradictions between quadrants. When someone says "I love this product" but does workaround after workaround, or thinks "I should be able to do this" but feels anxious — that gap between quadrants is where the real design opportunity lives.

User flows

A user flow is a diagram showing the path a user takes through your product's interface to complete a specific task. Unlike a journey map (which captures the emotional experience), a user flow captures the structural path — screens, actions, decisions, branches, and endpoints.

User flows are the bridge between research and design. The journey map tells you what the experience should feel like. The user flow tells you what screens you need to build and how they connect.

Components of a user flow

Entry point: Where does the user start? Homepage, deep link, notification, email?

Screens/pages: Each step the user sees — represented as rectangles.

Decision points: Where the user makes a choice — represented as diamonds. "Is the item in stock?" "Does the user have an account?"

Actions: What the user does on each screen — clicks, inputs, selections.

Branches: Alternative paths based on decisions or system states.

End states: Success (task completed), failure (error, abandonment), or redirect (to another flow).

Don't forget the unhappy paths

Most user flows only show the "happy path" — everything goes right, the user has an account, the payment succeeds, the item is in stock. In reality, unhappy paths are where users spend most of their frustration. What happens when the password is wrong? When the address can't be verified? When the connection drops mid-checkout? Map these paths. They're where your product's quality is actually tested.

Building a user flow step by step

User Flow Diagramming Core Method

Use when: Moving from research/strategy into actual interface design. When you need to specify what screens exist, how they connect, and what happens at each decision point.

1. Define the task and entry point

Be specific: "New user signs up via mobile app after clicking a referral link" — not "user registration." The entry point determines the first screen. Different entry points (homepage vs. deep link vs. notification) often need different flows.

2. Map the happy path first

Walk through the ideal scenario. The user does everything right, everything works, task complete. This gives you the spine of the flow. Use rectangles for screens, arrows for transitions, and brief labels for actions.

3. Add decision points

Go back to the start and at each step ask: "What could go differently here?" User has no account vs. returning user. Item in cart vs. empty cart. Payment succeeds vs. fails. Each decision creates a diamond with branches. Label each branch clearly (Yes/No, or the specific condition).

4. Map the error states and edge cases

For every branch that isn't the happy path: where does the user end up? What do they see? How do they recover? "Payment failed — show error → offer retry → offer alternative payment method." These recovery paths are often where the design is weakest because they're designed last (if at all).

5. Annotate with content and data needs

On each screen, note: what information does the user need to see? What input do we need from them? What data does the system need to look up? This turns the flow diagram into a spec that developers and content writers can work from.

Task analysis

Task analysis breaks a user's goal into its component actions, decisions, and information needs. Where a user flow shows the path through an interface, task analysis shows the cognitive and physical demands of each step — what the user must know, decide, remember, and do.

Hierarchical Task Analysis (HTA) Core Method

Use when: Designing complex interactions, optimizing existing workflows, onboarding design, or anywhere cognitive load matters. Especially valuable for forms, multi-step processes, and professional tools.

HTA decomposes a top-level goal into sub-goals, and sub-goals into operations (individual actions). The structure looks like a tree: the root is the overall goal, branches are sub-goals, and leaves are specific actions.

1. Identify the top-level goal

"Book a flight" or "Submit a quarterly expense report" or "Set up a new user account." This is the outcome the user wants, stated in their language, not yours.

2. Decompose into sub-goals

What major steps must happen to achieve the goal? For "book a flight": search for flights, compare options, select a flight, enter passenger details, pay. Each sub-goal should be a meaningful chunk — not individual clicks, but recognizable stages.

3. Decompose sub-goals into operations

For "enter passenger details": enter first name, enter last name, enter date of birth, enter passport number, select meal preference. Now you're at the action level — individual things the user must do. Note which operations require the user to remember external information (passport number) vs. what they know off the top of their head (their name).

4. Add plans (the order and logic)

How do the sub-goals relate? Strictly sequential (must do step 1 before step 2)? Parallel (can happen in any order)? Conditional (only if the user is booking for someone else)? The plans reveal unnecessary constraints — if steps 2 and 3 are currently forced into sequence but could be parallel, that's a design improvement.

5. Assess cognitive load at each node

For each operation, ask: How much does the user need to remember? How many choices do they face? How likely is an error? Where do they need external information? High-load nodes are redesign targets — can you provide defaults, auto-fill, reduce options, or break the step into smaller pieces?

Cognitive Task Analysis (CTA) Advanced

Use when: Designing for expert users, safety-critical systems, or complex decision-making workflows where understanding the mental model matters as much as the actions.

CTA extends HTA by asking not just "what does the user do?" but "what does the user need to know, decide, and notice?" For each step you capture: the knowledge required, the cues the user watches for, the decisions they make, the strategies they employ, and the errors they're likely to commit. This is particularly valuable for designing dashboards, medical interfaces, and professional tools where users are making judgments, not just completing forms.

Templates and checklists

Template Journey Map Canvas
Persona

[Name and key characteristics]

Scenario

[What are they trying to accomplish?]

Stages → [Awareness] → [Research] → [Decision] → [First Use] → [Ongoing Use]

Lanes ↓ Actions | Thoughts | Emotions (curve) | Touchpoints | Pain points | Opportunities

Template Empathy Map Canvas
Says

[Direct quotes from interviews]

Thinks

[Inferred thoughts, concerns, hopes]

Does

[Observable actions, workarounds]

Feels

[Emotions — look for contradictions]

Checklist Journey mapping readiness checklist
  • Research completed — interviews, observations, or survey data from real users
  • Specific persona and scenario selected (not "all users doing everything")
  • Stages defined from the user's perspective, not the organization's
  • Cross-functional team invited to the mapping workshop
  • Wall space or digital whiteboard prepared with lane template
  • Actual user quotes and observations printed/ready to reference
  • Stakeholders briefed — they'll see the final map
Checklist User flow completeness checklist
  • Happy path mapped end to end
  • Entry points identified (all the ways a user can arrive at this flow)
  • Decision points marked with clear conditions on each branch
  • Error states and recovery paths documented
  • Edge cases covered (empty states, first-time vs returning users, permissions)
  • Content and data needs annotated per screen
  • Flow reviewed by development — is it buildable?
Examples

Real-world examples

Case study

Uber: the rider journey map

Uber's design team maps the rider experience from "I need a ride" to "arriving at the destination." The stages: need arises, open app, request ride, wait for driver, ride, arrive, pay/rate. The critical insight from their journey maps was that the waiting stage — between requesting and the car arriving — had the highest emotional anxiety. Users didn't know if the driver was coming, how long it would take, or if they'd been forgotten. The solution: a real-time map showing the driver's location plus an ETA. This single feature transformed the most anxious stage into the most reassuring one. The emotional curve flipped from a valley to a gentle plateau.

Case study

NHS: patient journey through emergency care

The UK's National Health Service mapped the patient journey through accident and emergency departments. The journey map revealed that patients experienced the most distress not during treatment (they expected that to be unpleasant) but during transitions — moving from triage to waiting, from waiting to assessment, from assessment to treatment. At each transition, patients lost context: "Does the next person know why I'm here? Do I have to explain everything again?" The design response was information continuity — visible handoff protocols, patient-facing summaries, and status displays that showed where patients were in the process. The pain wasn't medical; it was informational.

Case study

Spotify: onboarding user flow

Spotify's onboarding flow demonstrates excellent user flow thinking. The happy path is minimal: sign up, pick 3 artists you like, start listening. But the flow branches intelligently based on context. Coming from a referral? Skip the value proposition. Already have an account? Redirect to login. Connected via Facebook? Import music taste data. Each branch reduces friction for that specific entry path. The task analysis behind this reveals careful attention to cognitive load — the "pick 3 artists" step uses recognition (seeing names and images) rather than recall (typing artists from memory), dramatically reducing the effort required.

Common pitfalls

!

Journey mapping without research

The most common mistake is building a journey map from assumptions rather than data. A team sits in a room and imagines what the user goes through. This produces an aspirational map that reflects how the team hopes the experience works, not how it actually works. Always base your maps on observed behavior — interviews, contextual inquiry, analytics, support tickets. If you don't have research, do the research first.

!

Mapping the org chart instead of the user experience

If your journey map stages match your department names (Marketing → Sales → Customer Success → Support), you've mapped your organization, not the user's experience. Users don't think in departments. They think in goals, moments, and frustrations. Reframe the stages from the user's perspective.

!

User flows that only show the happy path

If your user flow diagram has no diamonds (decision points) and no error states, it's incomplete. The happy path is the minority of actual user sessions. Real users have wrong passwords, empty carts, expired sessions, invalid addresses, and slow connections. Design for those paths or your users will design their own (by leaving).

!

Building a journey map and never updating it

A journey map from six months ago that doesn't reflect recent changes is worse than no map — it creates false confidence. Treat it as a living document. When you ship improvements, update the map. When new research reveals new problems, add them. Pin it to the wall and mark it up.

When to use which tool

Use journey maps when: You need to understand the full experience, identify the biggest pain points, align a team on user priorities, or communicate user needs to stakeholders. Best during discovery and strategy phases.

Use empathy maps when: You need to synthesize research about a specific user segment, build shared understanding of a persona, or prepare raw material for a journey map. Best during research synthesis.

Use user flows when: You're moving from strategy to design and need to specify what screens to build, how they connect, and what happens at each decision point. Best during definition and design phases.

Use task analysis when: You're designing complex interactions, optimizing an existing workflow, or need to identify cognitive load issues. Best during design and validation phases — especially for forms, onboarding, and professional tools.

Use all four when: Building or redesigning a major feature or product. Start with empathy maps (understand the user), build journey maps (see the full experience), design user flows (specify the interface), and run task analysis on the most complex interactions (optimize the details).

Connected topics

Deep Dive

Appendix

On this page