Skip to content

Design Your Own User Journey Map

Designing your own User Journey Map or User Flow after wireframing can be useful when showcasing how your app navigates. If you have Sketch, Affinity Design or Adobe design softwares, you can easily create one by yourself. Here I will take you though the steps in which I create a simple User Journey map for mobile. You can find the template file (in .sketch) to try it yourself and use for your projects!

1. Start with a Sketch

user journey sketch

Have a clear layout of how you want your user flow to look like. This is where you work out which section of your app are busiest and space out the sections appropriately before designing it. Above is an example of how I would sketch through the wireframes before creating the user flow. To learn about wireframing, check out our article 5 Smart Ways to Wireframe Apps and Websites

Craft your idea and create an flow throughout your app that suits your user’s expectations. Make sure you study your customers and know how they will be using your app in every point of view. Write your thoughts down if needed. Rework on the process, and make sure you’re pretty confident with the user flow.

A Tip – you can print out wireframe screens or use coloured sticky notes to organise your app flow too.

2. Design Process

user journey map example
An example of a User Journey Map

When you have completed your wireframe of mobile design, export them in 1x .png file. Refer to your sketch as you begin designing it. In the example above, this was how I designed a User Journey Map I recently worked on for a client.

A User Flow Map starts with a App Title, followed by the app screens that proceeds from the first to the last. It is good practice to name your screen below each device for clarity.

User Journey Map - Links

Use connectors and arrows only after you have arranged all the screens accordingly. A tip – have fixed spacing throughout every horizontal and vertical spacings. For this example, each screen is spaced 150px horizontally and 100px vertically apart between another. This will make your user flow look consistent especially when you start to populate it.

You can highlight elements with a Square, Oval or Rectangle shape on your screen UI elements. This can be used to connect screens that are connected to a specific icon – e.g. a Bell Icon takes the user to the Notification screen.

3. Evaluate

The last part of designing a User Journey Map is to evaluate if your app has any broken links or un-intuitive. Work on identifying customer journey pain point and expectations. Create a prototype if necessary to gather feedback. Once you have identified the problems, you can always edit the User Journey Map or UI for an improved user experience.

For an in-depth look on creating user and customer journey maps, here are some great references:

  1. How to Map a Mobile User Journey by Scott Amyx
  2. When and How to Create Customer Journey Maps by NNG
  3. Experience Mapping Tools

Building a User Journey Map is a crucial step especially when you want to communicate your App effectively within the team, developers or stakeholders. This can also be an important part throughout the development of your app from years to come.

Whether you are building a Software, Web App and etc. you can benefit from the steps from this guide as well. If you would like professional help or advice regarding building your own User Journey Map, feel free to contact us.

Lastly, I hope you have gained some valuable insight in this tutorial and do feel free to stay in touch with us on Instagram or Twitter !

Share this post:

2 Comments

  1. Lauren Ashman Lauren Ashman

    Hello – this is great. Can I ask what programme you used to create your journey map ( the switchback user journey ) I am struggling to find freeware that works and am think of resorting to creating it manually. Thank you!

    • Lauren Ashman Lauren Ashman

      Nevermind I see you created it in sketch! Downloaded the template. Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: