Customer journey map
Awareness through advocacy: touchpoints, emotions, and actions.
Product teams often have a story about how customers use their product—but that story lives in their heads, in scattered Slack threads, and in data warehouses. This template maps the complete customer lifecycle from the first ad impression through to word-of-mouth advocacy, showing every decision gate where users either advance or drop off.
The path from awareness to activation is where most teams discover blind spots: a smooth landing page followed by a confusing onboarding checklist, or a great free trial with a purchase flow that sends half of qualified leads to competitors. This diagram makes those paths visible, so product, design, and support can agree on what "success" looks like at each stage.
When to use this template
- Onboarding reviews — walk the team through what happens after purchase, including the support loop where users get stuck and need help.
- Churn analysis — annotate each decision diamond with real drop-off percentages to see which stage is the biggest leak.
- Cross-functional alignment — product, marketing, sales, and support often have different mental models of the customer journey. A shared diagram forces agreement.
How to adapt it
Start by renaming the stages to your business. Common extensions:
- Add emotional tone labels (happy face for activation, frustrated face for support) to highlight moments that matter most to the team.
- Insert channel-specific branches (e.g., acquired via organic search vs. paid ads) to see if paths diverge by how users arrived.
- Add time estimates on edges (e.g., "Awareness → Consideration: 3 days") so the team understands how fast (or slow) customers move through stages.
Visual edits regenerate clean code, so you can drag the decision gates around and add branches without touching Mermaid syntax.
Mermaid code
Copy it anywhere Mermaid is supported — GitHub, Notion, or your docs.
flowchart TD
A["Awareness<br/>See ads, social, reviews"] --> B["Consideration<br/>Research options"]
B --> C["Decision<br/>Compare pricing"]
C --> D{"Choose product?"}
D -->|No| E["Rejection<br/>Try competitor"]
D -->|Yes| F["Purchase<br/>Complete transaction"]
F --> G["Activation<br/>First-time setup"]
G --> H{"Success?"}
H -->|No| I["Support<br/>Contact help team"]
I --> H
H -->|Yes| J["Retention<br/>Regular use"]
J --> K["Advocacy<br/>Refer, review, promote"]
Frequently asked questions
- What is a customer journey map diagram?
- It traces the complete customer lifecycle from first awareness through loyal advocacy: the touchpoints where they encounter your brand, the emotions they experience (frustrated during onboarding, delighted at activation), and the decision gates where they drop off. It makes invisible churn moments visible.
- When should I use a journey map vs. a flowchart?
- A journey map is for end-to-end customer experience; a flowchart is for internal process steps. Journey maps often include emotional tone (happy, frustrated) and show multiple paths (purchase vs. rejection). Use this template to walk product and support teams through the full lifecycle.
- How do I identify where customers actually get stuck?
- Annotate each decision diamond with drop-off rates or conversion rates (e.g., 50% reject at consideration, 10% churn after first month). The widest gaps become your top optimization targets. Add metrics on the diagram itself so the team can see where to focus effort.
- Can I adapt this for B2B or enterprise sales?
- Yes. Rename awareness to "Lead generation", consideration to "Sales conversations", decision to "Procurement", activation to "Implementation", and retention to "Expansion". The stages shift but the decision-gate structure remains. Visual edits regenerate clean Mermaid code instantly.