Mapping customer journeys
Let’s explore Customer Journey Mapping — one of the most powerful tools in UI/UX design to visualize how users interact with a product over time.
Customer Journey Mapping
What Is It?
A Customer Journey Map is a visual story of the user’s experience with your product or service, from start to finish. It captures the phases, emotions, touchpoints, and pain points a user goes through while trying to achieve a goal.
It helps you understand the complete user experience — not just screen-by-screen, but from awareness to action and beyond.
Why It’s Important
- Reveals user frustrations and opportunities
- Helps teams empathize with users
- Aligns design, marketing, and development teams
- Informs feature design, content strategy, and support systems
- Drives user-centered solutions
Key Components of a Customer Journey Map
| Element | Description |
|---|---|
| User Persona | The specific type of user going through the journey |
| Scenario/Goal | The goal the user wants to achieve (e.g., buy a course, request a quote) |
| Stages/Phases | The steps the user takes (e.g., Discover → Consider → Act → Use → Reflect) |
| User Actions | What the user is doing at each stage |
| Emotions | How the user feels (frustrated, excited, confused, satisfied) |
| Touchpoints | Where the interaction happens (website, email, social media, app, etc.) |
| Pain Points | What blocks or frustrates the user |
| Opportunities | Where the experience can be improved |
Example Scenario: Signing Up for an Online Course
Let’s walk through a simplified customer journey of Mary (our earlier persona) trying to enroll in a course.
Persona: Mary the Marketer
Goal: Find and enroll in a digital marketing course
1. Awareness
- Action: Mary sees a course ad on Instagram
- Emotion: Curious, intrigued
- Touchpoint: Instagram ad
- Pain Point: Not sure if it’s a scam
- Opportunity: Show testimonials and trust indicators
2. Consideration
- Action: Visits the website, checks course details
- Emotion: Interested but skeptical
- Touchpoint: Website
- Pain Point: Overwhelming amount of info
- Opportunity: Simplify the homepage, add FAQs
3. Enrollment
- Action: Tries to sign up
- Emotion: Frustrated (form is long), then relieved
- Touchpoint: Sign-up page
- Pain Point: Confusing password requirements
- Opportunity: Simplify form and provide guidance
4. First Use
- Action: Logs in and starts the course
- Emotion: Satisfied, excited
- Touchpoint: Dashboard
- Pain Point: Doesn’t know where to start
- Opportunity: Onboarding tutorial or checklist
5. Post-Use
- Action: Shares experience with friends
- Emotion: Proud and empowered
- Touchpoint: WhatsApp, Email
- Opportunity: Provide easy-to-share certificate or referral bonus
Tools to Create Customer Journey Maps
| Tool | Features |
|---|---|
| Miro | Drag-and-drop templates, team collaboration |
| Figma | Customizable journey maps, design freedom |
| Lucidchart | Great for flowcharts and journey steps |
| UXPressia | Specialized tool for personas and journeys |
| Canva | Good for presentation-style journey maps |
Basic Figma Layout for a Journey Map
You can create a table with the following columns:
| Stage | User Action | Thoughts/Feelings | Touchpoints | Pain Points | Opportunities |
Then fill each row based on your persona’s journey through your product or service.
Tips
- Keep your map user-specific — don’t generalize too much
- Use emojis or colors to show emotion stages (e.g., 😡 😐 😊)
- Focus on insights that will guide design decisions
- You don’t need to be perfect — it’s a working document
Summary
- Customer journey maps help you understand the full experience
- They include actions, emotions, touchpoints, and opportunities
- Use real data (interviews, analytics, surveys) to inform your map
- Great for improving user satisfaction and product clarity
NEXT LESSON – LESSON 4. Wireframing Basics
