A beginner’s guide to customer journey maps

When it comes to designing products that are both useful and memorable, there is little else in the design process that’s more important than cultivating a user-centric approach to our work.

We can design and iterate and do design sprints for weeks on end, but the results of our work will be hit-or-miss unless we’ve taken the time to understand the real needs and actual experience of the person we’re all here for: the end user.

In this guide, we’ll cover the basics of one important tool for developing a stronger focus on our end users: the customer journey map.

What is a customer journey map?

A customer journey map, also known as a user journey map, is a visual representation of the path a user takes from beginning to end in accomplishing a specific goal with your product.

The backbone of a customer journey map (CJM) is a timeline of sorts, following the succession of touchpoints (thinking here of Moments of Truth and micro-moments) that occur between the user and your product or organization. Touchpoints come in different shapes and sizes, including:

• How the user discovers your product in the first place
• Their first experience on your website/app
• The first bit of navigation they interact with to find what they’re looking for
• A click on the menu that takes them (or doesn’t) where they want to go
• An order confirmation email

Customer journey maps are a visualization of these touchpoints, along with their context and likely (or evident) outcomes, and often provide context as well—drawing the company’s goals and user’s emotions into the picture.

What does a customer journey map do?

So why not just have a meeting to present the company’s goals and the ways the product is or is not meeting user needs?

CJMs are particularly effective in making the user’s actual experience clear to everyone involved in creating the CJM—and to everyone who receives the final deliverable.

They place a real user (or a close approximation, through personas) in front of team members, decision-makers, and key stakeholders. And this generates one key element essential to good UX: empathy.

Empathy matters in UX design. It keeps the user right where they belong—at the forefront of design decisions.

When is a CJM a useful tool in the design process?

Customer journey maps are useful at any point in the design process where there is a high potential for the focus to drift away from the user and their real needs. Let’s look at the five stages of the design process, and where or how a CJM might come in to play.

Stages one and two: Empathize and define

A CJM is an effective way to transition from the first to the second stage of the design process. In Stage one (Empathize), you’re doing all the user research that gives you the data you need. In Stage 2 (Define), you’re narrowing your focus down to the key problem(s) you need to solve. A CJM is one way to take your data points and the expertise of your team and stakeholders and put it all in one place—with the user as the focal point. The fact that this will be delivered in a visual format helps you to:

• Minimize discrepancies between individual conceptions/mental models. By getting thoughts and ideas out in the open and in a visual format, everyone can see what the combined thinking of the group is.
• Find common ground. Everyone can feel heard and have a chance to discuss what they see as the key touchpoints, problems, etc. This kind of communication often generates consensus.
• Establish a shared vision. There’s less room for speculation about user needs when the needs of many users have been combined into what is essentially the journey of one composite user.

Stages three and four: Ideate and prototype

A CJM gives your team a tangible starting point for the third stage of the design process (Ideate) and a strong foundation for moving into the fourth (Prototype). In stage three, the goal is to generate as many ideas as possible to improve, change, expand, and otherwise iterate on your product. Here, a CJM can help:

• Generate new ideas
• Narrow down the existing pool of ideas to the ones that are the most user-centric

Regardless of whether you’re planning to generate low-, mid-, or high-fidelity prototypes, going into Stage 4 with a CJM in hand will help ensure that the work remains true to the person we’re all here for—the end user. Print that CJM out, tack it to the wall, and keep your user at the center every step of the way.

Stage five: Test

As you conduct the testing required in the fifth stage, keeping your CJM as a reference point can help you see how the new, hopefully improved, journey compares to what it looked like before the work of stages 3 and 4. Here, the CJM can act as a signpost for where you’ve been—highlighting how design decisions have impacted the customer’s journey with your product.

Anatomy of a customer journey map

Do an image search for customer journey map and you’ll see a wide variation in the kind of deliverables people come up with. This speaks to how widely useful CJMs are as a tool for understanding the end user and how they will experience your product. They are versatile and adaptable to a wide variety of products, teams, and organizations. But this versatility can also make it difficult to pin down the exact form a CJM “should” take, there are a few key components that are common to most CJMs.

Now, enough talk—let’s have a look at an actual customer journey map and deconstruct it. Below, we have a CJM constructed for a hypothetical mobile app designed to help surfers find the safest times and places to go out on the water.

Sample customer journey map for Vela—a mobile app for surfers (image credit: CareerFoundry) 

In this instance, we’ve created the CJM in the early stages of the design process. At this stage, we don’t have a developed app with the concrete steps that Alex will have to take to “check general conditions,” for example. And we certainly haven’t had the chance (yet) to have any features or development oversights trigger overtly negative emotions in the user’s experience.

Zone A: User, scenario, goals

The very top of the CJM gives context. It tells us who our user is and what their motivations and goals are as they interact with our product. Here, we learn some basic information about Alex (age, location, job, relationship status), what is motivating her use of the app in the first place, and what she wants to accomplish with the app.

Note: CJMs are often based on the experience of a real or composite user. There is some debate about personas versus Jobs-To-Be-Done, but having some research-substantiated representation of the user at the very top of the CJM is the standard and highly effective practice.

Zone B: Phases

Underneath the user-centric umbrella of Zona A, we have the chronological journey Alex will take through our app. First, she’ll check the general weather conditions, then select a few potential sites, etc. This will end with Alex accomplishing her goal, and heading out to a safe location to catch a wave. Don’t get too hung up the particular labels here. The important thing is to capture the broad steps.

Zone C: Tasks, thoughts, emotions

This part of the CJM gets into the details of what the user will do, think, and feel in each phase of the journey. We watch as Alex checks the general surfing conditions; we understand the motivating thought; we know that she feels hopeful that weather conditions will allow her to get out on the water after work. Then we move to the next phase and the tasks and thoughts change as Alex becomes indifferent, and so on.

Note that there is some variation in what CJMs accomplish in this zone, largely dependent upon what is important for the company as a whole, and for the project in particular, as well as the people involved in it. Remember that your goals in this zone are to 1) understand what’s happening on the user’s side of things that the product team wouldn’t otherwise be privy to, and 2) discover opportunities to eliminate problems and create a fantastic experience for the user. This leads us to Zone D.

Zone D: Opportunities

At the bottom of the CJM, we have the opportunities we’ve discovered—the capabilities, features, and fixes that will optimize Alex’s experience of our app. In the final phase, for example, we know that Alex will want to look at multiple locations and will likely develop some favorites. So why not allow her to save those locations so that she can check them even more easily next time she uses the app?

Many CJMs also include a focus on internal ownership in this zone. This helps the individuals or teams involved to hone in on the opportunities they will take an active role in developing.

Overview of the process

But what goes into the creation of a deliverable like the one we’ve just dissected? Here’s your list of essential ingredients (typically introduced in this order):

• Research. Gather all the data you’ve distilled from user interviews, usability tests, surveys, and any other insights into how people actually engage with your product.
• People. Bring your researchers, developers, designers, content writers, and key stakeholders in and let them contribute to the process. The combined insight of a group this diverse will help ensure that you are getting the full picture of the product and the user’s current experience with it.
• Collaboration—whether in person or remote. Often, this takes the form of an in-person workshop, in which participants share knowledge and observations (usually with Post-it notes aplenty). If a workshop in real-time isn’t feasible for the teams involved, or you want to save on Post-its, there are countless tools available to aid remote collaboration in this process.
• The goal is to gather information and observations from people across every aspect of the product’s development and organize them in a way that allows everyone involved to see the narrative arc of the user’s experience with the product.
• A sketching tool. This is where you get into the piece-by-piece construction work of putting the final map together. While there are plenty of templates out there, few of them are fully customizable to fit your product and your organization. We recommend building your own CJM with a sketching tool like InVision Freehand.
• The result: A nicely organized and polished deliverable for the stakeholderswho weren’t able to participate (and to keep as a reference throughout the design process!).

A final word

This guide is only an introduction to customer journey maps. There are many ways to approach, adapt, and implement this extremely versatile UX design tool. The way you utilize it will depend largely upon your team, your product, and the particular design challenges you’re taking on.

If you’d like to learn more about customer journey maps, and other mapping tools useful in UX design, we recommend Jim Kalbach’s book Mapping Experiences.

For in-depth and mentored training in this and other powerful UX design processes and tools, check out CareerFoundry’s online UX Design Course.