How to create and use a usable user journey :)

Every road has two directions

There are multiple ways into, through and out of an application and most people have often made a decision on what they want to do on our application or website before they reach it. They have a good idea of what they need to do and a rough idea of how that process should happen. If we can map out those expectations and stick to them as closely as possible it’s better for the user, which is better for the business.

Writing down a user journey helps you to understand it better

Just like writing a to-do list, creating a user journey as a viewable, printable document can help you to absorb and retain that information better in various ways:

  • It slows down our thinking on it, helping us to spot our own mistakes

  • It gives us an opportunity to collaborate as a team and stop individual presumptions

  • The process of writing it out step by step helps us to really understand why a person will use a system in a certain way


How to change create a user journey happy graph

There are various tools for creating user journeys, but this one is my personal favourite. The aim of a user journey happy graph is to work out the ideal route for someone to take through your system, in a way that is realistic for your business and predictable by your audience by considering the effectiveness on the mood of the user.

The user journey happy graph has two parts:

  1. an ordered list of clicks that a person will make

  2. what they’re thinking at each step

  3. a graph to show how happy that person is at each step

Note, the templates that I am using here are from the Sketch App Resources website, here you can download templates that make laying these out much faster!


Step 01

Create a persona

If you haven’t read about creating personas, head over the the How to create a user persona blog. They journeys need to be done from the perspective a real person in a real situation.


Step 02

List how the person will feel before they come to the website

Each persona may have a few different reasons to use the application, so each one needs to be considered individually. Take one example and then write down the reason for visiting (shown in the red box).

Then consider the mood of the person at that point and plot a point on the graph above. In the example here we are creating an app where people can report nuisance behaviour so they person is definitely going to be stressed on arrival.

Step 03

Write down what the person is thinking

Next, write down all of the thoughts of the person at that point. Be honest and conversational - this will help make this persona into a real person and shift the way that you consider their next steps.

Examples of what to write down

  • Is the person becoming impatient?

  • What words are they looking for on screen?

  • What sort of next steps or actions are they thinking about?


Step 04

Work out how to improve their mood on the next step

After considering their thoughts and putting yourself in their shoes, work out what would be the best way to increase their mood when they arrive, and make that the next step (shown in the green box above). Increasing a persons mood is a proven way to make then retain information better and perform task better.

For example

  • If someone is looking to report something serious, immediately show them the way to get to that form

  • If people aren’t sure whether this is the right service for them, instantly show them where they can compare and/or learn about the services

You also need to be realistic on how much you can do to increase a person’s mood given a situation. In this example we know that the person will only truly be happy once they nuisance behaviour has been handled, but finding the app itself and knowing there is a solution will increase their mood.


Step 05

Do this for each complete process that they will require

Continue along this process and write down their thoughts and feelings for each step. If there are possible routes that the person could take, create two separate graphs so that you can consider each process individually and how the steps may annoy the user or improve their experience.


Step 06

Once complete, here’s how you use it

What you will find is that you can now go back through your planning (if the system is not yet built) or your existing system and compare the users goals against what is planned.

You can use this to review an existing site and show how the fixed process you have doesn’t work, or plan how to make a new design work better.

  • Make sure that your wireframes and sitemap match the order that the user wants to travel through the system

  • Does the wording in your headings help get the person to the next step, for example, once you know what sort of next step they’ll be wanting to take, it’s likely that they’ll be looking for specific wording relating to that action somewhere in a heading or link.

  • If the person is highly stressed at certain points are you using language to improve that mood, for example, “Let us help you find a solution”

  • By seeing a clear end to a person’s journey you are able to highlight that they’ve finished and boost the way they feel about the system, for example once they completed a task you can show wording such as “Great news, your order is on its way thanks to Awesome Business Corp”


Next steps

This process is highlighting one of the tools that can be useful in improving UX, and there are many other concepts that work together to help make happier users. Read through some of the high level concepts in the other blog posts to see how you can improve your UX even further.