
Day 13: User Flow Diagrams
Now that you have a task list, let’s turn that into a flow diagram to show how the user will move through your website or application.
What it is.
User flows are a communication tool to help the product team talk about the functions of the application before they have to build it. They show all the tasks your user has to complete in order to reach her goal, just like the task list, but using symbols and directional arrows that are the beginning of your user journey through your application.
How it’s used.
User flows can be elaborate or very simple. What kind of flow you create depends on what kind of conversation you’re having since they change constantly as the application evolves. If you’re brainstorming with your product team you’ll probably want a simple sketch on a whiteboard that you can quickly erase and rewrite. If you’re presenting the user flow to the executive team, then a detailed flow that uses symbols and diagrams created in LucidChart is a better option.
Discussion.
Think about your favorite mobile app. What is your goal when you open it? What steps do you have to take to reach that goal, and what screens and buttons do you see while you take those steps.
That’s your flow through the application. That’s a user flow. Every application has at least one flow, and likely has many flows depending on the many goals a user might have in using it.
How to do it.
What do user flows look like? Well, they look like boxes with arrows pointing from them to other boxes. (There are other things called wire flows, in which the boxes are wireframes. We’ll get to those later.)


Some real-world examples:
Keep in mind…
The hard thing about user flows is keeping to the point. It’s easy to start showing all the choices and all the screens in an app. But that’s not the point. You want to show one path to the user goal.
Later, you might show another path, or combine flows to show what happens when the user does something different.
Your assignment.
Take your task list from yesterday and turn it into a user flow.
Use the list of user tasks you wrote yesterday for your app and turn that into a user flow:
- State the goal
- Use the symbols to show screens, user decisions
- think about where the user starts and ends
- Don’t diagram anything more than what the user does.
Deliverables.
Create a pdf and share your flow in the comments and/or on Dribbble and Twitter #100daysdesign.
Originally published at 100days.design on July 29, 2017.

