Skip to content
framework
Research & strategy

Customer Journey Map

Every step a user takes, with their goals, feelings and pain points along the way.

⏱ 11 minBeginnerBy Service design practiceSince 1990s
pain point
Use it when

Seeing the whole experience, including steps outside your product.

You'll walk away with

A journey map with an emotion curve and prioritised opportunities.

Step 1 · The idea

See the whole experience, not just your screens

A customer journey map shows every step a person goes through to reach a goal — including steps outside your product — along with what they do, think and feel at each one.

It grew out of service design and customer-experience practice. Teams use it to find where people struggle, and to align design, product, operations and support around one shared picture.

Your app might be great, but if the journey breaks at the restaurant, the rider or the doorstep, the user remembers the whole thing as bad.
The model

Anatomy of a journey map

Read it left to right (stages), top to bottom (lanes).

1

Persona and goal

Who is on the journey, and what are they trying to achieve?
Example: Neha, 28, wants dinner delivered after a late shift.
2

Stages

The big phases of the journey, in the user's words.
Example: Feel hungry → Browse → Order & pay → Wait / track → Receive → Eat & rate.
3

Actions and touchpoints

What they do, and where they interact with you: app, SMS, call, doorstep.
Example: Refreshes live tracking; calls the rider.
4

Thoughts and emotions

What's going through their head, plus an emotion curve across stages.
Example: “Where is my food? Why no update?” — anxious.
5

Pain points

Where things go wrong or feel bad.
Example: The ETA jumps from 25 to 50 minutes with no reason.
6

Opportunities

Ideas to fix pains or strengthen good moments.
Example: An honest ETA and a proactive delay update.
Step 2 · Play with it

An interactive journey map

A food delivery journey. Select a stage to see its details, and drag its emotion slider to reshape the curve.

😊😐😟FeelhungryHome, phoneBrowserestaurantsApp home, searchChoosedishesRestaurant menuOrder andpayCheckout, UPI a…Rider picksupLive trackingWait andtrackLive trackingReceiveorderDoorstepEat andrateApp, rating pro…
Stage 7 of 8

Receive order

Doing · touchpoint

Opens the bag: food is cold, raita missing

Doorstep

Thinking

“I paid for this and it's cold?”

Pain point

Cold food, missing item

Opportunity

Easy refund for missing items in two taps

Step 3 · The process

How a team builds a journey map

A fictional team at “Thali”, a food delivery app, maps the dinner-order journey.

Scope
Neha, 28
Ordering dinner after a late shift
From “I'm hungry” to “Fed, and happy to order again”
Step 1

Pick a persona and scope

One persona, one goal, a clear start and end. Mapping “everything” helps nobody.
Scope
Sources
🎙 8 customer interviews
📞 Support chat logs
📊 App analytics: tracking page visits
Step 2

Research the real journey

The map must come from evidence. Support logs showed hundreds of “where is my order?” chats.
Research
Browse
Pay
Track
Receive
Step 3

Map stages and lanes

Stages across the top, lanes down the side. Sticky notes first — polish later.
Map
Lowest point: cold food, missing item
Step 4

Draw the emotion curve

The curve makes the worst moment obvious to everyone in the room — even people who never read research reports.
Emotion curve
Opportunities
Honest ETA
Proactive delay updates
2-tap refund for missing items
Step 5

Turn pains into opportunities

Prioritise the deepest dips first. Then design the future-state journey and test it.
Opportunities

Thali is a fictional app. Example made for teaching.

Watch out

Common mistakes

✓ Do

  • Base it on research, not internal opinions
  • Include steps outside your product
  • Keep one persona and one goal per map
  • Pair every pain point with an opportunity
  • Put it on the wall and revisit it

✗ Avoid

  • Mapping your funnel instead of the customer's experience
  • Only showing happy paths
  • Maps so detailed nobody reads them
  • Making it once and never updating it
  • Ignoring backstage causes of frontstage pain
Cheat sheet

Journey Map in one screen

PERSONA + GOAL + SCOPE (start → end)

LANES (top to bottom)
  stages · actions · touchpoints · thoughts · emotion curve · pain points · opportunities

PROCESS
1. Choose persona, goal and scope
2. Research: interviews, support logs, analytics
3. Map stages and lanes with sticky notes
4. Draw the emotion curve
5. Mark pains → write opportunities
6. Design the future-state journey and test it

TYPES  current-state · future-state · day-in-the-life · service blueprint
Use it at work

Figma template

A ready-made canvas for running this framework with your team. Free, editable, and it works in Figma and FigJam.

Preview of the Customer journey map template
Figma & FigJam · free

Customer journey map

  • Stages × lanes grid
  • Emotion curve
  • Pain points
  • Top opportunities
  1. 1Download the SVG, or copy it to your clipboard.
  2. 2In Figma or FigJam, drag the file onto the canvas — or paste with ⌘V / Ctrl V.
  3. 3Everything arrives as editable layers: type in the boxes, add stickies, duplicate rows.
Download SVGOpen in Figma ↗
Check yourself

Quick quiz

Get all three right to complete the lesson.

Question 1

1. Where do the best design opportunities usually sit on a journey map?

Question 2

2. What's the difference between a current-state and a future-state map?

Question 3

3. A service blueprint extends a journey map by adding…

Saved

Notes are private and stored in this browser.

Sources and further reading

Keep going

Related frameworks

Empathy Map9 min · BeginnerCOM-B11 min · IntermediateHEART Metrics11 min · Intermediate
Next lesson

Nielsen's 10 Heuristics

Ten rules of thumb to find usability problems in any interface, fast.

Start lesson →