service-blueprint
Map service delivery across frontstage actions, backstage processes, and supporting systems. Use when staff and operations are part of the experience. For the customer-visible layer only, use `experience-map`.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill service-blueprintSKILL.md
Service Blueprint
You are an expert in service design and systems-level experience mapping.
What You Do
You create service blueprints that reveal how a service is delivered across all channels and actors — giving teams a shared view of the full system, not just the user-facing touchpoints.
What a Service Blueprint Shows
A blueprint maps five horizontal swim lanes:
- Physical evidence: what the user sees, touches, or receives at each step (screens, emails, receipts, packaging, spaces)
- User actions: what the user does — drawn from journey map research
- Frontstage actions: what employees or systems do that the user can see or experience directly (customer support replies, onboarding calls, chat responses)
- Backstage actions: what employees or systems do that the user cannot see (order processing, fraud checks, fulfillment)
- Support processes: the infrastructure that enables frontstage and backstage (databases, third-party services, internal tools, policies) Line of interaction: separates user actions from frontstage Line of visibility: separates frontstage (visible to user) from backstage (invisible) Line of internal interaction: separates backstage from support processes
When to Use a Service Blueprint
- Designing a new end-to-end service
- Diagnosing where a service is failing (look for gaps between swim lanes)
- Coordinating a multi-team product that spans multiple channels (web, app, email, phone, physical)
- Planning a major service redesign or migration
- Onboarding new team members to the full scope of a product
Blueprint vs Journey Map
| Journey Map | Service Blueprint | |
|---|---|---|
| Focus | User experience | Entire delivery system |
| Actors | User | User + employees + systems |
| Purpose | Understand emotional journey | Reveal operational gaps and dependencies |
| When | Research and ideation | System design and coordination |
| Use journey maps to understand the experience; use blueprints to design and fix the system delivering it. |
Process
- Define scope: choose a specific scenario (e.g. "first-time user completes onboarding") — don't try to blueprint the entire product at once
- Gather inputs: user journey research, stakeholder interviews, process documentation, analytics
- Draft user actions: adapt from journey map
- Map frontstage: for each user action, what does the system or team do visibly?
- Map backstage: what happens behind the scenes to enable each frontstage action?
- Map support: what infrastructure, tools, or third-party services support backstage actions?
- Add physical evidence: what artifacts does the user receive or interact with?
- Identify failure points: where do swim lanes disconnect? Where do delays, errors, or handoffs break down?
- Validate: review with operations, engineering, and support teams — they often spot missing backstage steps
Reading the Blueprint
- Gaps between lanes: where frontstage promises something backstage can't deliver
- High-density backstage clusters: complexity that may be ripe for automation or simplification
- Multiple support dependencies for a single frontstage action: fragility — single points of failure
- Long horizontal stretches without user touchpoints: the user is waiting; is this communicated?
Best Practices
- Blueprint existing state first, future state second — don't skip the as-is
- Co-create with operational teams, not just design — they know the backstage
- Keep scope narrow; a focused blueprint of one scenario is more useful than a sprawling map of everything
- Use the blueprint as a coordination artifact in cross-functional planning, not just as a research output
- Revisit blueprints when services change — they become misleading faster than journey maps
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
