{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "customer-journey-map", "title": "Customer Journey Map", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/customer-journey-map/CustomerJourneyMap.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport {\n ArrowRight,\n ArrowUpRight,\n CheckCircle2,\n Clock,\n Compass,\n CreditCard,\n Download,\n HeartHandshake,\n Lightbulb,\n MousePointerClick,\n Rocket,\n Share2,\n ShieldAlert,\n Smile,\n TrendingUp,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface CustomerJourneyMapProps {\n className?: string\n}\n\ninterface JourneyStage {\n id: string\n stageNumber: string\n title: string\n subtitle: string\n icon: React.ElementType\n volume: string\n volumeLabel: string\n volumeChange: string\n volumeChangeTrend: 'up' | 'down'\n conversionRate: string\n conversionLabel: string\n primaryAction: {\n icon: React.ElementType\n text: string\n }\n keyMetrics: {\n label: string\n value: string\n detail?: string\n }[]\n touchpoints: {\n name: string\n channel: string\n type: 'organic' | 'app' | 'email' | 'billing'\n }[]\n sentiment: {\n score: number\n maxScore: number\n label: string\n icon: React.ElementType\n progressColor: string\n gaugeLabel: string\n }\n frictionPoint: string\n opportunity: {\n experiment: string\n expectedImpact: string\n }\n badgeVariant: 'outline' | 'secondary' | 'default' | 'success' | 'info' | 'warning'\n}\n\nconst timeframes = [\n { id: '30d', label: 'Last 30 Days' },\n { id: '90d', label: 'Last 90 Days' },\n { id: 'qtd', label: 'Quarter to Date' },\n { id: 'ytd', label: 'Year to Date' },\n]\n\nconst stages: JourneyStage[] = [\n {\n id: 'acquisition',\n stageNumber: '01',\n title: 'Acquisition',\n subtitle: 'Traffic & Inbound Discovery',\n icon: Compass,\n volume: '120,000',\n volumeLabel: 'Unique Visitors',\n volumeChange: '+14.2%',\n volumeChangeTrend: 'up',\n conversionRate: '6.8%',\n conversionLabel: 'Visitor to Signup',\n primaryAction: {\n icon: MousePointerClick,\n text: 'Browses docs & visits pricing',\n },\n keyMetrics: [\n { label: 'Top Channel', value: 'Organic Search', detail: '48% of volume' },\n { label: 'Signup Conv.', value: '6.8%', detail: '8,160 accounts' },\n { label: 'Avg. Bounce', value: '41.2%', detail: '-2.4% vs benchmark' },\n ],\n touchpoints: [\n { name: 'SEO landing pages & technical blog', channel: 'Search', type: 'organic' },\n { name: 'Interactive sandbox demo playground', channel: 'Web App', type: 'app' },\n { name: 'Product Hunt launch & GitHub repo', channel: 'Community', type: 'organic' },\n { name: 'Developer search & social ad campaigns', channel: 'Paid Ads', type: 'organic' },\n ],\n sentiment: {\n score: 8.2,\n maxScore: 10,\n label: 'High Intent',\n icon: Smile,\n progressColor: 'bg-chart-1',\n gaugeLabel: '8.2 / 10',\n },\n frictionPoint: 'Technical landing page bounce rate spikes on legacy mobile browsers (54%).',\n opportunity: {\n experiment: 'Optimize hero headline for developer intent to lift bounce rate by 5%',\n expectedImpact: '+420 signups/mo',\n },\n badgeVariant: 'secondary',\n },\n {\n id: 'activation',\n stageNumber: '02',\n title: 'Activation',\n subtitle: 'Onboarding & First Success',\n icon: Rocket,\n volume: '8,160',\n volumeLabel: 'Signups Onboarded',\n volumeChange: '+8.6%',\n volumeChangeTrend: 'up',\n conversionRate: '78.0%',\n conversionLabel: 'Reached Aha Milestone',\n primaryAction: {\n icon: Zap,\n text: 'Runs first CLI query & creates project',\n },\n keyMetrics: [\n { label: 'Key Milestone', value: 'Created 1st Project', detail: '78% completed' },\n { label: 'Time to Value', value: '12 min', detail: 'Median onboarding' },\n { label: 'Stage Drop-off', value: '22.0%', detail: 'Step 3 invite friction' },\n ],\n touchpoints: [\n { name: 'Automated 4-part welcome email sequence', channel: 'Email', type: 'email' },\n { name: 'Interactive 3-step setup checklist', channel: 'In-App Modal', type: 'app' },\n { name: 'Pre-populated template project schemas', channel: 'Workspace', type: 'app' },\n { name: 'CLI quickstart terminal prompt', channel: 'Developer Tool', type: 'app' },\n ],\n sentiment: {\n score: 8.8,\n maxScore: 10,\n label: 'Enthusiastic',\n icon: Smile,\n progressColor: 'bg-chart-2',\n gaugeLabel: '8.8 / 10',\n },\n frictionPoint: 'Drop-off occurs during mandatory colleague invite screen before dashboard access.',\n opportunity: {\n experiment: 'Add single-sign on prompt to reduce drop-off by 8%',\n expectedImpact: '+650 activated teams',\n },\n badgeVariant: 'info',\n },\n {\n id: 'monetization',\n stageNumber: '03',\n title: 'Monetization',\n subtitle: 'Free to Paid Conversion',\n icon: CreditCard,\n volume: '1,420',\n volumeLabel: 'Paid Customers',\n volumeChange: '+22.4%',\n volumeChangeTrend: 'up',\n conversionRate: '17.4%',\n conversionLabel: 'Signup to Paid Rate',\n primaryAction: {\n icon: TrendingUp,\n text: 'Selects Team plan & enters credit card',\n },\n keyMetrics: [\n { label: 'Avg. Order Value', value: '$49/mo', detail: 'Blended Team/Pro' },\n { label: 'Conv. Rate', value: '17.4%', detail: '1,420 total accounts' },\n { label: 'Gross New MRR', value: '+$69,580', detail: 'Paced above target' },\n ],\n touchpoints: [\n { name: 'Feature gate limit trigger modal', channel: 'In-App', type: 'app' },\n { name: 'Self-serve pricing comparison drawer', channel: 'Web App', type: 'app' },\n { name: 'Stripe checkout with annual savings toggle', channel: 'Billing Gateway', type: 'billing' },\n { name: 'Instant VAT receipt & team tax invoice', channel: 'Automated Email', type: 'email' },\n ],\n sentiment: {\n score: 8.4,\n maxScore: 10,\n label: 'ROI Positive',\n icon: Smile,\n progressColor: 'bg-chart-3',\n gaugeLabel: '8.4 / 10',\n },\n frictionPoint: '12% checkout abandonment when international VAT verification requires manual review.',\n opportunity: {\n experiment: 'Introduce annual billing 20% discount badge in checkout to lift ARPU',\n expectedImpact: '+$14.2k MRR expansion',\n },\n badgeVariant: 'warning',\n },\n {\n id: 'retention',\n stageNumber: '04',\n title: 'Retention & Advocacy',\n subtitle: 'Active Renewals & Expansion',\n icon: HeartHandshake,\n volume: '92.0%',\n volumeLabel: 'Net Retention Rate',\n volumeChange: '+3.1%',\n volumeChangeTrend: 'up',\n conversionRate: '92.0%',\n conversionLabel: 'Cohort Net Retention',\n primaryAction: {\n icon: Share2,\n text: 'Shares referral link & invites teammates',\n },\n keyMetrics: [\n { label: 'NPS Score', value: '+68', detail: 'Industry world-class' },\n { label: 'Referral Velocity', value: '1.2 invites', detail: 'Per active user/mo' },\n { label: 'Monthly Logo Churn', value: '0.8%', detail: 'Negative revenue churn' },\n ],\n touchpoints: [\n { name: 'Automated weekly performance digest', channel: 'Email Digest', type: 'email' },\n { name: 'Quarterly proactive CSM review email', channel: 'Success Touch', type: 'email' },\n { name: 'Referral program link inside settings', channel: 'Workspace Settings', type: 'app' },\n { name: 'Changelog notification & release notes', channel: 'In-App Feed', type: 'app' },\n ],\n sentiment: {\n score: 9.4,\n maxScore: 10,\n label: 'Brand Advocates',\n icon: Smile,\n progressColor: 'bg-chart-4',\n gaugeLabel: '9.4 / 10',\n },\n frictionPoint: 'Feature discovery lag for advanced multi-region latency controls on growing teams.',\n opportunity: {\n experiment: 'Launch one-click workspace invite link to increase referral velocity to 1.8',\n expectedImpact: '+35% viral coefficient',\n },\n badgeVariant: 'success',\n },\n]\n\nconst overallSummary = {\n funnelConversion: '1.18%',\n funnelConversionDetail: '1,420 Paid from 120,000 Visitors',\n timeToValue: '12 min',\n timeToValueDetail: 'Median signup to Aha moment',\n conversionVelocity: '4.2 days',\n conversionVelocityDetail: 'First touch to paid subscription',\n netRetention: '92.0%',\n netRetentionDetail: 'Expansion outpacing churn by 3.8x',\n}\n\nexport function CustomerJourneyMap({ className }: CustomerJourneyMapProps) {\n const [selectedTimeframe, setSelectedTimeframe] = useState('30d')\n const [isExporting, setIsExporting] = useState(false)\n const [selectedStageIndex, setSelectedStageIndex] = useState(null)\n\n const handleExport = () => {\n setIsExporting(true)\n setTimeout(() => {\n setIsExporting(false)\n }, 1200)\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n

\n Customer Journey & Growth Lifecycle Map\n

\n \n Live Lifecycle\n \n
\n

\n Analyze conversion velocity, friction points, and retention cohorts across user lifecycle stages.\n

\n
\n\n {/* Action Toolbar */}\n
\n
\n {timeframes.map((tf) => (\n setSelectedTimeframe(tf.id)}\n >\n {tf.label}\n \n ))}\n
\n\n \n {!isExporting ? : }\n {isExporting ? 'Exported' : 'Export Journey Map'}\n \n
\n
\n\n {/* Connected Horizontal Funnel Flow Ribbon */}\n
\n
\n {/* Stage 1 Pill */}\n
\n
\n
\n \n
\n
\n

1. Acquisition

\n

120,000 Visitors

\n
\n
\n
\n\n {/* Connector 1 */}\n
\n
\n 6.8%\n \n
\n \n
\n\n {/* Stage 2 Pill */}\n
\n
\n
\n \n
\n
\n

2. Activation

\n

8,160 Signups

\n
\n
\n
\n\n {/* Connector 2 */}\n
\n
\n 17.4%\n \n
\n \n
\n\n {/* Stage 3 Pill */}\n
\n
\n
\n \n
\n
\n

3. Monetization

\n

1,420 Paid

\n
\n
\n
\n\n {/* Connector 3 */}\n
\n
\n 92.0%\n \n
\n \n
\n\n {/* Stage 4 Pill */}\n
\n
\n
\n \n
\n
\n

4. Retention

\n

1,306 Advocates

\n
\n
\n
\n
\n
\n\n {/* 4-Stage Horizontal Journey Grid */}\n
\n {stages.map((stage, idx) => {\n const StageIcon = stage.icon\n const ActionIcon = stage.primaryAction.icon\n\n return (\n setSelectedStageIndex(selectedStageIndex === idx ? null : idx)}\n >\n \n {/* Stage Badge & Number */}\n
\n \n Stage {stage.stageNumber}\n \n \n {stage.conversionLabel}\n \n
\n\n {/* Stage Icon & Title */}\n
\n \n \n
\n
\n {stage.title}\n {stage.subtitle}\n
\n
\n\n {/* Stage Volume Metric */}\n
\n
\n

{stage.volumeLabel}

\n

{stage.volume}

\n
\n
\n \n \n {stage.volumeChange}\n \n

\n Conv: {stage.conversionRate}\n

\n
\n
\n \n\n \n {/* Primary Customer Action */}\n
\n

Primary Customer Action

\n
\n \n {stage.primaryAction.text}\n
\n
\n\n {/* Key Metrics Grid */}\n
\n

Key Stage Signals

\n
\n {stage.keyMetrics.map((metric, mIdx) => (\n \n {metric.label}\n
\n {metric.value}\n {metric.detail && ({metric.detail})}\n
\n
\n ))}\n
\n
\n\n {/* Key Touchpoints List */}\n
\n

Active Touchpoints

\n \n
\n\n \n\n {/* Sentiment Indicator */}\n
\n
\n \n \n Sentiment Score\n \n \n {stage.sentiment.gaugeLabel} ({stage.sentiment.label})\n \n
\n \n
\n\n {/* Friction / Drop-off Point Note */}\n
\n
\n \n
\n Friction Point: \n {stage.frictionPoint}\n
\n
\n
\n\n {/* Opportunity / Next Experiment Box */}\n
\n
\n \n
\n
\n Growth Experiment:\n \n {stage.opportunity.expectedImpact}\n \n
\n

{stage.opportunity.experiment}

\n
\n
\n
\n \n \n )\n })}\n \n\n {/* Cross-Stage Conversion Velocity & Funnel Health Summary */}\n \n \n
\n
\n \n Lifecycle Conversion Velocity & Health Diagnostics\n \n \n End-to-end efficiency metrics tracking user progression speed from initial acquisition to retained\n advocacy.\n \n
\n \n \n Healthy Velocity (+18% QoQ)\n \n
\n \n\n \n {/* Metric Cards Strip */}\n
\n
\n
\n \n Overall Conversion\n
\n

\n {overallSummary.funnelConversion}\n

\n

{overallSummary.funnelConversionDetail}

\n
\n\n
\n
\n \n Time to Value (TTV)\n
\n

\n {overallSummary.timeToValue}\n

\n

{overallSummary.timeToValueDetail}

\n
\n\n
\n
\n \n Avg. Conversion Velocity\n
\n

\n {overallSummary.conversionVelocity}\n

\n

{overallSummary.conversionVelocityDetail}

\n
\n\n
\n
\n \n Net Revenue Retention\n
\n

\n {overallSummary.netRetention}\n

\n

{overallSummary.netRetentionDetail}

\n
\n
\n\n {/* Stage Transition Flow Breakdown Bar */}\n
\n
\n Lifecycle Pass-Through Velocity\n \n 4 Stages Active • 120,000 Cohort Cohere\n \n
\n\n {/* Multi-segment Funnel Bar */}\n
\n \n
\n
\n
\n
\n\n
\n
\n \n Acquisition (100%)\n
\n
\n \n Activation (6.8%)\n
\n
\n \n Monetization (17.4%)\n
\n
\n \n Retention (92.0%)\n
\n
\n
\n\n \n\n {/* Key Strategic Growth Takeaway Callout */}\n
\n
\n
\n \n
\n
\n
\n

Primary Strategic Growth Takeaway

\n \n High Priority\n \n
\n

\n The largest leverage point in the current cohort is the{' '}\n Activation-to-Monetization conversion gap (17.4%).\n Implementing contextual in-app checkout prompts at high-usage milestones and launching annual billing\n discounts is modeled to generate an additional{' '}\n +$14,200 / mo in net new MRR.\n

\n
\n
\n\n \n
\n \n \n
\n )\n}\n\nexport default CustomerJourneyMap\n", "type": "registry:block", "target": "~/components/blocks/CustomerJourneyMap.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Visual customer lifecycle funnel and journey map tracking user touchpoints across Acquisition, Activation, Monetization, and Retention. Features conversion rates, friction analysis, sentiment gauges, growth experiment notes, and cross-stage velocity summaries.", "categories": [ "analytics", "dashboard", "marketing" ] }