Day 13: User Flow Diagrams

Susan K Rits
Jul 29, 2017 · 3 min read

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.)

No need to get fancy. These are all the symbols you’ll need to make a good user flow.
Here they are in action. This is the user flow to find a movie on Flixter. Notice, this is only one goal a user might have with Flixter. There are other goals and so other flows.

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:

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.

100 Days of Product Design

TUTORIALS • EXAMPLES • PROJECTS • RESOURCES

Susan K Rits

Written by

Founder: 100 Days of Product Design, Imprintli Publishing, ChicoButter and Rits&Co.

100 Days of Product Design

TUTORIALS • EXAMPLES • PROJECTS • RESOURCES

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade