How to get started with user journey mapping

Once you have set goals for yourself and decided what type of map you want to create, you can begin mapping your user journey.

Decide your scope

You can look at your entire website at once, or you can map just one interaction or outcome, such as finding the newsletter sign-up sheet or making a payment. A focused scope can help you troubleshoot an area that isn’t working or ensure an especially important element is working as intended.

A larger scope map gives you a big-picture overview of the way your site works as a whole. It’s a more involved process, but it will help you understand the entire user experience from beginning to end.

Find your persona(s)

A persona is a type of person who might be visiting your site. You can give them names and personalize them a little with details about who they are, what they are looking for, and why.

Focus on users that contribute to your business goals. You might need to get in the mindset of a marketing or sales team for this part of the process. To find your personas, you can talk to current users, look at online reviews, or email your mailing list.

For example, if you are making the website for a store that sells artisanal coffee-making tools, your personas could be:

• The Gift Giver: doesn’t know anything about coffee but wants to get a fancy-feeling gift. They will need more help, so they might interact with an FAQ or Chat feature before going to the Products page. They might leave if they get too overwhelmed by options before getting help.
• The Coffee Nerd: always looking for the best tools. This person might go straight to the products page and will want the details easily accessible. They have high standards and won’t want to purchase without having access to the information. They don’t want to get distracted.
• The Tourist: on vacation and looking for a cute shop to visit. They aren’t going to be interested in your online store, but a gorgeous photo of your store and easily accessible hours and location could convince them to come by.

These three people have very different needs and different goals in visiting your website, but to capture all of their business, you’ll want to map each of them and make sure you’re serving them well.

Put those personas in context

User context is the when and how each persona is visiting your site. A visitor will have a different experience of your site if they load it on a mobile device versus a laptop. Someone visiting your site casually when they have plenty of time will use your website differently than one who is looking for something specific while rushed.

You want to figure out when, how, and in what mindset your personas most commonly visit your site in order to map their experience accurately. This has very concrete impacts on your finished design. If visitors tend to look for one specific page whenever they are in a hurry (like contact info or your address), putting that information on the front page or linked to by a very visible button will smooth the user experience for all of those users.

Persona Example

Jo is a student apartment hunter in her early 20s and is still in college. She's looking for off-campus housing for her and her roommates. The collective group values location and cost more than apartment features.

Context: Jo is in a hurry and trying to visit as many apartments as possible. She is looking for apartment addresses in directions

Method: Browsing the site on her iPhone.

List their touchpoints

Touchpoints are the moments where the user makes a decision or interacts with your website. They are the actions they take to move toward their goals and the emotions they feel when that happens. The first touchpoint is how they got to your website — did they follow a social media ad, click on a search result, or type your URL directly?

Starting there, list each action that is taken and the corresponding emotional reactions. Any time they navigate a menu, click on a button, scroll through a gallery, or fill out a form is a touchpoint. You diagram the fairly dry A to Z path through your site, but you also become a bit of an actor, putting yourself in your persona’s head to figure out their reactions.

A met expectation — for example, that clicking a link called “Shop” will take them to an e-commerce gallery — will result in a positive emotional reaction. An expectation that is not met — say, the “Shop” link takes them to a contact form instead will provoke a negative reaction.

An example of what Jo — our persona above — might experience in her user journey. 

• Loads website in a mobile browser window. (Emotion: Neutral)
• It looks different than on a laptop. She looks for the map and can’t find it. (Emotion: Confused)
• She clicks on the “Apartments” tab. The map link is there. (Emotion: Less confused, a little frustrated)
• She uses the location and price filters to find apartments nearby. They all pop up on the map. (Emotion: Happy)
• She selects an apartment and clicks on it. The address and map are instantly visible. (Emotion: Excited)
• She looks for the agent’s contact info. She can’t find it. (Emotion: Frustrated)
• She scrolls down, clicks the agent’s name at the bottom of the page, and a contact link pops up. (Emotion: Relieved)
• After visiting, she reopens the listing page, and the Apply For Apartment form is at the bottom. (Emotion: Need met, feels satisfied)

Map the customer journey

Turn these touchpoints into a journey by mapping them on a timeline. You are creating a narrative of the feelings they experience over time. Create a graph of the emotional states of your user through each touchpoint by connecting them like this:

The map helps you understand the user experience as a whole. If we look at the graph above, it looks like touchpoint 3 is the biggest challenge to successfully navigating the website. It also takes a little while for the user’s mood to rebound after that initial setback. Improving the element of touchpoint 3 that isn’t working will have the biggest impact.

Translate your user journey map into action

A user journey map gives you insight into your user’s experience, but what makes it effective is the actions you take based on that information. In the immediate short term, use your results to make positive improvements to your website. You can repeat journey mapping as often as you like throughout the design process and explore the ways you might be able to change your design as you grow your website.

User journey mapping can also improve your skills as a designer in bigger ways. It is a tool that can improve your empathy and help you see your designs from new points of view. The choices you make when creating the website you are currently mapping, and all of your future designs, will be more informed by real data and more responsive to the real needs of the people visiting your site. Getting this sort of feedback regularly makes you a better designer, which is ultimately what we are all striving for.