top of page
Writer's pictureJoel Loo

5 Types of UX Flow Diagramming

As a designer, these are the five main flow diagrams we probably might come across during our design process. Namely, Task Flows, Site Map, Navigation Flows, Wire Flows and Experience Map. I wanted to create a more defined distinction between these flows and when to use each flow. Below is each flow in detail with Spotify as a reference.


 

1. Task Flow

A task flow is a visualisation of specific key steps the user must undertake in order to accomplish a particular goal in your product.

Task flows help content marketers and business strategists balance brand goals with customer needs to increase engagement, conversion and brand awareness by defining the “jobs to be done” and the playing pieces as user travel through the product.


How to do it?


It is easier to start thinking in terms of the user needs before going into the actionable sequence that user takes. Observe that these are important, un-missable tasks that a general user requires to take, for example, when engaging with a music app.



Next for that particular user task, try to define the necessary steps needed to acheive the goal of the task. Observe that no matter the type of product/service provider, the user actions should largely remain applicable as they are the core user need. It is okay if the single user task flow does not reflect exactly how the information is laid out in the platform (covered in site map).



 

2. Site Map

A site map is a hierarchical organisation of information within the product.

Site maps help developers and product owners organise and locate where large complex contents should sit for users to be able to digest easily and quickly.


How to do it?

It is easier to start thinking from the navigation tab as that is where product teams classify and group their contents. Consolidate and group the various pieces of information in an organised order. You may use similar colours for related components.


Organise and group information together based on what your user understands the best. Ensure there are no repetition. Observe that similar elements can be similarly color-coded or by creating a more generic header for similar information categories using <>. Avoid thinking in terms of user interactions or be confused with navigation (covered in navigation flow).


 

3. Navigation Flows

A site flow shows the navigation that a user will go through as they accomplish their tasks in the site. A user flow is a single streamlined & linear version that focuses on specific user task and action. A process flow details the user’s action by highlighting their thinking and decision points.

Navigation flows assist UX designers and developers in coming up with intuitive & useable processes for users to complete the tasks efficiently by working around potential errors and creating linkages.


How to do it?


Firstly, it is important to set certain rules on how you want to use various elements and what they are going to represent.


Comparing with Site map, Site flow lay out the navigation through each screen that the user goes through. Observe that each “site information” is broken up to show the paths that user takes through the site.


A user flow can be build by firstly identifying how user flows and navigates through your system in order to get to their objectives. Observe that this focuses on a specific user task and maps out every interaction point the user takes within the site.


Comparing with user flow, Process flow identifies all the potential decision points and re-occurring steps within the user flow. Observe that similar elements should use the same color-coded to show its within the same page and keep actions/decisions a different color. Avoid dependency on the actual screen interactions (covered in wire flow).


 

4. Wire Flows

A wire flow visualises the navigation flow using visual screens to depict and pinpoint the user interaction and actions within the product.

Wire flows help designers have a clearer picture of the specific interactions each pages to streamline any complex or messy flow links.


How to do it?


Before you start, prepare the necessary wireframes or screens you need. Think and plan how you want to map the interactions by drawing the user path between screens.


Be specific and highlight areas where users might possibly interact as they move from one screen to another. Observe that interactions are clearly linked and described, rather than a screen by screen flow. Avoid external user decisions (covered in experience map).


 


5. Experience Map

A journey map is a visualisation of the process that a person goes through in order to accomplish a goal, coupled with their thoughts, pain points and emotions in a narrative storytelling format. A service blueprint encompasses more with various external stakeholders, backend system and touch points.

Experience map help business leaders gain insights into customer touch points to optimise and personalise customer experiences to lead them to conversion.


How to do it?


Before you start, you need to have gather sufficient insights and understanding of the customer’s emotional and product needs along the journey process. This can be done through research or user testing.

Identify each phase of the user process through the experience of getting to their objective, mapping one by one the emotional experience and their activities too.


Comparing with Journey Map, Service Blueprint shows the interconnection between backend or other stakeholders.


 

Comments


bottom of page