Design+Code logo

Quick links

Suggested search

Why use journey maps?

These maps help better understand some different data that you can analyze from the user, information like the users' behavior, their actions, their difficulties to complete a task, their motivations, their likes, dislikes, and more. And all this information can help you spot some caveats and improve your product's user experience. UX planet has a good article where explains the anatomy of a user journey map.

Untitled

Composition of a journey map

There are different factors involved that are vital components in creating a user journey map: Timescale, User Persona, Scenario** help to describe the context of what the user wants to achieve. Touchpoints on what the users do while interacting with the product, Channels are the different media users use to complete the task. Finally, Thoughts and Feelings to understand points of stress or satisfaction. There is an interesting article by the Interaction Design Foundation where talks more about these points.

journey map

User Persona and Scenario

It is important the connection between the user persona and the scenario. The user persona sets a specific character which will be the one to use that product, the scenario will set the context for the persona and sets the circumstances for the persona to use the product. It is recommended to choose your most common customer persona and consider the route they would normally take when first engaging with your product. HubSpot has some guidelines in how to create effective customer journey maps.

User Persona Scenario

Touchpoints and Channels

In every journey, there are some lanes that the user follows to achieve their goal. For example, if they want to buy something, before arriving at the digital store the first step will be to look for information on a web like Google. So for this case, Google makes part of our channel. And all the series of steps that the user goes through from point A to point B are the touch points. These points can be both digital or physical points.

user journey map

Thoughts and Feelings

As in any process, different tasks will generate different reactions, and all these are linked to emotions of the users which can be positive or negative. When we consider the emotional state of the user, this knowledge helps us to connect us with the customer on a human level. All these thoughts and feelings are the basis for a better user experience. That is why it is important to put all these emotions visually. The NN/g explains in more details about this subject.

Untitled-2

Inspirations

Creating a User Journey Map is a very dynamic and flexible process. You can experiment and try different approaches since each product has different personas, markets and contexts. There is a cool blog-post by UXeria where gathers different examples of journey maps, the one that I like the most is the Journey Maps from Lego.

Untitled-3

Creating a user journey

We will use Flowmapp for this exercise since it is a handy and versatile tool for UX design. Make sure to create your account, and then let's start a new project. We will name the project "Learning Platform." For this example, we will put the user in a context where they want to learn UI/UX design, and they are doing some research to find a learning platform that can cover their needs.

Untitled-4

For this exercise we can use a persona from Flowmapp, this is something optional, but you can create a persona in the same app and then link it to the user journey. This can be really helpful, since you can read the card of the persona in the same user journey.

Untitled-5

If you are using the persona make sure to add scenario in the persona card, so it can help us with the context of the scenario.

Untitled-6

Next, let's add a "Customer Journey Mapping" CJM which we will name it "Learning Platform" and we will select the option that says "Start From Blank".

Untitled-7

A new window will pop-up with different options to create different sections and we will select the text, you can choose between dark or light version.

Untitled-8

After we select Text, we will see two new columns and rows. Also, you will see a plus button where you can add more columns or rows if needed.

Untitled-9

An essential aspect of providing further support to the user journey is to link the persona card that we have to our user journey. We can do that by clicking on the plus sign where says Add New Persona on the top left corner. ****

lf1

We can add columns easily but put in mind that when you need to add new rows, you need to specifiy which type of row you will add.

Untitled-10

These are the rows we need to fulfil. Actions: over there we need to list **all the different steps that the persona will go through on those specific stages. **Channels: Are the different media you will use to go from your initial state until your final state. Experience: It is a dynamic emotional chart that helps to point the emotional state of the persona in the specific stages of the journey.

Then we have Motivations, Questions and Pain points: Those are lists where we can annotate the different needs, challenges and problems that the persona will encounter.

Untitled-12

Next we will name each one of our columns in the following order: Discovery, Consideration, Decision and Experience. Discovery is the initial point where the persona will start the research. Consideration is the stage where the persona filters the different options that will help them to reach their main goal. Decision is the point on the journey where the persona will choose from the different options that they have as solutions. Finally, the experience is the moment in the journey where the persona evaluates how easy or hard was to achieve their goal.

Untitled-11

Next, on the channels row, we can point the different media that the user uses to arrive from point A to point B. In our scenario from having the willingness to learn UI/UX to start learning.

So for our case, our users will use social media like Facebook, Instagram, Twitter, LinkedIn, Reddit to learn about specific courses or platforms that may interest him. After the user will pick some of the courses or platforms they are interested in. They will use a browser to go to the site and learn more details about the course. They will select the course and subscribe or purchase it. Finally, the user will be able to start learning the course.

Untitled-12

Now, for the experience section we have a very useful chart, which represents the emotional state of the persona in that specific stage of the journey. We can drag the emoji accordingly to the emotional state of the persona. This will create a behavioral representation chart of the persona. Feel free to create your chart accordingly to your scenario.

Untitled-13

Next let's fulfil the missing fields, like motivations, questions and pain points. Feel free to outline the different points you think will enrich the process.

Untitled-14

This is the final flow of our user journey, as you can see it was very interesting to follow the whole flow in order to understand how the user thinks and acts.

Frame 2

Conclusion

Creating a user journey is a good way to empathize with the users and understand better their different approaches and pain points. Sometimes we need to experience the scenario to find those subtle details which can improve our UX.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

User Personas

READ NEXT

Usability Metrics

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads