Customer journey mapping

In one line: lay one person's goal out as a sequence of stages and record what they're doing, thinking, and feeling at each — the dips in that feeling line are exactly where your next improvement lives.

What it is

A customer journey map is one person's path toward a single goal, drawn as an ordered set of stages. For each stage you record three plain things: what they're doing (the observable action), what they're thinking (the question or worry in their head), and how they're feeling (a simple score, here from -2 to +2). Plot the feeling scores in order and you get an emotion curve — the shape of the experience over time.

It is not a flowchart of your system and not a sitemap. A flowchart shows the paths your software allows; a journey map shows the experience a real person actually has, including the parts that happen off-screen — waiting, doubting, asking a friend, giving up. The map is deliberately one goal for one kind of person, because an "everyone, everything" map tells you nothing specific enough to act on.

Why it matters

Teams optimize what they can see, and most of what they can see is the happy path. A journey map makes the unhappy parts visible and shared: the moment pairing fails, the silence while someone waits for a confirmation email, the second guess before a payment. Those dips are where people churn, complain, or call support — and they're invisible in a screen-by-screen design review.

The map's real output isn't the diagram; it's the list of opportunities it surfaces. Each negative stage is a question: what one change would lift this moment? Because the map is grounded in a sequence and an emotion, you can prioritize honestly — fix the deepest, earliest dip first, since a bad early moment poisons everything after it. The discipline is to base the curve on real observation, not on how you hope the experience feels; a map drawn from assumptions just launders your optimism into a chart.

See it

How it works

The map is three aligned tracks plus a derived curve:

1. Stages — break the goal into a handful of ordered moments (5–7 is plenty), named from the person's point of view ("Pair device", not "OAuth handshake"). Too few and you blur the friction together; too many and you're transcribing clicks.
2. Doing / thinking / feeling — for each stage, one line each. Doing is observable, thinking is the inner question (quote it), feeling is a number so it can be plotted and compared.
3. The emotion curve — connect the feeling scores in order. A neutral baseline (0) makes the dips and peaks legible at a glance. Mark the active stage so the curve and the detail panel always agree.
4. Opportunities — for each dip, write the single most promising intervention. This is the payoff: the map exists to generate this list.

In the demo, stepping through stages moves a marker along the curve and swaps the detail panel beneath it. Notice that the feeling is never carried by color alone — every stage is also labelled in words ("Frustrated", "Delighted"), so the meaning survives for anyone who can't distinguish the hues.

Build it

A journey map should be readable without any script — a real table that screen readers and search engines can parse, with the feeling rendered as both a word and a CSS-drawn bar. Here's a compact, accessible version you can paste and run.

<!-- One row per stage. The feeling is a number AND a word AND a bar,
     so it never depends on color alone. -->
<table class="journey">
  <caption>Setting up the Chirpwell bird feeder — emotion across six stages</caption>
  <thead>
    <tr>
      <th scope="col">Stage</th>
      <th scope="col">Doing</th>
      <th scope="col">Feeling</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Pair device</th>
      <td>Pairing fails twice on home Wi-Fi.</td>
      <td>
        <!-- --score is -2..2; the inline custom property drives the bar width -->
        <span class="feeling feeling--low" style="--score: -2">
          <span class="feeling__bar" aria-hidden="true"></span>
          <span class="feeling__text">Frustrated (-2)</span>
        </span>
      </td>
    </tr>
    <tr>
      <th scope="row">First bird</th>
      <td>Gets a push notification with a clip of a chickadee.</td>
      <td>
        <span class="feeling feeling--high" style="--score: 2">
          <span class="feeling__bar" aria-hidden="true"></span>
          <span class="feeling__text">Delighted (+2)</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

.journey {
  border-collapse: collapse;
  width: 100%;
  font: inherit;
}
.journey caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}
.journey th,
.journey td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #d6d9e0;
}
.journey thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5b606b;
}
 
.feeling {
  display: grid;
  gap: 0.35rem;
  min-width: 9rem;
}
/* Bar width maps a -2..2 score to 0..100%. The word stays the source of truth. */
.feeling__bar {
  height: 0.5rem;
  border-radius: 999px;
  /* (score + 2) / 4 -> 0..1 -> percentage */
  width: calc((var(--score) + 2) / 4 * 100%);
  background: #5b606b;
  transition: width 200ms ease;
}
.feeling--low .feeling__bar {
  background: #b4423a; /* dip */
}
.feeling--high .feeling__bar {
  background: #2f7d57; /* peak */
}
.feeling__text {
  font-size: 0.85rem;
  font-weight: 600;
}
 
/* The bar is decorative reinforcement; if motion is off, don't animate it. */
@media (prefers-reduced-motion: reduce) {
  .feeling__bar {
    transition: none;
  }
}

Make it yours

Reproduce it with an LLM

Pitfalls & accessibility

Related

Further reading

• Look up how service-design teams distinguish a journey map (one person's experience over time) from a service blueprint (the same journey plus the backstage staff and systems that support it).
• The idea of an "emotion curve" comes from experience design; search for writing on peak–end effects to see why the lowest and final moments deserve the most attention.