Design Atlas
한국어
⟳ Design process

User journey map

사용자 여정 지도

A timeline of the stages a user passes through to reach a goal, with their emotional ups and downs plotted alongside.

Also known as: Customer journey map고객 여정 지도
···
html
<div class="stage">
  <div class="stages">
    <span>Awareness</span><span>Consider</span><span>Purchase</span><span>Onboard</span><span>Advocate</span>
  </div>
  <svg viewBox="0 0 500 140" preserveAspectRatio="none" class="chart">
    <line x1="0" y1="70" x2="500" y2="70" class="axis" />
    <path id="curve" d="" class="curve" />
    <circle id="dot" r="5" class="dot" />
  </svg>
  <div class="face" id="face">:)</div>
</div>
css
.stage{width:94%;height:88%;display:flex;flex-direction:column}
.stages{display:flex;justify-content:space-between;font:700 10px/1 monospace;color:var(--muted);padding:0 2%}
.chart{flex:1;width:100%}
.axis{stroke:var(--line);stroke-width:1}
.curve{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.dot{fill:var(--accent-2)}
.stage{position:relative}
.face{position:absolute;left:2%;bottom:2%;font:700 18px/1 monospace;color:var(--accent-2)}
js
const pts = [[10, 60], [130, 30], [250, 100], [370, 45], [490, 15]];
function toPath(points) {
  return points.map((p, i) => (i === 0 ? 'M' : 'L') + p[0] + ' ' + p[1]).join(' ');
}
const curve = document.getElementById('curve');
const dot = document.getElementById('dot');
const face = document.getElementById('face');
const faces = [':)', ':|', ':(', ':|', ':D'];
curve.setAttribute('d', toPath(pts));
let i = 0;
function step() {
  const p = pts[i % pts.length];
  dot.setAttribute('cx', p[0]);
  dot.setAttribute('cy', p[1]);
  face.textContent = faces[i % faces.length];
  i++;
}
step();
setInterval(step, 900);

A journey map lays the stages a person moves through toward a goal — awareness, consideration, purchase, onboarding, advocacy — along a horizontal timeline, then overlays a vertical emotion curve showing what they do and feel at each stage. Touchpoints, thoughts, feelings, and pain points sit underneath each stage so you can see exactly where the emotion line drops.

It's easy to confuse with a user flow, but the two serve different purposes. A user flow diagrams screen-to-screen navigation inside one product; a journey map covers the much wider experience — including moments outside the product entirely, like seeing an ad or getting a recommendation from a friend. The protagonist isn't a screen, it's a person's experience.

Wherever the emotion curve drops sharply is the highest-priority place to dig in. Finding that one dip and chasing its cause is the actual point of drawing the map.

When to use

Use it when you need the big picture of where drop-off or frustration happens across an entire experience, not screen by screen. If you only need navigation paths, a user-flow diagram is enough.