Use this template to visualize the flow of how a user interacts with your product. By visualizing the steps and relationships between user interactions, the user flow template helps product managers and designers stay on the same page.
Think of the user flow as a visual way to describe requirements and dependencies that inform the experience of your product. In short, a user flow makes the job of a designer easier, which makes for a more symbiotic relationship between product and design.
The user flow template helps you:
- Visualize the flow of the user experience inside your product
- Get aligned across product and design teams
- Identify any problem areas or confusion, allowing you to quickly iterate
How to use the user flow template
Before starting a user flow, you should have a clear understanding of the user’s objectives.
This will help in clearly defining the steps of a user flow that makes the user’s experience as smooth and valuable as possible.
Ask yourself these questions before starting your user flow template:
- What is the user’s goal?
- What information or features does the user need?
- What roadblocks might appear during the user’s experience?
1. Identify actors
To start, place each actor onto a separate sticky note. Actors are identified as anyone or anything that will interact with your product, for example, a user, a system, or an organization.
Once your actors have been identified, use the bullseye diagram to prioritize actors. Each sticky note with actors should be individually placed closer to the bullseye center the more relevant it is, or farther from the bullseye center the less relevant it is. This will give you insight into where to start your focus.
2. Collect information
Once your highest priorities are identified, gather information and discuss how each actor will find and use your product.
A good practice is to start with the goal or objective you want your actor to achieve. Then, work your way back to understand how they got there.
Here’s an example with the questions you should ask:
- How will the actor get from the channel to their objective? Actor needs a t-shirt, opens a clothing brand app, goes to the product page, looks at customer reviews, and proceeds to the check-out page.
- What channels will the actor use to discover your product? From a homepage website
- What does your actor want to accomplish? Buy a t-shirt
3. Map it out
Once the channels, actions, and objectives have been defined, move each element to the “map” section with connectors to illustrate the flow of actions.
In these steps, you can also add shapes and colors to represent logistics and complete the flow.
In the example below, you can see how each action connects with another until, eventually, the actor reaches the objective — buying the product.
4. Share feedback and collect ideas
Once the user flow template is complete, you will have a visual map to illustrate the user flow to any relevant stakeholder. With this visual aid, you will be able to gather helpful feedback from designers, engineers, developers, and any stakeholder.
This step is important as it will enhance your user flow and make sure everyone is aligned with the same goal and vision for the product or service.
Tips for running a user flow template workshop
To get the most out of the Mural user flow template, courtesy of our friends at Product School, you should:
Personalize the user flow to your needs
With Mural’s user rlow template, you can easily personalize the user flow diagram to suit your needs.
Whether you need to differentiate tasks by colors or represent different teams with icons, Mural’s templates offer the flexibility your team needs to quickly find where they should focus their time and show how their responsibilities affect the rest of the user flow.
Keep meetings on track with the timer feature
Make sure your user flow meetings are running smoothly and on time with Mural’s timer. The timer is visible to every participant and helps ensure that the meeting is running at a good pace.
Tag your team members with their responsibilities
Keep every team member accountable and on track with Mural’s tags. This feature helps delegate responsibilities as well as adds a layer of transparency for team members to know who to ask for help or progress reports.
