What is a User Flow?

A User Flow is a pathway detailing the steps a prototypical user would take to accomplish a task or set of tasks. The flowchart maps out each action or decision a user makes along the journey between their entry point in an app or website to the final action. User flows help designers decide which features and types of content are necessary for users to accomplish their goals effectively, leading to a great user experience. The purpose is to find the primary user flows through your product and decide how you can improve the app or website.

Photo by Christina Morillo on Pexels.com

There are a few questions you can use as a starting point to develop a detailed flow chart, including:

What is the user’s goal?
What does the user consider important?
What else might the user need to reach their goal?
What hinders the user from completing their task?

The answers you come up with will help you decide what content, features, and functions would most benefit your target users. Since there are many paths each user can choose, user flows are designed as flow charts with nodes for each major decision or action.

How to Create a User Flow

Understand Your User

Identify your users’ needs, motivations, and problems. Think about all the paths your user could take to navigate the app or website. Consider potential distractions and hindrances your user may be struggling with. Empathize with your target user to understand their perspectives, situations, and priorities. Anticipate what information the users will need for your product, such as an e-mail address or phone number.

What features would be most beneficial to users?
What additional information will your users need to interact with your design?
What initial questions or first impressions do users have about the product?

Create a Flow Outline

Photo by Startup Stock Photos on Pexels.com

Simplify your flow chart into three stages: the user's entry point, steps taken to complete a task, and the final steps or interaction with the product. Entry points identify how the user initially accesses the website or app. For most apps, the entry point is either the app store or the downloaded widget on a mobile device. Some entry points might include a link through an article or some advertisement.

Once the user has entered the product, what steps will the user take to accomplish their goal? These may include login or signup screens, a homepage, navigational links, etc. The key here is to make the overall process as simple and intuitive as possible. Each action should be essential to task completion. The final interaction defines what the user will see once they reach their goal.

Refine Your Outline

Consistency is key for presenting a thorough and coherent user flow. Arrange elements in your flow chart rationally, using consistent shapes and lines to represent user processes. An attached key or legend offers readers adequate labels or explanations for the applied shapes. Labeling your user flow ensures viewers understand the purpose of each node on the flow chart. You can also utilize colors for coding the flow chart rather than styling.

Common Flowchart Symbols

Understanding the most commonly used flowchart symbols helps create a universal user flow. Still, a legend accompanying the user flow helps viewers interpret the flowchart. For example, the entry point is generally an oval, but the most common symbol is a rectangle to represent an operation or process.

Terminator

Taking an oval shape, a terminator defines where your user process starts and ends. You can include words such as Begin, Start, or End within the oval shape to clarify the use of a terminator.

Process

A rectangle represents a process, action, operation, or task. Generally, text used in the rectangle includes a verb to define the process at hand.

Decision

A “decision diamond” is the second most common symbol in user flows. The diamond represents decision moments where users are required to answer a question. Potential answers are depicted as lines with arrows pointing out of the diamond, accompanied by a short descriptor. A line from the bottom of the diamond represents yes or true, while a line from either side corresponds to no or false.

Data (I/O)

A parallelogram shows data inputs to and outputs from a process.

Document

The document shape is a rectangle with a wave-like base representing a report or document in a user flow.

Direct Data

This object takes a shape similar to a computer’s hard drive and represents stored information that can be accessed directly.

Manual Input

Manual input shows where users must manually input information into the system. The shape used for manual input is a rectangle with the top sloping up from left to right.

Subroutine or Predefined Process

This shape is used for a subroutine in a software program flowchart, so you can write one subroutine and call it anywhere in the code. The same shape represents a predefined process which means the flowchart for the predefined process is already drawn.

While it's wise to utilize standard symbols, you can opt for alternative symbols if you depict them clearly in an accompanying legend. Using consistent arrow flow, shapes, and lines clarifies meaning and helps your viewers understand the flowchart easily.

Owasso Companion

App Functions:

View upcoming events
Current / updated news information
View community information, including:
- Elections
- Boards and committees
- Recreation
- Schools
- Weather
- Medical Centers
View resident policies
Sign up for utilities and trash services
Pay utility bills and trash services
Report concerns and incidents
Find departments and emergency services
View service charges to utilities and trash

Target Audience

New residents, long-term residents, and returning residents.

Needs and Goals

View updated current events, community elections, boards, and committees.
View utility and trash bills, services, and information.
Allow notifications for upcoming events, payments, and elections.
Report concerns and incidents.
Find and contact departments.
Pay utility bills and services.

User Story 1: Mackenzie

As a returning resident, I want to sign up for utilities and trash services at a new address.

Mackenzie grew up in Owasso but left for her bachelor’s degree. She returned after graduating, so now she needs to set up utilities and trash services for her new address. She also wants to view and pay for these services from her phone in the future.

As a recent graduate with a new job, Mackenzie is often busy with work and meeting with friends. So, she wants to receive notifications on upcoming payments and service changes.

User Story 2: Margaret

As a long-term resident, I want to view election information, meeting agendas, and meeting minutes.

Margaret moved to Owasso with her husband when they retired to live in a more suburban area. She’s involved with some of the local boards and committees and loves to stay up to date with current events in the community. She wants to view recent and upcoming election information, meeting agendas, and meeting minutes between her own committee meetings.

Margaret also wants notifications for certain elections and meetings, but she wants to filter out notifications that don’t pertain to her.

User Story 3: Michael and Melissa

As new residents, we want to look at family-friendly community events so we can meet new people with our kids.

Michael and Melissa recently moved to Owasso with their two small children. They’re looking for ways to meet other parents of young children and engage in the community. Michael works for a company in Tulsa, but he and his wife moved to Owasso to raise their kids in a more family-friendly community. Melissa is a stay-at-home mom, so she also wants to find activities for other stay-at-home moms.

Melissa has lots on her plate with a two- and four-year-old and gets easily distracted, so she wants to favorite events to view later and set reminders. She also wants some flexibility in event schedules because her toddler can be unpredictable.

Owasso Companion User Flows Download

Owasso Companion: Creating User Flows to Build a Community App