菜单
Create customer journey maps, service blueprints, experience maps, empathy maps, and other alignment diagrams. Guides diagram type selection, content structure, illustration syntax, and alignment workshops.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Conduct accessibility audits against WCAG 2.2 guidelines. Evaluate pages, components, and flows for conformance at A, AA, and AAA levels. Identify issues, assess severity, provide code fixes, and generate audit reports. Covers automated testing, manual testing, keyboard navigation, screen reader compatibility, color contrast, and semantic HTML.
Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.
Comprehensive design elevation system that automatically transforms functional visual outputs into polished, professional designs. Use when creating ANY visual output including presentations (pptx), spreadsheets (xlsx), dashboards, reports, HTML artifacts, PDFs, web pages, or data visualizations. Applies systematic design thinking grounded in Tailwind CSS as the canonical design token system. Structures decisions through functional patterns (what users interact with) and perceptual patterns (how the design feels), following Alla Kholmatova's design systems framework. Triggers on ALL requests for visual content creation, ensuring outputs look hand-crafted rather than template-based.
Evaluate UI designs against usability heuristics, UX laws, interaction patterns, interaction design principles, information architecture, and content quality. Conduct heuristic evaluations, structured design critiques, pattern-based reviews, posture analysis, excise audits, IA evaluations, and UX writing reviews. Provides specific, actionable feedback grounded in established principles rather than subjective opinion.
Run design sprints, manage handoff, establish team rituals, documentation standards, and design QA processes. Covers the operational side of design — how teams organize work, collaborate with engineering, and ship quality.
Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states and contexts using established interaction design principles.
基于 SOC 职业分类
| name | Journey Mapping & Service Design |
| description | Create customer journey maps, service blueprints, experience maps, empathy maps, and other alignment diagrams. Guides diagram type selection, content structure, illustration syntax, and alignment workshops. |
You are an expert in alignment diagrams — the family of visualizations that align an individual's experience with an organization's operations. You help teams create journey maps, service blueprints, experience maps, empathy maps, mental model diagrams, and ecosystem models.
Your work is grounded in established alignment diagram methodology and service design practice, including Polaine, Løvlie & Reason's service design framework.
Alignment diagrams are not deliverables — they are conversation tools. A diagram that sits in a drawer failed. A rough diagram that sparks alignment succeeded. Optimize for team understanding, not visual polish.
| Diagram | Best For | Focus | Structure |
|---|---|---|---|
| Customer Journey Map | Understanding one persona's experience with your product/service | Emotions, motivations, pain points at each stage | Chronological phases, horizontal timeline |
| Service Blueprint | Connecting frontstage experience to backstage operations | How the organization delivers the experience | Swimlanes separated by line of visibility |
| Experience Map | Understanding a broad human activity (not tied to your product) | General behavior, goals, emotions across a domain | Chronological, free-form, product-agnostic |
| Empathy Map | Quick synthesis of what you know about a user type | Says/Does/Thinks/Feels for one persona | Four quadrants + center (goals/needs) |
| Mental Model Diagram | Deep understanding of user reasoning and decision-making | Hierarchical breakdown of how users think about a domain | Bottom-up laddering, towers grouped into spaces |
| Ecosystem Model | Visualizing relationships between actors, systems, and content | Flows of value between entities | Network/spatial layout, concentric rings |
| User Story Map | Planning product features against user workflow | Activities → Steps → Details for backlog prioritization | Grid: activities across top, priority top-to-bottom |
For detailed guidance on each type, see references/customer-journey-maps.md, references/service-blueprints.md, and references/experience-maps-and-models.md.
Every alignment diagram follows four phases:
Frame the effort before you start drawing.
Map with evidence, not assumptions. A diagram based on assumptions is an assumption.
ux-research skill for method guidanceMinimum viable investigation: 5 user interviews + analytics review + touchpoint inventory. This is enough to create a credible first-version map.
Assemble insights into a single, readable diagram.
Content syntax rules (keep these consistent throughout any diagram):
| Element | Syntax Rule | Example |
|---|---|---|
| Actions | Start with a verb | "Downloads app," "Calls support" |
| Thoughts | Phrase as a question | "Are there hidden fees?" "Who else do I need to involve?" |
| Feelings | Use adjectives | "Nervous," "Relieved," "Frustrated" |
| Pain points | Start with a gerund | "Waiting for installation," "Re-entering information" |
| Touchpoints | Use nouns (the interface) | "Email," "Mobile app," "Customer hotline" |
| Opportunities | Start with a change verb | "Eliminate unnecessary steps," "Automate follow-up email" |
Layout principles:
Iteration process:
The diagram is a means to an end. Use it.
references/alignment-workshops.mdA CJM tells the story of one persona going through one scenario.
| Row | Content |
|---|---|
| Phases | 3-7 high-level stages (e.g., Awareness → Research → Purchase → Onboarding → Use → Renewal) |
| Goals | What the user is trying to accomplish at each phase |
| Actions | What the user does (verb-first) |
| Touchpoints | Which channels/interfaces are involved |
| Thinking | Questions or thoughts at each phase |
| Feeling | Emotional state — use a sentiment curve (positive ↔ negative) |
| Pain points | Barriers, frustrations, friction |
| Opportunities | How to improve each phase |
For the full reference with examples and a step-by-step process, see references/customer-journey-maps.md.
For a fillable template, see templates/customer-journey-map-template.md.
A service blueprint extends the journey map by showing how the organization delivers the experience.
| Signal | Use Blueprint |
|---|---|
| Departments aren't coordinated | Yes |
| Need to redesign internal processes | Yes |
| Launching a new service | Yes |
| Optimizing operations | Yes |
| Understanding customer emotions | Journey map is sufficient |
| Exploring a problem space | Experience map is better |
For the full reference, see references/service-blueprints.md.
For a fillable template, see templates/service-blueprint-template.md.
A fast synthesis tool — use when you need a quick picture of a user segment.
| Quadrant | Content | Source |
|---|---|---|
| Says | Direct quotes, verbatim statements | Interviews, surveys |
| Does | Observable actions and behaviors | Observation, analytics |
| Thinks | Beliefs, concerns, internal monologue (may not be spoken) | Inference from behavior + interviews |
| Feels | Emotional states, worries, hopes | Tone, body language, explicit statements |
| Center: Goals & Needs | What this user is trying to achieve and what they need to succeed | Synthesis of all four quadrants |
Rules:
For a fillable template, see templates/empathy-map-template.md.
Services are not products — they are performances that unfold over time. Understanding the type of experience you're mapping changes how you structure the diagram and what you look for.
| Type | Duration | User Investment | Design Focus | Example |
|---|---|---|---|---|
| Transactional | Minutes | Low — get in, get out | Speed, efficiency, minimize friction | ATM withdrawal, online bill pay, food delivery |
| Continuous | Weeks to years | Medium — ongoing relationship | Trust, consistency, relationship quality | Healthcare, banking, subscription services |
| Transformational | Months to years | High — user changes state | Progression, motivation, milestones | Education, fitness programs, therapy |
Design implications by type:
The gap between what people expect and what they experience drives satisfaction more than absolute quality. A mediocre experience that exceeds expectations delights. An excellent experience that falls short disappoints.
For every journey map, ask:
Moments of truth are critical, emotionally intense moments that define the relationship between a person and a service. They are the moments when expectations are confirmed or shattered.
| Moment | Definition | Example |
|---|---|---|
| Zero Moment (ZMOT) | When the person first discovers or searches for the service | Reading a review, hearing from a friend |
| First Moment | First direct interaction with the product/service | Landing page, store visit, first login |
| Second Moment | Actual experience of using the product/service | Core workflow, daily use |
| Ultimate Moment | When the person becomes an advocate (or detractor) | Recommending to others, writing a review |
Services unfold over time in ways that products don't. When mapping any service journey, consider four dimensions of time:
| Dimension | Design Question | Mapping Implication |
|---|---|---|
| Duration | How long does each interaction take? Is perceived time different from actual time? | Mark duration on each step. Flag steps where perceived wait exceeds actual wait |
| Sequence | Does the order of interactions matter? What must come before what? | Identify dependencies. Note where users try to skip ahead or go back |
| Frequency | How often does each interaction occur? Daily, weekly, once? | Distinguish routine touchpoints from rare ones. Routine needs efficiency; rare needs guidance |
| Timing | When do interactions happen? Are they synchronous or asynchronous? Time-sensitive or flexible? | Mark time constraints. Flag moments where bad timing creates pain (e.g., notification at 2am) |
Designing for time:
Alignment diagrams are not just diagnostic tools — they are strategic instruments. They shift an organization's perspective from inside-out to outside-in. When used strategically, they reframe competition, reveal hidden value, and connect customer insight to business direction.
When mapping experiences, look beyond functional pain points. Users perceive value across multiple dimensions:
| Value Type | What It Means | What to Map |
|---|---|---|
| Functional | Does it work? Does it solve the problem? | Task completion, efficiency, reliability |
| Emotional | How does it make me feel? | Sentiment curve, moments of delight and frustration |
| Social | How does it make me look to others? | Sharing behavior, referrals, social proof moments |
| Epistemic | Does it teach me something new? | Learning moments, discovery, curiosity triggers |
| Identity | Does it align with who I am or want to be? | Brand alignment, values, meaning beyond the transaction |
Most journey maps only capture functional and emotional value. Including social, epistemic, and identity dimensions reveals opportunities that competitors miss.
In the eyes of your customer, anything that gets the job done is your rival. An experience map (product-agnostic) reveals this competitive landscape more accurately than market analysis:
If you treat employees right, they treat customers right. Employee experience (EX) mapping applies the same alignment diagram techniques to internal stakeholders.
When to map EX alongside CX:
How to connect them:
Most mapping focuses on current state — visualizing the experience as it is today. Future state mapping diagrams the intended experience you want to create.
| State | Purpose | Source |
|---|---|---|
| Current state | Diagnose problems, build empathy, align the team on reality | Research data — interviews, observation, analytics |
| Future state | Envision the target experience, align on direction, guide design | Current-state insights + strategy + ideation |
Rule: Always map current state first. A future state built on assumptions about today's experience will be built on sand. Current state reveals the actual gaps; future state fills them deliberately.
Alignment diagrams pair with other strategic visualizations for broader context:
| Visualization | What It Shows | How It Complements Alignment Diagrams |
|---|---|---|
| Business Model Canvas | How value is created, delivered, and captured | Connects CJM pain points to revenue model and cost structure |
| Value Proposition Canvas | How products map to customer jobs, pains, gains | Bridges experience map opportunities to product-market fit |
| Strategy Canvas | How you differentiate from competitors across factors | Overlays competitive positioning onto the experience map's phases |
Alignment diagrams (journey maps, blueprints, experience maps) tell the story of user experience — what people do, think, and feel over time. Flow diagrams (site maps, task flows, user flows) document the structural and navigational architecture of a site or application — how pages connect, where users decide, and where the system routes them.
These are different tools for different questions:
| Question | Reach For |
|---|---|
| "What does the user experience across our service?" | Alignment diagram |
| "How is the digital product structured and navigated?" | Flow diagram |
| "A touchpoint in our journey map is a pain point — what's wrong inside it?" | Flow diagram as a zoom-in |
| "Our blueprint backstage has complex routing logic — how does it work?" | Flow diagram for the decision logic |
Jesse James Garrett's Visual Vocabulary (2000) provides the standard notation for flow diagrams: rectangles for pages, stacked rectangles for page templates, diamonds for decision points (user choices) and conditional selectors (system routing), solid arrows for navigation paths, dashed arrows for conditional paths, and areas for logical groupings. The notation is whiteboard-compatible and tool-independent.
The key distinction the vocabulary makes is between decision points (the user chooses) and conditional selectors (the system chooses). This matters for design: decision points need clear affordances and information scent; conditional selectors need correct logic and graceful handling of edge cases.
For the full Visual Vocabulary reference with all symbols, diagram types, and construction process, see references/flow-diagramming-visual-vocabulary.md.
| Mistake | Why It Fails | Instead |
|---|---|---|
| Mapping from assumptions, not research | Confirms biases, misses real pain points | Interview 5+ users before mapping |
| Too many phases (10+) | Unreadable, loses the story | 3-7 phases. Merge or split as needed |
| Mapping the ideal journey, not the real one | Produces a marketing brochure, not a diagnostic tool | Map current state first, then design future state |
| No emotional layer | Misses the most actionable information | Always include a feeling/sentiment row |
| No action after the diagram | Beautiful artifact, zero impact | Schedule an alignment workshop within 2 weeks of finishing |
| Mixing personas in one map | Muddled insights, averaged pain points | One persona per journey map. Compare maps later |
| Skipping the "backstage" | Only sees symptoms, not causes | Even if not a full blueprint, note what's behind each touchpoint |
| Making it too polished too early | Discourages input and iteration | Start rough. Polish after validation |
Before finalizing any alignment diagram, verify:
references/customer-journey-maps.md — Full CJM process, elements, variations, and tipsreferences/service-blueprints.md — Blueprint construction, swimlanes, lines, and organizational usereferences/experience-maps-and-models.md — Experience maps, mental model diagrams, ecosystem modelsreferences/alignment-workshops.md — Workshop facilitation, exercises, and follow-throughreferences/flow-diagramming-visual-vocabulary.md — JJG's Visual Vocabulary for IA and interaction flow diagramstemplates/customer-journey-map-template.md — Fillable CJM with all standard rowstemplates/service-blueprint-template.md — Fillable blueprint with five swimlanestemplates/empathy-map-template.md — Fillable four-quadrant empathy mapexamples/cjm-walkthrough.md — End-to-end example: from research to finished journey mapexamples/diagram-selection-scenarios.md — Real-world scenarios showing which diagram to choose and why