User Journey Maps or User Flows, what to do first?

UX Design is a complex process. There are lots of deliverables that may help to create a solution that will be useful and joyful for customers. This article focuses on two ones that visualize the path that user has to pass to accomplish tasks in the designed product.

Let’s try to answer following questions:
What are differences between User Journey Maps and User Flows? What is their purpose? How they complement each other? 
Finally, which one we should focus first when we design a product?

I will start with the explanation of basic terms we cover in this Story.

What is User Journey Map?

Journey Maps try to capture the experience of a user during the interaction with the products. They are a visual trip of the user across the solution. Journey Maps are some kind of a journal, where user notes their feelings, pain points and the moments of delight.

User Journey Maps may have several layers, they do not focus only on a particular element that triggers action. They can even describe what the back-end system makes to deliver data needed by the user. On the other hand, they can focus more on a user — describe their feeling, thoughts, what they while interacting with the product.

Journey maps are usually linear because they describe various aspects of accomplishing particular tasks.

How User Journey Map may look like.

What are User Flows?

User Flows, called also UX, Wire, UI or IX Flows are the deliverables visualizing the complete path that users follow across the whole solution.

Their origins are flow charts, but through years they have been enriched with more visual elements — wireframes/mockups or gesture visualization.

UX Flows are hybrid between traditional flow charts with some visual interfaces included in them. They focus on a task to be accomplished by the user and eventual alternative paths.

Here you will find a couple of stories on UX Flows I wrote:

Differences

User Flows focus on a path often actions to perform. Makes easy to validate if the solution’s processes are complete. User Flows make the solution easy to understand to the team almost instantly.

UX Flow may not be linear — it contains decision nodes, paths, modes, and loops that show all possible interactions with the product.

Usually flows do not focus on users feeling or multiple layers of the solution. Their main purpose is to visualize the flow through the solution.

Journey Maps focus on more on the experience of the customer, try to detect pain points or moments of delight. They may focus on different aspects of a solution, not only the mobile app but also the back-end server.

While User Flows have got more formal rules (probably because their flowchart origins), Customer Journey Maps are very various. There are examples around the web of maps that are very different from each other.

Sample User Flow

How to engage them in design process

Many times I have been asked a question, what to do first — User Flows or User Journey Maps? Well, my answer may not be very original — it depends. :)
 
If you have an existing solution, I think that you should first map the paths by creating User Flows. They will be the elevation for building existing customer journey map. This map will help you detect existing pain point and to eliminate them. Remember to detect also moments that user love, to maintain them or even make them better.

When you begin to create a fresh solution. Collect requirements, the user needs and write user stories. Think first what user should do to accomplish the task. Then it is good to create a journey map. The map does not need to include wireframes yet so it is a plan that will help to build them in the next step. After wireframes or mockups creation UX Flows will help you to validate if the path will be correct or if there is a still chance to make it better.

In just a few words:
I recommend creating Flows first if you have the existing solution. If you are starting a fresh project, try to build user Journey Map that will be later validated by User Flows.

I have found User Flows very effective when it comes to the communication with client. The flowchart is well understood by people not related to the design industry. However, Journey Maps are sometimes hard to read by clients, so it is sometimes risky to revel them without earlier explanations.

How to create User Journey Maps and User Flows

I love to use the tools that make the creation of the particular deliverable efficient.

When there is a need to create Journey Map during brainstorming or analysis meeting I prefer to use sticky notes. They are easy to change order or replace one with the more accurate idea.

If I have to create one digitally, it is easy to make one in a spreadsheet.

User Flows creating during the meeting are off course whiteboard sketches. However, this deliverable is definitely worth to be made elegantly in a digital tool. For this purpose, I use Sketch app, which is surprisingly very convenient to create various UX deliverables. To make the whole process even more efficient I built a toolkit for UX Flow creation — SQUID. Thanks to the library I am able to make User Flows stylized to the project branding in minutes.

If you would like to get this SQUID UI Flow Template for Sketch you should know that there is a special 15% discount for UXMisfit.com newsletter subscribers. To find more how to use the toolkit feel free to read the following guide:

To conclude

User Flows and Customer Journey Maps seems to be similar deliverables. They both try to figure out how the user will interact with the solution. However, they focus on different aspects of a created products.

It is worth to create both during the design process. The complementary deliverables will ensure that final solution will have better UX. However, there is no simple answer which should be created first.

If you enjoyed the Story do not forget to 👏👏👏.


I know that creating Journey Maps and User Flows may be a time consuming process.

Time is a very precious asset for us — Designers. This is why beside writing UX articles I build time-saving design tools to make you a better and more efficient Designer.

SQUID UI Flow Template for Sketch helps hundreds of creative professionals to make elegant User Flows in a few minutes.

THE ICONIC — is world’s first App Icon Compendium. It includes Premium Templates for Sketch, Quality Checklists, and Validation tools so you can quickly make assets perfect.

Subscribe UXMisfit.com (and get some discounts)
Follow me on Medium
Follow me on Twitter

Like what you read? Give Thalion a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.