# Customer Journey > Personas, touchpoint mapping, phase models, onboarding, customer retention, and data-driven journey analysis for user-centered web design. - **Type:** Skill - **Install:** `agentstack add skill-flitzrrr-frontend-design-skills-customer-journey` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [flitzrrr](https://agentstack.voostack.com/s/flitzrrr) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/customer-journey ## Install ```sh agentstack add skill-flitzrrr-frontend-design-skills-customer-journey ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Customer Journey > Every design decision begins with the user's needs, motivations, and questions — not with the company's internal organizational structure. ## Scope Use this skill when you: - Create or validate personas for a web project - Visualize a customer journey map - Identify and prioritize touchpoints - Design onboarding sequences - Assign content to a journey phase - Plan post-purchase customer retention measures ## Principles ### 1. Customer Perspective Before Company Perspective Every design decision begins with the user, not with the internal structure. ### 2. Touchpoints Are Experience Moments Every point of contact generates emotions and influences the purchase decision. No touchpoint should be left to chance. ### 3. The Journey Is Not Linear Users jump between phases, skip steps, and return. Designs must account for this non-linearity. ### 4. Data Before Assumptions Personas and journey maps are based on research (analytics, interviews, surveys) — not on gut feeling. ### 5. The Journey Does Not End at Purchase Customer retention, referral, and win-back are integral components. ### 6. One Goal per Touchpoint Each point of contact pursues exactly one primary call to action. ## Rules ### DO: Create Data-Driven Personas - COMBINE web analytics, CRM data, support inquiries, and user interviews. - DEFINE per persona: demographic key data, goals, pain points, preferred channels, decision criteria. - VALIDATE personas regularly against real user data and update at least annually. ### DO: Explicitly Map the 5+1 Phases 1. **Awareness** — The user recognizes a need or problem. 2. **Interest** — They actively search for information and solutions. 3. **Evaluation** — They compare options, read reviews, consult their network. 4. **Purchase Decision** — They select an offer and complete the transaction. 5. **Customer Experience** — They use the product and form an opinion. 6. **Retention** — The company builds a long-term relationship. ### DO: Categorize Touchpoints Using EPOMS - **Earned:** Reviews, referrals, press coverage. - **Paid:** Ads, sponsored posts, banner advertising. - **Owned:** Website, blog, newsletter, physical store. - **Managed:** Social media channels, app store presence. - **Shared:** Forum posts, shared social media content. ### DO: Use Emotional Journey Mapping - CAPTURE the user's emotional state at each touchpoint. - FLAG critical points where negative emotions lead to abandonment. - DEFINE measures to transform negative emotions into positive ones. ### DO: Fully Leverage Internal Data Sources - Web analytics (user flow, bounce rates, conversion paths) - Social media monitoring (sentiment, questions, complaints) - Email marketing analytics (open rates, click-through rates) - Support inquiries and complaints - Sales statistics - Feedback from marketing, sales, and service teams ### DON'T: Invent Personas Based on Assumptions - NEVER create personas without a data foundation. Fictional personas lead to design decisions that miss reality. ### DON'T: View Touchpoints in Isolation - A touchpoint is always part of the overall journey. Never optimize a contact point without examining the impact on upstream and downstream points. ### DON'T: Treat B2B and B2C as Identical - B2B journeys have longer decision cycles, more decision-makers, and more heavily rational criteria. Use separate journey maps. ### DON'T: Create the Journey Only Once - Validate the map at least semi-annually against current analytics data and customer feedback. ## Patterns ### Customer Journey Map (Visualization) At project kickoff and before every relaunch. Horizontal axis = phases, vertical axis = touchpoints, emotions, channels, pain points, opportunities. Result: Visual artifact for shared understanding. See `references/journey-map-template.md` for details. ### Onboarding Sequence After purchase decision or registration: 1. Welcome message with a clear next step, 2. Step-by-step introduction (max. 3 steps), 3. First success within 60 seconds, 4. Follow-up after 24 hours and 7 days. ### Micro-Conversion Chain When the primary conversion is too far from first contact: Define 3–5 intermediate goals (newsletter, whitepaper, webinar) that progressively guide the user closer to the primary conversion. ### Re-Engagement Loop For inactive existing customers: Trigger-based communication (e.g., 30 days of inactivity), personalized offer, easy re-entry, feedback request. ### Persona Validation Loop When personas are based on assumptions or are older than 6 months: 1. Translate hypotheses into an interview guide, 2. Conduct 5–8 interviews, 3. Cross-reference with analytics, 4. Update or discard the persona. ### Touchpoint Audit Before a relaunch or when conversions are declining: 1. Capture all touchpoints in a matrix, 2. Walk through and evaluate from the user's perspective, 3. Identify gaps, 4. Prioritize the top 3 optimizations. ## Anti-Patterns ### The Company Org-Chart Website The website structure mirrors the departmental structure instead of the customer journey. Users must understand the company's internal logic. **Solution:** Structure along user needs and journey phases. ### Touchpoint Overkill Too many contact points at once, without priorities. Inconsistent brand experience. **Solution:** Better to have 5 excellent than 20 mediocre touchpoints. ### The Forgotten Post-Purchase Phase All energy flows into acquisition; the customer experience after purchase is neglected. **Solution:** Allocate at least 30% of journey design effort to phases 5 and 6. ### Copy-Paste Personas Generic personas from templates without project-specific data. **Solution:** Every persona needs at least 3 project-specific data points. ## Checklist - [ ] At least 2 data-driven personas defined - [ ] All 5+1 journey phases documented - [ ] Touchpoints categorized using EPOMS - [ ] Emotional states captured per phase - [ ] Pain points and opportunities identified per touchpoint - [ ] Clear call to action defined per touchpoint - [ ] Onboarding sequence designed for new customers - [ ] Customer retention measures planned for post-purchase phase - [ ] Journey map created as a visual artifact - [ ] KPIs defined per phase - [ ] Journey validated against real analytics data ## Cross-References - `design-process` — The customer journey informs the briefing and concept phase - `landing-pages` — Landing pages are central touchpoints in the journey - `website-audit` — Journey analysis is a core component of every relaunch audit - `ux-design` — UX design as the framework for user-centered journey design - `ai-design-workflow` — AI can accelerate persona development and touchpoint analysis ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** [flitzrrr/frontend-design-skills](https://github.com/flitzrrr/frontend-design-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-flitzrrr-frontend-design-skills-customer-journey - Seller: https://agentstack.voostack.com/s/flitzrrr - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.