User flow tutorial | How I use them in design projects

Summary

In this video, Christine explores the concept of user flows, breaking down their importance and how designers use them in the design process. She explains that user flows represent the steps a user takes to achieve a goal, with key components including the user, their goal, and the steps to achieve it. Using an example of an instant payment feature for Instacart, Christine demonstrates how user flows help in designing and communicating features effectively. The video also includes a practical exercise for viewers to create a user flow for adding a debit card before using the instant payment feature.

Takeaways

• 😀 A user flow is a series of actions a user takes to achieve a specific goal, consisting of three key components: the user, their goal, and the steps needed to reach that goal.
• 😀 User flows help communicate design intentions to engineers, product managers, and other stakeholders from the perspective of the user, preventing the focus from getting lost in technicalities.
• 😀 Designers often create user flows at the beginning of projects to lay down a solid foundation for design and understand how a feature will work for users in real-life scenarios.
• 😀 User flows are useful for clarifying the interactions of different screens and guiding the development team, ensuring that the design supports the user’s needs and goals.
• 😀 Task flows are part of a user flow and break down the specific steps a user must take to achieve their goal (e.g., cashing out earnings).
• 😀 Wire flows are low-fidelity wireframes that visualize a user’s journey and highlight missing steps or edge cases in the flow.
• 😀 Real-life projects, such as the instant payment feature at Instacart, require user flows to manage complex use cases and guide designers and engineers through the process.
• 😀 Creating user flows early in a project ensures all potential use cases are considered and that there is clarity about how users will interact with the system.
• 😀 User flows help teams stay focused on user-centered design, avoiding distractions like technical jargon or conflicting stakeholder opinions.
• 😀 Designers can use tools like Overflow to create high-fidelity user flows that annotate each screen’s actions and describe what happens at each step.
• 😀 The practice exercise encourages viewers to create a user flow for a specific use case, helping to solidify their understanding of how user flows are developed and applied.

Q & A

What is a user flow?

A user flow is a series of actions a user takes to achieve a specific goal within an application or platform. It includes identifying the user, their goal, and the steps needed to complete that goal.

Why do designers use user flows in their projects?

Designers use user flows to communicate the user’s journey to engineers, product managers, and other stakeholders. It ensures that everyone on the team is aligned with the user's goals, and helps in avoiding confusion that can arise from technical jargon and requirements.

When is the best time to create user flows in a project?

The best time to create user flows is during the beginning of a project, particularly when laying the foundation for design. They are most helpful when designers need to visualize how a feature translates into real-life scenarios with the user in mind.

What are the three key components to define in a user flow?

The three key components are: 1) Who is the user, 2) What is their goal, and 3) What steps must they take to achieve that goal.

Can you give an example of a real-life project where user flows were crucial?

In the example of the instant payment feature at Instacart, user flows helped clarify how users (shoppers) would access and use the feature to cash out their earnings. This was particularly useful in guiding developers through different use cases and edge scenarios.

How do user flows help with project requirements and technical details?

User flows help by focusing the team on the user’s experience rather than getting lost in technical jargon or project requirements. They provide a clear roadmap of how users will interact with the system, keeping the user's goals front and center.

What is the difference between task flows and wire flows?

Task flows are step-by-step visualizations of how a user completes a task, such as transferring money in an app. Wire flows (or wireframes) are basic visual representations of screens that help sketch out how the user interacts with these steps, typically in low fidelity before moving to higher fidelity designs.

How are task flows created and what are the main considerations?

Task flows are created by identifying the key actions a user takes to complete a task. Designers typically start with pen and paper to jot down high-level steps. Important considerations include where the user accesses the feature, what actions are needed at each step, and potential edge cases.

What role does competitive analysis play in creating user flows?

Competitive analysis helps designers understand how similar problems have been solved in other apps. For example, Christine looked at apps like Venmo and Uber to examine how they manage instant payment features. This helps inform and refine the user flow by considering best practices from other platforms.

What tools can be used to create high-fidelity user flows?

Tools like Overflow are often used to create high-fidelity user flows. These tools allow designers to annotate and visually represent the steps of the user flow with clear descriptions of each interaction or screen.