User Flows

Introduction to User Flows

Understanding User Flows

A user flow is the path taken by a typical user on an app or website so they can complete a task from start to finish. The goal is to map how users achieve a specific goal as they move through a product.

User flows provide a clear overview of the product’s functionality before the design process begins. They help you anticipate user needs by using information learned through research to identify what users will need when interacting with your product.

Note

Key Purpose: User flows don’t include polished content that will appear in the final product. Instead, they include shapes that represent different interactions.

User Flow Elements

User flows use common shapes to represent different interactions. While these shapes don’t always have universal meanings, here are the standard interpretations:

Basic Shapes and Meanings

• Circles: Indicate the actions users take when moving through a product design
• Rectangles: Indicate the screens of a digital product that users will experience while completing tasks
• Diamonds: Symbolize the decisions users make and either move them forward through the flow or back to an earlier part
• Lines with arrows: Provide direction through the user flow based on each user’s decision

User Flow Components

Action (Circle): Steps that must be taken to complete a task from start to finish

Screen (Rectangle): Pages users will experience, like homepage or booking confirmation

Decision (Diamond): Points where users must ask a question and make a choice

Direction (Lines): Solid lines indicate forward direction, dotted lines indicate backward direction

Creating User Flows

Before designing screens of an app, you need to understand how users will move through the app overall. You need to determine:

• What actions will users take in the app?
• What decisions will users make?
• What screens will users experience after taking action or making a decision?

User Flow Example: Dog Walker App

Here’s a practical example of a user flow for a dog walking app:

1. Circle: User opens the app
2. Rectangle: Homepage screen appears
3. Circle: User chooses to browse dog walkers
4. Rectangle: List of available dog walkers screen
5. Circle: User selects a dog walker
6. Rectangle: Dog walker profile screen
7. Diamond: Decision - book this dog walker?
   • Yes arrow: Goes to appointment confirmation screen
   • No arrow: Returns to dog walker profile screen

User Flow Best Practices

Focus on User Needs

• Reference your problem statement to ensure designs address user needs
• Consider the entire journey users take to get what they need from the product
• Anticipate user needs before they recognize those needs themselves

Plan for Multiple Scenarios

• User flows can change based on user needs and circumstances
• You don’t need to create flows for every possible scenario
• Focus on flows that address the needs the majority of users will face

Consider Existing vs New Products

• For new products: Create completely new user flows from scratch
• For existing products: Update or reorganize established user flows based on thorough user research
• Screens can be reorganized, expanded, or trimmed to better meet user workflows

From User Flow to Design

User flows serve as the foundation for your design decisions. They help you:

• Picture how users will move through the app or website
• Understand what screens and interactions are necessary
• Identify potential gaps or missing functionality
• Plan the structure before moving to wireframes and prototypes

Tip

Remember: Users and their needs must be at the forefront of the product’s design. Creating user flows with knowledge of your user’s needs will make you a better designer and keep users engaged in your product.

The user flow becomes your roadmap for creating wireframes and prototypes that truly serve your users’ needs and goals.