Flowing Through the Design Process

What is a User Flow?

User flows are a tool that can be utilized in the design process for a website or an app. They help the designers clarify and understand the user’s decision-making process as they move throughout an app or website by breaking these decisions and actions down to their most basic components. Author Avishek Nayak explains, “User flow is a process or path taken by a prototypical user on a website or app to complete a task. The user flow takes a user from an entry point through a set of steps towards a successful outcome and final outcome and final action, such as completion of order.” In simple terms, a user flow is a mapped-out version of the path or set of actions a user takes within an app or website from the beginning to the end where they ideally complete their goal. They are typically developed within the early stages of product development to provide clarity and understanding to designers and developers.

What are the Benefits?

There are many positives to developing user flows for your project. When designing with a team, not all team members may understand all of the potential paths that users could take, and a user flow will aid in that understanding. User flows provide an oversight of all possible decisions and paths a user could take, so the entire team is on board when designing for each path. The article, “What is a User Flow – Everything You Need to Know” explains, “If you share the prototype, you cannot be sure that everyone checks all the included paths. User flows reveal all the paths in a single picture.”

Additionally, user flows are a simple way to create a visual aid for all team members to see and understand. They are quick and easy to create and do not require much time and effort, and they are also simple to follow.  They are not bogged down by extensive amounts of information but are typically a simple web of shapes and arrows. “User flows are the fastest way to visualize the process. You may even create them directly in your design tool. There is no need to jump between other applications…Everyone understands black, mockups with arrows. It is a magical deliverable that easily explains relations in the designed solution” (“What is a User Flow – Everything You Need to Know”).

Where to Start

Though user flows are usually utilized within the initial stages of product development, typically an information architecture and user stories and scenarios are created prior. This information can be extremely helpful when creating your user flow. Having an existing information architecture can help to structure your user flows, and the additional context provided by user stories and scenarios can help with the decision-making process included within them. 

Author Camren Browne explains that the first real step of creating a user flow is to understand your users. “Consider all the ways your user could potentially navigate through the site or app so you can identify key pathways.” Information architectures can help you understand all of the possible avenues a user can take throughout your product. After you have done so, you can begin mapping out the decisions and actions a user makes when using your product that bring them from the starting point to the endpoint. Be sure to label each step and identify each path clearly so that anyone on your team can understand the process.

User Flows in Practice

In the past few weeks, I have been developing a companion app for the Roscoe, NY website. This week I focused on identifying the app’s purpose as well as its functions and the target audience that would be interacting with it. I also named the app Know Roscoe.

This is the information architecture I had previously developed for the Know Roscoe companion app.

The purpose of this app is to be a source for locals and visitors to access when looking for what Roscoe, NY has to offer. The goal of Know Roscoe is to provide users with a resource to know what events are going on and allow them to become involved in the local community.

The functions of the app will include:

–  Access calendar of events in local community

–  Read Roscoe’s recent news stories

–  Access information on entertainment and recreation opportunities

–  View a directory of local businesses (shops, eateries, lodging, services)

–  Read through a guide for visitors

The target audience for Know Roscoe would be residents that want to be more involved in their community events as well as visitors looking for tourist and entertainment opportunities in the town of Roscoe, NY.

Know Roscoe will meet the following needs/goals of the target audience:

–  Users will have easy access to information regarding local events

–  Users will have a better understanding of entertainment opportunities

–  Users will become more involved in the local community

–  Users will have access to a directory of local businesses

–  Users can quickly and easily access the most recent local news stories

The Story and Scenario of Rick Powers

This is one of the ‘users’ of the Know Roscoe app, Rick Powers.
Story

As a long-time resident of Roscoe and a recent retiree, I am looking for new ways to become involved with the local community. I want to be able to have the most up-to-date information on the events happening in Roscoe.

Scenario

As a long-time resident of Roscoe, Rick has a great understanding of the opportunities the town has to offer but does not know how to become involved. Rick is looking for more ways to become involved in the Roscoe community. Because he is recently retired, he has a lot of free time on his hands and would love to keep busy. He would love to attend the events that are held in the Roscoe community center but he doesn’t always know when they are held.

Rick’s User Flow

This is what Rick’s user flow would look like based on his goals and desired outcome of using the app.

Based on Rick’s story and scenario, I mapped out potential paths that he could take in the Know Roscoe app to complete his goal. You can see that each decision is accompanied by a yes or a no option. This is where the user, in this case, Rick, would decide whether or not he would choose to take that specific path and where it would take him if he did or did not. 

In Rick’s user flow, the circles represent a starting point and an endpoint, diamonds represent decisions, and rectangles represent actions.

Final Thoughts

User flows are extremely helpful in providing clarity to designers and help with the decision-making process of whether or not there are too many steps to get to the desired goal, certain features are unnecessary, the organization of the app is confusing for the user, etc. For such a simple tool, they can provide designers and their teams with a multitude of positive outcomes and benefits. If you are looking for some clarity, or even to learn a new skill, give user flows a try!

Leave a comment