Journey Map

Ask the user:

• Who is the persona we're mapping for? (Paste the /persona-build output, or describe the customer type)
• What is the trigger event that starts this journey? (The moment the customer first engages with this experience)
• Where does the journey end? (The resolution point — what does the customer need to have achieved?)
• Is this journey linear or cyclical? A linear journey has a clear beginning and end (e.g., filing a claim, onboarding, making a complaint). A cyclical journey repeats — the end of one cycle feeds back into the beginning of the next (e.g., annual renewal, repeat purchase, ongoing maintenance, seasonal use). This distinction matters: in a cyclical journey, the emotional state at the end of cycle N is the entry state for cycle N+1, and post-resolution neglect is a compounding problem, not a one-time miss.
• What channels and touchpoints are involved? (Known ones — we'll fill in the full picture)
• What research, notes, or context is available? (Upload or paste interview quotes, complaint themes, journey observations, prior mapping work, any existing journey maps in any format)
• Is there anything about this journey that is already known to be particularly broken or painful?

Read all provided materials before proceeding.

If no persona is provided: Tell the user directly — "A journey map without a persona becomes a process diagram. To give each touchpoint emotional truth I need to know: who is this customer, what are they trying to achieve, what are they anxious about, and what channels do they use?" Ask these four questions explicitly. If they want to proceed with minimal context, continue — but flag that emotion scores and customer thoughts will be inferred rather than evidence-grounded.

Step 0.5: Persona and Scope Confirmation

Pause here before building any stages. A wrong assumption about persona or journey scope produces a completed map of the wrong journey — confirming scope now takes 30 seconds and saves the session.

After reading all provided materials, summarize what you understand and present it for confirmation before doing any mapping work:

Before I start mapping, I want to confirm I have the right customer and the right journey.

Persona I'm mapping for: [Name or description] — [one sentence capturing who they are, what they're trying to achieve, and their dominant emotional state entering this journey] Source: [/persona-build output / described verbally / inferred from research — flag which]

Journey scope:

• Trigger: [The specific moment that starts this journey]
• End point: [What the customer needs to have achieved for the journey to be complete]
• Type: [Linear / Cyclical — and why]

My understanding of what makes this journey distinctive for this customer: [1-2 sentences — not a restatement of the brief, but what you've inferred from the persona and context about what matters most to this specific person in this specific journey. This is where you show you've actually read the inputs.]

Before I build anything: is this the right customer and the right journey? If there's a different customer segment this should be mapped for, or the scope should start earlier or end later, now is the moment to adjust — before I've built 6 stages of the wrong map.

Wait for confirmation before proceeding. Adjust persona understanding and scope based on response.

Step 1: Load Channel Vocabulary

Use the Read tool to read touchpoint-taxonomy.md in the same folder. This gives you the full vocabulary of channel and touchpoint types to use when naming touchpoints.

If the file cannot be read: Use standard channel vocabulary: Digital Self-Service (web, app, portal), Assisted Digital (chat, email, social), Voice (inbound call, outbound call, IVR), In-Person (branch, store, field visit), Physical/Print (mail, document, signage), Third-Party (broker, agent, partner). Continue — do not block on this.

Step 2: Define Journey Stages

Start from the broadest possible lifecycle — not the transaction.

The instinct is to begin with the purchase funnel: Awareness → Consideration → Evaluation → Purchase. Resist it. The purchase funnel is a narrow slice of a much larger customer lifecycle — and the most valuable design, service, and product innovation opportunities almost always live outside it.

Before proposing any stages, ask two questions:

1. What is this customer actually trying to accomplish in the world? Not "buy a tool" — but "complete a renovation on time and build a reputation that wins the next job." Not "file a claim" — but "get my life back to normal after something went wrong." The journey should be built around that broader goal, not around the product interaction.

2. What is the full lifecycle of that goal? For a DEWALT Performance Pro, it might span: winning a project → planning the work → procuring tools → executing the job → troubleshooting mid-project → completing and handing over → winning referrals and starting again. The tool purchase sits inside "procuring tools." If the map starts there, it misses everything before and after — and that's where new engagement models, digital services, and product innovations live.

The lifecycle view is the brief. Propose 5-8 stages that cover the customer's full arc in context of the broader goal. The purchase, application, or interaction that prompted this mapping is likely one or two stages within a larger lifecycle — not the whole map.

For each stage, define:

1. Stage name — from the customer's perspective (what they're doing in their life or work), not the organization's process steps
2. Timeframe — how long does this stage typically last? (e.g., "Minutes," "Hours," "Days to Weeks," "Weeks to Months," "Continuous/Ongoing")
3. Business goal for this stage — what is the organization trying to achieve here? (e.g., "Become part of the project from day one," "Win the replacement before competitors enter consideration," "Convert project completion into referrals")

Good stage names: "Winning the job," "Getting the site ready," "Something's not working," "Handing it over and moving on," "Deciding whether to come back."

Not: "Awareness," "Consideration," "Purchase," "Post-Purchase."

Step 2.5: Mandatory Stage Confirmation — Do Not Proceed Without This

After proposing the stages, stop completely. Do not begin mapping touchpoints until the user explicitly confirms the stages are correct.

Present the proposed stages and ask two things:

Proposed lifecycle stages:

1. [Stage 1] — [what the customer is doing at this point in their broader life/work context] | Timeframe: [X] | Business goal: [Y]
2. [Stage 2] — [customer description] | Timeframe: [X] | Business goal: [Y] ...

Before I map anything: two questions.

First — does this capture the full lifecycle, or are we still inside the purchase funnel? Common gaps: What is the customer doing before they're in market at all? What happens during the actual project or work the product serves? What does the moment after completion look like — and who does the customer talk to? Each of those gaps is a potential engagement opportunity the brand is currently missing.

Second — are there stages where the business goal and what you know about the customer seem to be in tension? For example: "Business goal is to convert, but the customer is in the middle of a project and not thinking about buying anything." Those tensions are where the most important design and service innovation work lives.

Confirm or adjust before I build — stage structure is the skeleton of the map, and rebuilding it mid-way means rebuilding everything.

Do not proceed to Step 3 until the user confirms the stages. If operating without live interaction: state the proposed stages, flag any lifecycle gaps explicitly, and note what would change if a stage were added or expanded. Then proceed — but document the assumption.

Adjust based on the user's response before mapping any touchpoints.

Step 3: Build the Journey Map Analysis File

Write all journey map content to a structured markdown file as you work through each stage. Do not hold content in working memory — write to file immediately using the Write tool. This file is the source of truth for HTML generation in Step 7.

Session path: Before writing, check for .kstack-session.json in the project root. If it exists, read session_dir from it and use that as the output folder. If it does not exist, use outputs/ as the folder and create it with mkdir -p outputs if needed.

File: [session_dir]/journey-map-[persona-slug]-analysis.md

Create the file before starting Stage 1. When first creating the file, write the KStack header block below as the very first content, before the journey map title. Work through each stage sequentially, writing each section as you complete it. After writing the final Synthesis section, append the footer block. The HTML generation agent in Step 7 will skip the markdown header/footer blocks — the HTML has its own header and footer. The file must follow this exact structure:

KStack header block (write at the very top before all other content):

---
**KStack** · CX Transformation Intelligence · [[email protected]](mailto:[email protected])

> ⚠ This output was generated by AI and should be reviewed and verified before use in any decision-making.

---

Footer block (append after Synthesis section):

---
*This output was generated by AI and should be reviewed and verified before use in any decision-making.*

*Created with ❤️ by Kenan Ali · [[email protected]](mailto:[email protected])*

# Journey Map Analysis: [Persona Name] — [Journey Scenario]

**Persona:** [name] — [one-sentence description]
**Journey type:** [Cyclical / Linear]
**Trigger:** [trigger event]
**End point:** [resolution point]
**Stage count:** [N]

---

## Stage [N]: [Stage Name]
**Timeframe:** [X]
**Business goal:** [Y]
**Color index:** [0–7]

### Narrative
[2–3 sentences: what the customer is actually doing and experiencing. Honest, specific — not a process description.]

### Channels
- [Channel name]
- [Channel name — ABSENT]

### Feeling
Score: [1–5]
Label: [2–4 words]
Emoji: [😣 / 😟 / 😐 / 🙂 / 😊]

### User Need
"[Need statement — written as if the customer dictated it]"
- [Evidence bullet] ([source])
- [Evidence bullet] ([source])
- [Evidence bullet] ([source])

### Problems
- [Specific friction, failure point, absent touchpoint, or unmet need]
- [3–5 bullets total]

### HMW Opportunities
- [CONTENT] [HMW question]
- [DIGITAL EXPERIENCE] [HMW question]
- [NEW SERVICE] [HMW question]
- [3–5 bullets total, each labelled with its innovation vector]

---

After all stages, append a ## Synthesis section:

## Synthesis

### Emotional Arc
[2–3 sentences: entry state → key inflection point → exit state. For cyclical journeys, name what emotional state carries into the next cycle.]

### Moments of Truth
- [Stage name] · [Touchpoint] — [why this moment determines the relationship]
- [5–8 bullets]

Scoring discipline:

• Score 1: high distress, broken trust, system failure, feeling manipulated
• Score 2: friction, confusion, unmet expectations, waiting without update
• Score 3: neutral, transactional, neither positive nor negative
• Score 4: faster/easier than expected, feeling heard, genuine progress
• Score 5: proactive resolution, feeling genuinely valued
• Most journeys involving complaint, complexity, or trust repair will average 1.5–2.5. If your average is above 3, you are being too generous.

HMW quality check: If an HMW reads like a solution with a question mark, rewrite it as a genuine question about the outcome the customer needs, not the feature you've already decided to build.

Do not output stage content as chat text. The only text you output in chat are the confirmation prompts at Steps 0.5 and 2.5, and the final file-saved confirmation at the end of Step 7.

Step 7: Generate HTML Output File

Do not write the HTML yourself. Spawn a fresh Agent using the Agent tool. This gives HTML generation a clean context window with no accumulated reasoning overhead — the agent reads the analysis file you wrote in Step 3 and converts it directly to HTML.

Use the Agent tool with subagent_type: "general-purpose" and the following prompt (substitute the actual analysis file path):

Agent prompt template:

Read the journey map analysis file at: [session_dir]/journey-map-[persona-slug]-analysis.md

Then write a complete, self-contained HTML journey map to: [session_dir]/journey-map-[persona-slug].html

Rules:
- Read the analysis file first, in full, before writing any HTML
- All CSS inline in <style> — no external dependencies, no JavaScript
- Do not truncate — write every stage completely
- Do not ask for confirmation — write the file immediately
- After `<body>`, insert the KStack branded header bar, then the AI disclaimer banner. The analysis file begins with a KStack markdown header block — do not reproduce it in the HTML body; the HTML has its own header and footer defined here. Before `</body>`, insert the disclaimer/credit footer. See exact HTML below:

KStack header bar (place immediately after `<body>`):
```html
<div style="background:#1e1b4b; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; font-family:-apple-system,sans-serif;">
  <span style="color:white; font-weight:700; font-size:14px; letter-spacing:0.05em;">KStack</span>
  <span style="color:#a5b4fc; font-size:11px;">CX Transformation Intelligence &nbsp;·&nbsp; <a href="mailto:[email protected]" style="color:#a5b4fc; text-decoration:none;">[email protected]</a></span>
</div>

AI disclaimer banner (place immediately after KStack header bar):

<div style="background:#fef3c7; border-bottom:1px solid #f59e0b; padding:8px 24px; text-align:center; font-family:-apple-system,sans-serif; font-size:11px; color:#92400e;">
  ⚠ This output was generated by AI and should be reviewed and verified before use in any decision-making.
</div>

Footer (place immediately before </body>):

<footer style="margin-top:48px; padding:16px 24px; background:#f9fafb; border-top:1px solid #e5e7eb; text-align:center; font-family:-apple-system,sans-serif;">
  <p style="font-size:11px; color:#9ca3af; margin-bottom:4px;">This output was generated by AI and should be reviewed and verified before use in any decision-making.</p>
  <p style="font-size:11px; color:#d1d5db;">Created with ❤️ by Kenan Ali &nbsp;·&nbsp; <a href="mailto:[email protected]" style="color:#6366f1; text-decoration:none;">[email protected]</a></p>
</footer>

Stage colors by color index (0-indexed): 0 → #6366f1 · 1 → #0ea5e9 · 2 → #10b981 · 3 → #f59e0b · 4 → #ef4444 · 5 → #8b5cf6 · 6 → #06b6d4 · 7 → #84cc16

Emotion emoji: Score 1 → 😣 · Score 2 → 😟 · Score 3 → 😐 · Score 4 → 🙂 · Score 5 → 😊

HTML structure: CSS Grid with a 160px label column and repeat(N, 1fr) stage columns where N = number of stages. Eight rows in order: Stage header, Narrative, Channels, Feeling, User Need, Problems, HMW Opportunities, Synthesis (full-width footer spanning all columns).

Use this exact HTML/CSS template — populate it fully from the analysis file:

<!-- ROW: Stage -->
<div class="row-label">Stage</div>
<!-- one cell per stage: -->
<div class="cell" style="background:[stage-color]">
  <div class="stage-name">[Stage N] · [Stage Name]</div>
  <div class="stage-meta">[Timeframe] · [Business goal — brief]</div>
</div>

<!-- ROW: Narrative -->
<div class="row-label">Narrative</div>
<!-- one cell per stage: -->
<div class="cell">[Narrative text]</div>

<!-- ROW: Channels -->
<div class="row-label">Channels</div>
<!-- one cell per stage: -->
<div class="cell"><div class="pills">
  <span class="pill">[channel]</span>
</div></div>

<!-- ROW: Feeling -->
<div class="row-label">Feeling</div>
<!-- one cell per stage: -->
<div class="cell emotion">
  <span class="emoji">[emoji]</span>
  <div class="feeling">[Feeling label]</div>
</div>

<!-- ROW: User Need -->
<div class="row-label">User Need</div>
<!-- one cell per stage: -->
<div class="cell need-col">
  <div class="need-statement">"[Need statement]"</div>
  <ul class="need-evidence">
    <li>[Evidence] <span class="need-source">([source])</span></li>
  </ul>
</div>

<!-- ROW: Problems -->
<div class="row-label">Problems</div>
<!-- one cell per stage: -->
<div class="cell problems"><ul>
  <li>[Problem]</li>
</ul></div>

<!-- ROW: HMW Opportunities -->
<div class="row-label">HMW Opportunities</div>
<!-- one cell per stage: -->
<div class="cell hmw-col"><ul>
  <li><span class="hmw-vector">[vector]</span><br>[HMW question]</li>
</ul></div>

<!-- SYNTHESIS — full width -->
<div class="synthesis">
  <h2>Synthesis</h2>
  <div class="synthesis-grid">
    <div class="synthesis-section">
      <h3>Emotional Arc</h3>
      <p>[Emotional arc text]</p>
    </div>
    <div class="synthesis-section">
      <h3>Moments of Truth</h3>
      <ul>
        <li>[Stage] · [Touchpoint] — [why it matters] <span class="mot-tag">MOT</span></li>
      </ul>
    </div>
  </div>
</div>

After writing the file, confirm with the single line: "[session_dir]/journey-map-[persona-slug].html written successfully"

---

After the Agent completes, output only:
> "`[session_dir]/journey-map-[persona-slug].html` saved — open in your browser to view the map"