When you need to understand how a user will go through your product or feature you should always start with high-level user flows. User flows help determine how many screens are needed, what order they should appear in, and what components need to be present.

Understand your users

Before you get to this stage you should have some solid user research done and understand the pain points you are solving or the solution you are providing. This will help you define a user story or an epic to base this flow on.

Some of the other techniques used for user research include empathy mapping, user interviews, and needs statements.

You can make the user flows to align with user stories or you can create them for new features or even entire products. Usually applying a set of user stories will mean you are catering for all scenarios. You might have one primary user story that then has several smaller ones that lie underneath it.

‍

What’s the difference between user flows and user journeys?

User flows are normally boxes and arrows, they follow the steps or stages a user takes through a given feature set or objective.

User journeys are based on one user’s journey through your product, they are usually more high level and contain an end to end experience. User flows are used primarily for new features and ideas and go into task breakdown.

User journeys are best created by your entire product team via a workshop and contain information on key stages, user goals, screens, pain points, insights, and ideas. This article will focus on user flows, you can see an example user journey below.

‍

‍

High-level user flows

We use high-level user flows when we are first starting to plan an idea. It gives an easy overview of each stage of the user’s process without digging too much into the detail. An example of a high-level user flow might look like this.

High-level user flows usually follow the primary user story or red route. Once you step into the detailed user flow you can then cater to other scenarios and user stories that are more of an edge case.

For high-level user flows we use a start and end circle followed by rectangle steps. We purposely keep it very simple and high level to get a quick idea of the user flow to help validate our ideas.

I use Miro to create all my user flows, I start with a template that has a simple key outlining the different UI elements to use. The team can use this as a base to create their own user flows along with a written guide. I have attached a sample jpg template you can use.

‍

You can also of course use a whiteboard to capture the flows with your team and then capture them with your camera afterwards.

‍

Detailed user flows

Detailed user flows or sometimes called task flows dive into the detail to understand all the steps and decisions a user needs to make to go through your idea, feature, or product. Doing this helps us really understand all the screens and states that need to be designed and considered in the process.

We use Miro to create the user flows, you can sign up for a FREE account with Miro here.

‍

Start and Finish

Always have a green start and a red end element, this helps you show clearly where the journey starts and ends. Be sure to outline at the start where the start point actually is. For example, it could be your product home page, a profile page, or a Facebook advert.

Rectangle steps

High-level stages can be represented by a simple rectangle.

Decision diamonds

If ever the user needs to make a decision to move through the flow then we use a decision diamond where yes takes us forward and no takes us back to another step. It’s good to use green for yes and red for no to show the different routes clearly.

Data input elements

We use a slanted square for text input, this is used when a user needs to actually input text or data into a form.

System actions circle

Using a checkered circle for system tasks is a way to differentiate them from user tasks. When there is something the system needs to do based on a user action then it makes sense to show that on our user flows.

Select elements

For detailed user flows it is often helpful to show when a user actually needs to make a selection on a button or similar, using the select rectangle we can see how many actions the user needs to take.

Icons

You can also use icons to show detail around some actions like an email being sent, a google advert, or a website icon.

Wireflows

If you have sketches or wireframes already prepared you can also use them to create user flows, they can show even more detail and specifics on the design. They would usually be the step after your initial user flows and would use your low fidelity wireframes.

Page screenshots

You can also use screenshots to accompany user flows if you are showing screens that already exist in your product or website.

What’s the value of user flows?

User flows are part of your final deliverables and help stakeholders understand the value of the idea and understand how they affect the users though process and actions. Keep in mind that user flows are often revisited and edited so you will always be updating them and keeping them current.

Once you have good user research and understand your pain points and business objectives you can begin to map out user flows. Start with a high-level one and then progress into a detailed user flow (task flow) that should eventually lead to a low fidelity wireframe and wire flows.

Have a go at making one and let me know how it goes! Feel free to reach out on hello@userxd.co

Written by Daniel Birch - Founder of UserXD

‍