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.

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.

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.