14 · Narrative Workflow
Numbered stages tell the story of how the user uses the product over time. Each section is a phase (1.0 → 2.0 → 3.0 → 4.0). The page is a process timeline.
- Heading: large numbered stage labels (
1.0 INTAKE,2.0 PLAN). - Body: each stage has a short explanation and a small product visual.
- Divider: thick numbered rule between stages.
- Button: stage-internal links; one global "Start at stage 1 →" at the foot.
- Image: small product capture per stage, often annotated.
- Reveal: sweep horizontal as stages enter the viewport.
Reach for it for products with explicit workflows — project management, design-to-dev pipelines, writing tools.
Avoid for tools that work in one moment. Narrative Workflow needs a real sequence.
Reference: Linear's how-it-works pages, some Figma marketing pages.
Sample opening lines (imitate the specificity — Narrative Workflow openings are stage labels: numbered, declarative, in process language):
"01 · sourdough overnight · 02 · score at dawn · 03 · pull at seven." — three numbered stages, no marketing "1.0 · parse · 2.0 · filter · 3.0 · route." — Streampipe (test 02) — versioned numbers, three concrete verbs "I. We design products that last twelve years. II. A material is sustainable when someone, somewhere, can repair it." — Meridian — Roman numerals + declarative