- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
64 lines
1.4 KiB
Markdown
64 lines
1.4 KiB
Markdown
---
|
|
title: Customer Journey Mapping
|
|
description: Designing for each stage of the user's decision process.
|
|
tags: [journey, mapping, UX, conversion, funnel]
|
|
---
|
|
|
|
# Customer Journey Mapping
|
|
|
|
## 6 Stages of Customer Journey
|
|
|
|
### 1. Awareness
|
|
- **Goal:** Capture attention
|
|
- **Design:** Hero with bold statement
|
|
- **Metrics:** Time on page, scroll depth
|
|
|
|
### 2. Interest
|
|
- **Goal:** Engage with content
|
|
- **Design:** Problem metrics, social proof
|
|
- **Metrics:** Scroll depth, section engagement
|
|
|
|
### 3. Consideration
|
|
- **Goal:** Evaluate solution
|
|
- **Design:** Feature comparison, pricing
|
|
- **Metrics:** Pricing page views, CTA clicks
|
|
|
|
### 4. Evaluation
|
|
- **Goal:** Build trust
|
|
- **Design:** Testimonials, case studies
|
|
- **Metrics:** Trust signal clicks, form fills
|
|
|
|
### 5. Decision
|
|
- **Goal:** Convert
|
|
- **Design:** CTA above the fold, guarantee
|
|
- **Metrics:** Conversion rate, form submissions
|
|
|
|
### 6. Retention
|
|
- **Goal:** Keep engaged
|
|
- **Design:** Onboarding, newsletter signup
|
|
- **Metrics:** Activation rate, engagement
|
|
|
|
## Landing Page Journey Flow
|
|
|
|
```
|
|
Hero (Awareness)
|
|
↓
|
|
Problem (Interest)
|
|
↓
|
|
Solution (Consideration)
|
|
↓
|
|
Features (Evaluation)
|
|
↓
|
|
Social Proof (Trust)
|
|
↓
|
|
Pricing (Decision)
|
|
↓
|
|
CTA (Conversion)
|
|
```
|
|
|
|
## Anti-Patterns
|
|
- Don't put pricing before social proof
|
|
- Don't ask for too much information upfront
|
|
- Don't hide CTA below the fold
|
|
- Don't skip mobile experience
|