A user flow is the path that users take on your product when completing a specific task (such as when first signing up or making a purchase). The goal of a user flow is typically to gather information or encourage an action.
User flow diagrams are a visual story of the actual user interface, and are helpful in storyboarding and wire framing. Steps in the user flow diagram are often depicted in a flowchart with simple shapes and UI mocks. User flows can be especially helpful for product managers when illustrating new features to non-technical stakeholders.
The best user flows capture more than just the individual steps ー they also identify areas of positive or negative emotions. Customers go through an emotional journey as they interact with your product that either inspires or depletes them. As a product manager, understanding the emotional impact of each step in a user flow can help you know where to focus your efforts.
Ready to create a user template? Start by copying this doc, then follow the steps below.
How to build a user flow
Step 1: Sketch the flow
Start with a rough sketch of the flow on paper, a physical whiteboard, or digital whiteboard tool like
. Use general shapes and arrows, but don’t worry about creating high-fidelity mocks or wireframes. At this point you’re just focused on the steps in the user flow.
When you’re finished, paste the flow here:
An example of a user flow sketch:
Step 2: Turn the sketch into a storyboard
Now, turn the basic shapes into a storyboard with rough wireframes of what the actual screens might look like to the user. Remember, these don’t have to be designed perfectly.
After you’ve created a storyboard, add it below:
User signup flow
Load content from app.mural.co?
Loading external content may reveal information to 3rd parties. Learn more
You can embed a live MURAL directly in this doc to see updates in real time.
Step 3: Stakeholder feedback
You’re now ready to get feedback on the storyboard with relevant stakeholders (customers, teammates, or a product designer). It’s a good idea to go through this process early and often to make sure you’re aligned as plans and designs change.
Share this doc with stakeholders by clicking share at the top of the page.
Uncheck the box below to hide everyone’s responses. This prevents group think bias.
Walk stakeholders through the storyboard and ask them to leave sentiments below.
When you’re ready to discuss as a group, uncheck the box to show everyone’s reflections.
Add your sentiment
Check to show everyone's pulse check (
submitted. Average pulse check of
How do you feel about this user flow?
Love the sign up form!
I would rather take this in a different direction
The landing page CTA is great, but can the color be orange?