Bringing the perspective of a UX (user experience) designer to your work will help you see your website from the perspective of your users, making your design meet their needs better.

Web designers and developers are typically more focused on the client-side of a site, while UX designers focus entirely on how a site is experienced and what features make using that site easy or frustrating. Web designers who understand some UX design will be able to create more enjoyable, more effective websites.

User journey mapping is one tool from the UX toolbox that every web designer can use to better understand their users and how to meet their needs.

What is user journey mapping?

User journey mapping (sometimes called a customer journey) is a way to understand the experience of your website from a visitor’s point of view. A user journey map is literally what it sounds like  — a visually diagrammed map of the path that a visitor takes through your site — from the homepage, through menus and links — to find what they are looking for.

To create a user journey map, you first will research who is using your site, what they want, and what their experiences with your site have been so far. 

Why user journey mapping is useful

User journey maps help you to better understand how to get the user from your homepage to the information they need or the action they want to take. They’re exceptionally helpful in  refining your website design.

Improves the user experience

This is the ultimate goal with user journey mapping. Site navigation can be especially tricky to assess as a designer because you already know the layout of your website so well. Getting a fresh pair of eyes to try and navigate through your site reveals things you might not have noticed while designing it.

Through doing user research and visually mapping your results, you will begin to see what parts of your design are confusing or frustrating visitors. This process also reveals areas that are working well and can be repeated elsewhere in the design.

Maintains ease-of-use when your site grows

User journey mapping can make even a simple site clearer and easier to navigate. When your website or business grows, and you need to add content and features, user journey mapping can be used to make sure your website’s fundamental flow stays intuitive and easy to navigate.

When you are planning a redesign or a new website, you can even create user journey maps to test your design before you begin building (see future state mapping below!).

Three useful types of user journey mapping

You can approach your user journey mapping differently based on the insight you are looking to get from it. The end result of each map will look similar, but the focus of each is different, which will change the information you get out of it. There are many different types of maps, but these three are most useful to start with.

Current State

A current state map looks at your website as it is right now. It is most useful for identifying opportunities for improvement in your current design and understanding how your website is being used. This is the most common type of user journey map.

Future State

A future state map explores a hypothetical “ideal” website. It asks what it would look like for someone to use your website if everything was exactly as you imagined. This type is useful to use when planning a redesign or a major change. When you collect user research and visually communicate the results, you can use that map to pitch your plans to your client or company.

Persona Based

A persona-based map lays out the journey of any one designated persona. These maps are useful when you want to optimize your website for a specific type of person or improve the experience for users with specific needs.

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.