journey — Lattice component

journey

ProgressionTimelineStructure

Native user-journey chart — sections of tasks, each tagged with actor(s) and a 1-5 mood. Renders as section bars, task chips, plumb lines, and mood faces.

Open in Playground
Variant

Use when a process or experience needs charting as a horizontal sequence of moments, each scored for affect. Five variants reshape the same source list: default (Mermaid-style classic), heatmap (mood-tinted chips), curve (mood polyline with axis), swimlane (per-actor rows), weighted (chip widths proportional to volume=).

processassessmentwalkthrough

When to use

  • Affect is part of the story. When a process matters not just for its steps but for how each step feels. The 1-5 mood score makes the emotional contour part of the chart instead of buried in narration.
  • The poles are a DEFAULT, not an assertion. Pain and Delight are right for a customer journey and wrong for an ops, cost or risk one — a scale's polarity is not something the engine can derive. Write a label set outside the list — [{1, Friction}, {5, Flow}] — and the poles are renamed, on the slide and in the key's accessible name. Only the two poles take words; the steps between carry their number.
  • Actors share the trail. Use when multiple actors hand off through the sequence — customer, sales, onboarding, support. A second {who=…} record on a task makes the handoff visible on every task chip.
  • One source, five lenses. Author the journey once and re-render under any variant. Heatmap for fastest scan, curve for trend, swimlane for actor load, weighted for traffic-mix — same data, different argument.

When not to use

  • Process without affect. If the mood scores are all the same or arbitrary, the chart is doing less work than timeline or list-steps. Reserve journey for sequences where the affect changes meaningfully.
  • More than ten tasks. Past ten tasks the chips compress and the labels become unreadable. Group into fewer sections, or split the journey at a natural break.
  • Volume tokens without weighted. The volume= value is meaningful only under the weighted variant. On the other four it is parsed but invisible — strip it from the markdown or commit to weighted.

Common mistakes

  • Keying a middle step in a label set, e.g. [{3, Neutral}]. Only the two POLES are keyable — 1 and 5. The steps between show their number, which IS the scale; a word on step 3 would compete with the number beside it. lint:deck says so, quoting the manifest's own reason.
  • Treating the mood scale as if 1 were best instead of worst. The mood scale runs 1 (worst) to 5 (best) — authoring it inverted flips heatmap tinting and the curve variant's trend direction.
  • Assuming an omitted mood= leaves the task unplotted. Omitting mood= silently defaults the task to a neutral mood of 3 — it still plots normally under every variant, just without a deliberate score. Always give an explicit mood= so the chart reflects real affect instead of a silent default.

Authoring

<!-- _class: journey -->

## Walking through my Tuesday morning.

- Wake up
  - Hit snooze `{who=me, mood=2}`
  - Make coffee `{who=me, mood=4}`
- Commute
  - Subway `{who=me, mood=1}`
  - Walk `{who=me, mood=5}`
- Work
  - Standup `{who=team, mood=3}`
  - Deep work `{who=me, mood=5}`

Slots

SlotSelectorRequiredDescription
keyp > code:only-childnoOPTIONAL label set renaming the mood scale's two POLES: [{1, Friction}, {5, Flow}], one inline-code span alone in its paragraph, outside the journey list. Only 1 and 5 are keyable — the steps between them show their number, which is the scale itself. The defaults Pain and Delight are declared in this manifest's labelSet; naming one pole leaves the other on its default. The rename reaches the key's accessible name too, so a screen reader and the slide cannot disagree.
headingh1, h2yesSlide heading naming the journey or process.
sectionsul > liyesTop-level li per section. Lead with the section name; nested ul carries tasks. Each task carries one step record, {who=actor, mood=N, volume=N}: who the actor (a second actor is a second record, {who=sales}), mood 1-5, optional volume (used by .weighted).

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│          User journey heading           │
│                                         │
│        [Awar] → [Sign] → [Use ]         │
│                                         │
│         :)        :|        :)          │
│          (satisfaction track)           │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier) — The classic Mermaid-style read — the plainest, most familiar rendering of the sequence.
  • heatmap — The fastest scan matters more than a precise trend — mood-tinted chips let the audience read the emotional contour at a glance.
  • curve — The trend across the journey is the point — a mood polyline with an axis makes the trajectory, not just each moment, legible.
  • swimlane — Actor load and handoff is the story — splits the journey into one row per actor.
  • weighted — Traffic volume through each step matters as much as mood — chip width encodes the volume= value.

Variants

heatmap — heatmap

Stages shade by score.

<!-- _class: journey heatmap -->

## heatmap shades the stages by score.

- Evaluate
  - Read case study `{who=prospect, mood=5}`
  - Book demo `{who=prospect, mood=4}`
- Trial
  - Trial signup `{who=prospect, mood=3}`
  - Workspace setup `{who=user, mood=1}`
- Activate
  - First report `{who=user, mood=3}`
  - Daily use `{who=user, mood=5}`

curve — curve

A sentiment line rides the stages.

<!-- _class: journey curve -->

## curve draws the sentiment line.

- Evaluate
  - Read case study `{who=prospect, mood=5}`
  - Book demo `{who=prospect, mood=4}`
- Trial
  - Trial signup `{who=prospect, mood=3}`
  - Workspace setup `{who=user, mood=1}`
- Activate
  - First report `{who=user, mood=3}`
  - Daily use `{who=user, mood=5}`

swimlane — swimlane

One lane per actor.

<!-- _class: journey swimlane -->

## swimlane splits the journey by actor.

- Evaluate
  - Read case study `{who=prospect, mood=5}`
  - Live demo `{who=prospect, mood=4}` `{who=sales}`
- Trial
  - Trial signup `{who=prospect, mood=3}`
  - Workspace setup `{who=user, mood=1}` `{who=onboarding}`
- Activate
  - First report `{who=user, mood=3}`
  - Daily use `{who=user, mood=5}`

weighted — weighted

Stage size carries weight.

<!-- _class: journey weighted -->

## weighted sizes the stages by importance.

- Discover
  - Search `{who=prospect, mood=4, volume=45}`
  - Referral `{who=prospect, mood=5, volume=18}`
- Convert
  - Pricing page `{who=prospect, mood=3, volume=12}`
  - Checkout `{who=prospect, mood=2, volume=10}`
- Support
  - Settings `{who=user, mood=3, volume=8}`
  - Help docs `{who=user, mood=4, volume=7}`

Related

  • list-stepsprocess needs descriptive body per step, no chart
  • ganttschedule of overlapping tasks across lanes
  • kanbancurrent status by stage rather than sequence over time