| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="Roboto, -apple-system, BlinkMacSystemFont, sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Customer Journey Map Template |
| 6 | Purpose: UX and Marketing visualization of the user lifecycle |
| 7 | Use cases: Product design, customer experience (CX) analysis, marketing funnel mapping |
| 8 | Design Principles: Matrix layout mapping phases against actions, emotions, and pain points |
| 9 | --> |
| 10 | <defs> |
| 11 | <!-- Emotional Curve gradient --> |
| 12 | <linearGradient id="curveGrad" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 13 | <stop offset="0%" stop-color="#3B82F6"/> |
| 14 | <stop offset="50%" stop-color="#10B981"/> |
| 15 | <stop offset="80%" stop-color="#F59E0B"/> |
| 16 | <stop offset="100%" stop-color="#F43F5E"/> |
| 17 | </linearGradient> |
| 18 | </defs> |
| 19 | <rect width="1280" height="720" fill="#F8FAFC"/> |
| 20 | <!-- ==================== Header ==================== --> |
| 21 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 22 | <text x="60" y="70" font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="32" font-weight="800" fill="#0F172A">Customer Journey Map</text> |
| 23 | <text x="60" y="100" font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">USER EXPERIENCE & PAIN POINT ANALYSIS: ENTERPRISE ONBOARDING</text> |
| 24 | </g> |
| 25 | <!-- ==================== Journey Grid ==================== --> |
| 26 | <g id="journey-grid" data-pptx-bounds="0 108 1280 584" transform="translate(60, 140)"> |
| 27 | <!-- Header Row (Stages) --> |
| 28 | <rect x="180" y="0" width="240" height="40" rx="6" fill="#EFF6FF"/> |
| 29 | <text x="300" y="25" font-size="14" font-weight="800" fill="#1E40AF" letter-spacing="1" text-anchor="middle">1. DISCOVERY</text> |
| 30 | <rect x="430" y="0" width="240" height="40" rx="6" fill="#EFF6FF"/> |
| 31 | <text x="550" y="25" font-size="14" font-weight="800" fill="#1E40AF" letter-spacing="1" text-anchor="middle">2. EVALUATION</text> |
| 32 | <rect x="680" y="0" width="240" height="40" rx="6" fill="#EFF6FF"/> |
| 33 | <text x="800" y="25" font-size="14" font-weight="800" fill="#1E40AF" letter-spacing="1" text-anchor="middle">3. PURCHASE</text> |
| 34 | <rect x="930" y="0" width="240" height="40" rx="6" fill="#EFF6FF"/> |
| 35 | <text x="1050" y="25" font-size="14" font-weight="800" fill="#1E40AF" letter-spacing="1" text-anchor="middle">4. ONBOARDING</text> |
| 36 | <!-- Vertical grid lines --> |
| 37 | <line x1="170" y1="50" x2="170" y2="520" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4 4"/> |
| 38 | <line x1="425" y1="50" x2="425" y2="520" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4 4"/> |
| 39 | <line x1="675" y1="50" x2="675" y2="520" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4 4"/> |
| 40 | <line x1="925" y1="50" x2="925" y2="520" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4 4"/> |
| 41 | <!-- ==================== Row 1: User Actions ==================== --> |
| 42 | <line x1="0" y1="60" x2="1170" y2="60" stroke="#CBD5E1" stroke-width="2"/> |
| 43 | <text x="0" y="90" font-size="16" font-weight="800" fill="#0F172A">User Actions</text> |
| 44 | <text x="0" y="110" font-size="13" fill="#64748B">What the user does</text> |
| 45 | <rect x="180" y="80" width="240" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 46 | <text x="195" y="105" font-size="14" font-weight="600" fill="#334155">Searches Google for solutions,<tspan x="195" dy="20">lands on marketing site.</tspan></text> |
| 47 | <rect x="430" y="80" width="240" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 48 | <text x="445" y="105" font-size="14" font-weight="600" fill="#334155">Reads case studies, compares<tspan x="445" dy="20">features vs competitors.</tspan></text> |
| 49 | <rect x="680" y="80" width="240" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 50 | <text x="695" y="105" font-size="14" font-weight="600" fill="#334155">Requests a demo, negotiates<tspan x="695" dy="20">pricing with sales team.</tspan></text> |
| 51 | <rect x="930" y="80" width="240" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 52 | <text x="945" y="105" font-size="14" font-weight="600" fill="#334155">Signs contract, creates account,<tspan x="945" dy="20">starts initial configuration.</tspan></text> |
| 53 | <!-- ==================== Row 2: Touchpoints ==================== --> |
| 54 | <line x1="0" y1="160" x2="1170" y2="160" stroke="#CBD5E1" stroke-width="1"/> |
| 55 | <text x="0" y="190" font-size="16" font-weight="800" fill="#0F172A">Touchpoints</text> |
| 56 | <text x="0" y="210" font-size="13" fill="#64748B">Channels of interaction</text> |
| 57 | <text x="300" y="200" font-size="14" font-weight="600" fill="#3B82F6" text-anchor="middle">SEO / Ads / Website</text> |
| 58 | <text x="550" y="200" font-size="14" font-weight="600" fill="#3B82F6" text-anchor="middle">Whitepapers / Webinars</text> |
| 59 | <text x="800" y="200" font-size="14" font-weight="600" fill="#3B82F6" text-anchor="middle">Zoom / Email / Docusign</text> |
| 60 | <text x="1050" y="200" font-size="14" font-weight="600" fill="#3B82F6" text-anchor="middle">Web App / CS Manager</text> |
| 61 | <!-- ==================== Row 3: Emotional Curve ==================== --> |
| 62 | <line x1="0" y1="240" x2="1170" y2="240" stroke="#CBD5E1" stroke-width="1"/> |
| 63 | <text x="0" y="270" font-size="16" font-weight="800" fill="#0F172A">Emotional Experience</text> |
| 64 | <text x="0" y="290" font-size="13" fill="#64748B">Satisfaction level over time</text> |
| 65 | <!-- Horizontal baseline for curve --> |
| 66 | <line x1="180" y1="310" x2="1170" y2="310" stroke="#E2E8F0" stroke-width="1"/> |
| 67 | <!-- The Journey Curve --> |
| 68 | <!-- Starts OK -> Goes High during eval -> Drops during negotiation -> Drops hard during onboarding -> Recovers slightly --> |
| 69 | <path d="M 180 310 C 240 280, 300 260, 425 260 S 550 250, 675 320 S 800 360, 925 360 S 1050 280, 1170 290" fill="none" stroke="url(#curveGrad)" stroke-width="4" stroke-linecap="round"/> |
| 70 | <!-- Emotion Nodes (Circles) --> |
| 71 | <circle cx="300" cy="275" r="8" fill="#FFFFFF" stroke="#3B82F6" stroke-width="3"/> |
| 72 | <text x="300" y="255" font-family="sans-serif" font-size="20" text-anchor="middle">🙂</text> |
| 73 | <circle cx="550" cy="256" r="8" fill="#FFFFFF" stroke="#10B981" stroke-width="3"/> |
| 74 | <text x="550" y="236" font-family="sans-serif" font-size="20" text-anchor="middle">🤩</text> |
| 75 | <circle cx="800" cy="340" r="8" fill="#FFFFFF" stroke="#F59E0B" stroke-width="3"/> |
| 76 | <text x="800" y="375" font-family="sans-serif" font-size="20" text-anchor="middle">😐</text> |
| 77 | <circle cx="1050" cy="325" r="8" fill="#FFFFFF" stroke="#F43F5E" stroke-width="3"/> |
| 78 | <text x="1050" y="360" font-family="sans-serif" font-size="20" text-anchor="middle">😫</text> |
| 79 | <!-- ==================== Row 4: Pain Points & Opportunities ==================== --> |
| 80 | <line x1="0" y1="400" x2="1170" y2="400" stroke="#CBD5E1" stroke-width="1"/> |
| 81 | <text x="0" y="430" font-size="16" font-weight="800" fill="#0F172A">Pain Points & Friction</text> |
| 82 | <text x="0" y="450" font-size="13" fill="#64748B">Barriers to success</text> |
| 83 | <!-- Highlighted Pain Point Cards (Red) --> |
| 84 | <rect x="180" y="420" width="240" height="80" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 85 | <text x="195" y="445" font-size="13" font-weight="600" fill="#475569">Information overload on<tspan x="195" dy="20">the homepage.</tspan></text> |
| 86 | <rect x="430" y="420" width="240" height="80" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 87 | <text x="445" y="445" font-size="13" font-weight="600" fill="#475569">Pricing is not transparent;<tspan x="445" dy="20">requires a sales call.</tspan></text> |
| 88 | <rect x="680" y="420" width="240" height="80" rx="6" fill="#FFF1F2" stroke="#FDA4AF" stroke-width="1"/> |
| 89 | <text x="695" y="445" font-size="13" font-weight="700" fill="#E11D48">Contract negotiation takes<tspan x="695" dy="20">too long (Avg 14 days).</tspan><tspan x="695" dy="20">Legal redlines cause delays.</tspan></text> |
| 90 | <rect x="930" y="420" width="240" height="80" rx="6" fill="#FFF1F2" stroke="#FDA4AF" stroke-width="1"/> |
| 91 | <text x="945" y="445" font-size="13" font-weight="700" fill="#E11D48">Steep learning curve.<tspan x="945" dy="20">Lack of interactive tutorials.</tspan></text> |
| 92 | <line x1="0" y1="520" x2="1170" y2="520" stroke="#0F172A" stroke-width="2"/> |
| 93 | </g> |
| 94 | </svg> |
| 95 |