Amazon Customer Service · UX Studio
Land on the artifact cold and walk away with the argument. Two reading rhythms: scroll for the grid, press s for slides.
Every claim cross-links to its source in the sidecar. Audits and follow-ups land cleanly months later.
One HTML file, any device, including assistive tech. Send the link, embed it, attach it. The artifact carries itself.
What you're building
The kit makes both. Service blueprint by default; journey map when the customer experience matters more than the system mechanics. Pick which one fits your story before you author anything else.
Three layers (customer, frontstage, backstage) divided by interaction and visibility lines. Built for finding gaps between what the system does and what the customer experiences.
Pick this when your story is about how the system shapes the experience: handoffs, gaps, who does what behind the scenes. Audience: leadership, partner teams, anyone who can change how it works.
Sarah Gibbons, "Service Blueprints: Definition," Nielsen Norman Group, 2017.
One customer's experience over time in a single layer, with the emotional or effort arc as the hero. Built for empathy with the lived sequence, not for diagnosing system handoffs.
Pick this when your story is about how the customer feels going through this. The arc matters more than what's broken behind the scenes. Audience: anyone reading the experience without needing to act on the backstage.
Kate Kaplan, "When and How to Create Customer Journey Maps," Nielsen Norman Group, 2016.
Most of what we make in the studio is a service blueprint. The kit's compressed shape (3 Parts, customer-only) covers the journey-map case when that's the right fit.
For the builder
Show up with what you know: evidence, decisions, the answers you already have. The kit handles the rest. The narrative shape, the row composition, the visuals. You spend your time on whether the story is true, not whether it looks right.
Designers, researchers, writers, ops program managers. Anyone telling a journey story for stakeholders. You don't need to know HTML or CSS.
You bring
The kit shapes
The narrative the kit gives you
"Why are we here?"
"How big is this?"
Earns attention + credibility
"How big is this?"
Earns credibility
"What actually happens?"
Earns understanding
"What's broken?"
Earns conviction
"What's the strategic read?"
Earns the case for action
"What's broken?"
"So what now?"
Earns conviction + action Earns action
Bring what's true. Answer what's asked. The kit shapes the rest.
For the reader
Send the link. The reader scrolls, scans, hovers, and walks away with what they need. No setup call, no walkthrough, no preamble.
One HTML file, any browser, including assistive tech. Send the link, embed it in a wiki, attach it to a doc. The artifact carries itself.
Click any number or quote, land on its source in the sidecar. Click any source, find what it backs. Audits, follow-ups, and the inevitable "wait, where did that come from" all land cleanly.
Press s for slides. Each stage becomes a single editorial slide for stage-by-stage walking. Press m for map-only, the journey grid alone for analytical scanning.
Your reader gets the artifact, not the build behind it. That's the whole point.
Without the kit
You could build this yourself. Most of us have. Three paths, three things they each leave behind.
You'll get a competent grid in an afternoon. What AI doesn't know to ship is the thinking. The section-job questions, the severity vocabulary, the sources sidecar, the keyboard contract. Builders have to know to ask for those, and most don't.
The kit
Ships the thinking baked in. Same fast build, different result. One that holds up in a leadership review.
Boards live behind a login. Readers without an account can't open them. Readers with one see the messy backstage. They don't print, don't read on a phone, don't survive offline.
The kit
Ships one HTML file. Email it, embed it in a wiki, hand it to anyone. It reads on phone, tablet, laptop, projector, and paper.
You inherit the look but not the reasoning. The artifact reads polished and falls apart when leadership asks why a severity is critical or where a number came from.
The kit
Every component carries its when-to-use rule. The severity vocabulary, the sources sidecar, the section structure. Thinking ships with the chrome.
For the full inventory of what ships, see capabilities.md.
Your build
Setup, then five waypoints from brief to shared. Three ways in. Pick the one that fits.
Kiro does the build. This page is your tracker. After Setup, each path below points you to the right Kiro session, and you mark waypoints done as Kiro reaches them. Kiro won't bring you back to this page automatically. Come back yourself if you want to track progress here.
Greenfield
A new project: a problem to solve, an audience, and early evidence (a debrief, a study, scattered data points). Step 1 confirms you're ready and walks you through what's needed.
Do Setup below, then start at Brief and walk all five waypoints.
Bringing existing work?
Do Setup, then in your existing Kiro session paste:
I want to bring this project into the kit. Read 00-handoff.md and run the handoff steps end to end. Don't ask me to confirm each substep. Produce the handoff folder and tell me where it landed and what to do next.~30 min. The kit ports your project into a kit-conformant draft. Pick up at Content above.
Do Setup, then read 00-bring-this-to-kiro.md and follow its prep steps to gather your files (~15 min). When ready, start a new Kiro chat in the kit workspace and paste:
I'm bringing files-only project into the kit. Read 00-bring-this-to-kiro.md and the gathered project files, then run an adapted setup interview that takes the artifact as the starting state.A new Kiro session reads your files and produces your draft. Pick up at Content above. If you don't have a clear strategic question for this artifact yet, run Step 1's setup with Kiro first.
5 min
Download the kit, unzip it, open the unzipped folder in a Kiro workspace.
Your project will live inside this folder at projects/[project-name]/. Kiro creates that folder for you in Step 1.
Done when the unzipped folder is open as your Kiro workspace and you can see the kit guides (01-readiness-check.md, 02-setup-interview.md), the foundation docs (narrative-structure.md, artifact-identity.md), and a starter/ folder inside it.
30-75 min
A scoped conversation: a 13-question readiness check, then the setup interview. By the end you have a brief and a session-1 prompt.
Kiro does
You bring
Paste this · into a new Kiro chat in the kit workspace.
Read 01-readiness-check.md and 02-setup-interview.md, then run them in sequence with me for [project name]. Start with the readiness check; on a passing verdict, ask if I want to continue, then transition into the setup interview. On a failing verdict, stop and tell me what to do first. On a folded verdict, document my assumptions and ask if I want to proceed anyway.If you stopped after the readiness gate (failed or folded and went to do upstream work) or paused mid-setup:
Paste this · into a new Kiro chat in the kit workspace.
Read 02-setup-interview.md and run the setup interview with me for [project name]. I've already passed (or folded) the readiness check.Coach aid the Blueprint Kit Coach can sit alongside Kiro for the readiness check or setup interview if you want a thinking partner. Especially useful from a cold start when the brief or session-1 prompt isn't clear yet.
Done when Kiro returns a passing or folded verdict and you've completed the setup interview portion. Your project folder has a brief.md and a kiro-session-1-prompt.md.
1-2 hrs
Kiro copies starter/template.html into your project as index.html, then fills placeholders to match your structure. It does not generate HTML from scratch.
Kiro does
starter/template.html into projects/[project-name]/index.html as a literal file copy, not generated markupYou do
Paste this · the contents of projects/[project-name]/kiro-session-1-prompt.md into a new Kiro chat in the kit workspace.
If your Kiro chat closed or crashed, re-paste the same kiro-session-1-prompt.md contents into a new Kiro chat. Add a note at the top: "Continuing from previous session. The structural draft was at [where you left off]." Kiro reads the latest snapshot in your project folder and picks up.
Coach aid the Blueprint Kit Coach is good for a second opinion if Kiro pushes back on a structural decision and you want another voice. Or vice versa: if Kiro lands a decision that feels off and you want help naming why.
Done when index.html exists in your project folder as a copy of template.html (open it in a browser and confirm it renders styled, not as plain text), the structure feels right, and the placeholders are obvious enough to fill in.
4-8 hrs
A back and forth pass. Kiro drafts each component, you correct, Kiro revises. One section at a time.
Kiro does
You do
This step takes the longest. You can stop after any component lands.
Paste this · into a new Kiro chat in the kit workspace.
Continuing the [project name] build. Read projects/[project name]/decisions.md and the latest draft snapshot, then pick up the content fill where it left off. The next placeholder to address is [name the section or leave blank for Kiro to find it].Done when no bracketed placeholders remain and every cited number has an entry in the sources sidecar.
2-4 hrs
Kiro reads the pattern catalog with you and proposes choices that fit the narrative. You hand over the screenshots and call the audience.
Kiro does
patterns.html and proposes a Part 1 opener, Part 4 shape, and journey closers) renders correctly across stages. Narrative as hero, screenshots as visual, recommendations as closer.You do
Done when every visual pattern in the artifact earns its place, the screenshots row tells your customer's story, and slide mode walks cleanly from stage 1 through stage N.
30-60 min
Kiro walks the artifact against the accessibility and visual-language rules, reports failures, and applies the fixes you sign off on. You decide what ships.
Kiro does
accessibility-checklist.md and visual-language.md against your draftYou do
Then close the loop. Open kit-feedback.md in your project folder, skim what you and Kiro captured during the build, add anything missing, and send it to the kit maintainer. The kit gets better because builders close the loop, not because they fix the kit.
Builder-owned failures: tell Kiro which to fix and how, let Kiro apply, re-test. Kit-conformance failures: confirm Kiro logs them to kit-feedback.md in your project folder, then ship the artifact with the gap recorded in your project's decisions.md.
Coach aid the Blueprint Kit Coach can run a pre-share critique pass before you ship. Useful when you want a second voice on the conformance checklist or on whether the artifact lands the decision its brief promised.
Done when every check passes (or is logged as a known kit-conformance gap), the artifact survives keyboard-only navigation, you've shared the link, and you've sent kit-feedback.md back to the kit maintainer.
You've shipped.
Checklist progress saves to this browser only.
References
What the kit ships, what builders have made with it, and the thinking behind both.
From the kit
The empty 5-Part shell you copy into your project. Nine-stage L3 service blueprint with every row vocabulary the kit ships, including Jobs to be done, Key moments, and the sticky orientation tier. Press s to walk slide mode end-to-end. Open it in step 4 of your build.
The kit's built-in worked example. Five-stage L4 use-case flow with real authored content across every row. Jobs ("Recover when self-service doesn't have my answer"), Key moments with severity, customer thoughts as pull-quotes. Open this in slide mode (press s) to see end-to-end "good" without leaving the kit.
Not an artifact. A catalog of the kit's options at every section. Open this in Step 5 of your build when you're picking a Part 1 opener, a Part 4 shape, or a multi-journey container.
Built with the kit
Two parallel customer journeys for shipping issues and device troubleshooting. Hero stat opener, multi-journey selector, pattern cards as the systemic read. The studio's first delivered kit-conformant artifact.
Human-in-the-loop bot-to-CSA handoff flow. Bet-coupled pillars, full row vocabulary including emotion arc and anxiety, hold-and-crack stress cards, design implications closer. The fullest expression of the expanded shape.
DNR end-to-end flow. Diagnosis bridge variant: architectural diagnosis statement, cost table, investment imperative grid. The first 6-Part artifact built with the kit's bridged shape.
Incident and emergency response flow. End-to-end lifecycle from detection to resolution. Repeat-visit reference artifact built for the PM and engineering audience.
End-to-end customer experience across the CS support ecosystem. The kit's first pure journey map artifact, optimized for the emotion and effort arc over system mechanics.
What Kiro reads
The thinking behind the build, plus the docs Kiro reads as it walks you through it. Open these yourself if you're auditing the kit, extending it, or want to understand why a particular rule exists. For the kit's spec at a glance, see README.md.
The thinking
The build flow
And one more thing. kit-feedback.md is a template, not a doc to read. Copy it into your project, drop findings as you build, and the kit grows from real use.
Accessibility
Artifacts built from the kit target WCAG 2.1 Level AA. The discipline ships with the kit. Builders verify it before sharing.
Every interactive surface is reachable, operable, and dismissible by keyboard alone, with visible focus rings in all three themes.
Slide mode adds s, m, arrows, number keys, and Esc. Lightbox traps focus and returns it on close.
Every animation reads prefers-reduced-motion and collapses to instant when the OS-level preference is set.
Reduced-motion readers still see state changes. They don't see vestibular triggers. Global reset, with per-component refinements where the default needs tuning.
Hold / flex / break severity is dual-encoded with color, glyph, and label together. Pain, moments, emotion, gate, recommendations all follow the rule.
A new component with a color-only state encoding doesn't ship until it picks up a glyph and a label. Documented as the three-state vocabulary.
Light, warm, and dark ship with token-driven color pairs that meet contrast minimums for body, links, focus rings, and severity badges.
Theme switch shifts the register; it doesn't break readability. New themes clear the same bar before shipping.
Landmarks, named headings, ARIA modal + focus trap on slide mode, live regions for slide changes, tablists for journey selection, decorative SVGs hidden from AT.
Assistive-technology readers get the same shape sighted readers get. The accessibility checklist walks the contract per-component before sharing.
What's still open: slide-mode layout below 720px isn't AT-tuned for small viewports yet (mobile falls back to grid mode) · formal third-party AT certification is out of scope · RTL and multi-language need a fork. Tracked in known-fragilities.md.
Boundaries
Naming the boundaries keeps the kit durable. It also tells you where the kit ends and other tools begin.
Artifacts are static HTML. Binding to a CSV or database makes the kit a tool team's problem.
The numbers live in the artifact. Update the data sources sidecar by hand when they shift.
The kit is the final artifact, not a stepping stone to another tool.
The HTML version stays the source of truth. If your team needs it in Figma, screenshot or recreate it there.
The kit is read-only on purpose, so the artifact reads as a finished narrative and not a working draft.
Discussion happens where your team already talks. The artifact is one of the things you're discussing in that conversation.
The kit produces service blueprints and journey maps. Experience maps, ecosystem maps, and stakeholder maps want different shapes.
For other map types, look at the wider ecosystem-mapping program docs or borrow components into a project-specific build.
The ingress fan-in, anxiety arc, and project-specific review components are scoped to the artifacts they were built for, not the kit.
The starter stays generic so it scales. Copy what you need from the canonical artifacts (CS Help, HITL) into your own project.
