User Flow

A user flow is a type of flowchart diagram that maps out the path users take to complete a task on an app or website. Central to the world of user experience (UX), the purpose of a user flow is to optimize the efficiency of a given design.¹ If you look below, the sample user flow diagram looks similar to a standard flowchart you have probably seen before.

User Experience (UX): The overall impression and satisfaction a person has when interacting with a product, service, or system, encompassing aspects such as usability, accessibility, and emotional response. 

User Journey Map: A visual representation that encapsulates a user’s entire experience with the digital product or service. This tool helps designers navigate users’ emotions and thoughts during their interaction with the computer to refine the system.

Flowcharts: A visual representation of a process or system that uses standardized symbols and arrows to illustrate a sequence of steps, decisions, and a flow of logic. 

The development of the user flow diagrams can be traced back to the 1920s when flowcharts were first invented. Industrial engineers Frank and Lillian Gilbreth presented what they called “flow process charts” to the American Society of Mechanical Engineers (ASME) in 1921.³ Their intention was to use the flow process charts to graphically represent a work process in order to identify areas that can be optimized to increase efficiency. These charts rapidly became an important tool in the mechanical engineering industry to help structure work processes.

From then on, flowcharts have been extended to numerous industries for various purposes.⁵ You have likely encountered one before. The UX world adopted the flowchart into what we know as the user flow diagram today. 

But how did the user flow diagram come to be? Before the digital era, users’ interaction with the computer were mapped onto conceptual models. These models relied on diagrams to illustrate the flow of information and action within a system, laying the groundwork for future user flow diagrams. The rise of the internet led to the use of diagrams to map users’ navigation within a digital interface. As technology became more advanced, we saw the joint sophistication of user flows, increasing in dynamism and complexity.

In the 2010s, the widespread emphasis on user-centered design has made user flows a vital tool for designers to comprehensively view the user experience in a step-by-step level of detail. Since then, AI has revolutionized user flows. They have evolved into interactive diagrams that simulate user interactions in real time. Tools like Sketch, Adobe XD, and Figma enable designers to create and iterate user flow diagrams more efficiently.

Frank Gilbreth: An American industrial engineer and pioneer in the field of scientific management, and time and motion studies. He, along with his wife Lillian, made many significant advancements in the industrial engineering field by focusing on enhancing efficiency in the workspace. They were the first to introduce flowcharts as a productivity tool. 

Lillian Moller Gilbreth: An American psychologist and industrial engineer who led advancements in the field of industrial and organizational psychology. Moller and her husband, Frank, were frequent collaborators who applied their respective expertise to improve workplace efficiency. Together, they introduced the flowchart as a tool to help structure work processes in the mechanical engineering industry. 

Considering that the goal of UX design is to create meaningful and enjoyable online experiences for users, one way to achieve this is to make their experience as efficient as possible. In other words, users should be able to achieve a desired action in a minimal number of steps. This is where user flows come in, ensuring that the app or website provides the necessary information to convince users to take particular steps to complete the interaction efficiently. Here’s how:

Firstly, user flows reveal how users navigate the app from their perspective.⁷ Taking a step back from the designer’s point of view provides objective insight into how the app is performing for others. We often assume that the products we design are intuitive because of our familiarity with them, but it doesn’t mean that others will feel the same way.

Second, user flows provide a bird’s eye view of the app by showing how each step works together to achieve the desired action.⁸ Imagine that every user flow is a puzzle and each action is a puzzle piece. Focusing on how every piece of the puzzle fits together — or how every step flows into the next – prevents UX designers from losing touch with the big picture.

Finally, user flows allow designers to experiment before the app goes live.⁹ A proposed change to the design can first be visualized on the user flow. Discussions about whether the change fits with the overall architecture of the page can be made before the real edits are. This means that designers can go ahead with the best design to launch.

Although user flows are a valuable tool for creating the smoothest online experience, their inherent limitations can cause setbacks.

Designers often create apps with the able-bodied user in mind.¹⁰ A consequence is that doing so creates issues with the accessibility of the UX design. What is intuitive for one may not be intuitive for another. Instead, UX designers should take into account users’ range of abilities when developing user flows in the first place. 

Along similar lines, UX designers base their creations on assumptions of human behavior. But this idealized view of behavior may not be a reflection of reality. Designers may inadvertently impose their bias or preferences onto the app leading to a discrepancy between the user flow and user needs. 

User flows are also static representations of a dynamic process meaning that they can eventually become outdated as the product or user behavior evolves. This requires designers to continuously revisit user flows and update them accordingly. 

Using User Flow Diagrams to Achieve Accessible UX Designs

While one of the inherent issues of user flow diagrams is creating a flow with normative standards, these diagrams can actually be used to identify gaps in design accessibility. Design researcher, Poornima Kapoor, achieved just this during her case study of Blackbuck Boss, India’s largest freight platform, following their recent website redesign.¹¹ By translating her experience with the website’s application system into a user flow diagram, Kapoor created a visualization of the site’s interface. Design evaluations using user flow diagrams helped highlight areas in the website’s interface that some may find challenging, helping to identify areas for enhancing UX design accessibility.

A Study into the User Flow of Disney+

Ukrainian digital designer, Andrii Loginov, condensed his onboarding, video-watching, and saving experience on the Disney+ streaming platform into a user flow diagram. This allowed Loginov to evaluate the design of the platform, identifying commendable areas and pitfalls. For Loginov, starting up and logging into the streaming platform was one of the best compared to other streaming platforms thanks to the clear and minimal sign-up process. The video-watching experience required numerous steps to get to the video which Loginov questioned about the correct design pattern. Finally, the video-saving process was straightforward and simple. Apart from the jagged flow for video-watching, Loginov’s case study found the user flow of Disney+ as mostly clear and minimalistic which is commendable for a relatively new online streaming platform.¹²

User Journey Map

A user flow is just a piece of a much bigger puzzle—the user journey map. This diagram illustrates a user’s entire interaction with a digital product or service. By zooming out and focusing on the user’s perspective, UX designers can identify moments of frustration and delight which can inform future designs to enhance the overall experience.

Amplifying User Abilities: The Behavior-Changing Magic of Digital Accessibility

We mentioned issues with accessible UX designs and how user flows can either elevate or deter accessibility. The article highlights just how important considering the spectrum of ability is for digital accessibility. Designing for a broad range of abilities creates products that amplify the user’s abilities and empower them overall.

1. ProductPlan. (n.d.). User Flow. Www.productplan.com. https://www.productplan.com/glossary/user-flow/#:~:text=A%20user%20flow%20is%20a
2. Kaplan, K. (2023, April 16). User Journeys vs. User Flows. Nielsen Norman Group. https://www.nngroup.com/articles/user-journeys-vs-user-flows/
3. Gilbreth, F. B., & Gilbreth, L. M. (1921). Process Charts: First Steps in Finding the One Best Way to Do Work. Transactions of the American Society of Mechanical Engineers, 43, 1029–1043. https://doi.org/10.1115/1.4058133
4. Mancha, S. S. (2020, July 31). A Century of Flowcharts. Medium. https://ssmancha.medium.com/a-century-of-flowcharts-f425d38fef72
5. Nulab. (n.d.). Flowchart guide. Nulab. https://nulab.com/learn/strategy-and-planning/flowchart-guide/#:~:text=History%20of%20flowcharts
6. Mogensen, A. H., & Rausa, R. Z. (1989). Mogy: An Autobiography: “Father of Work Simplification” (2nd ed.). Idea Associates.
7. Adobe. (2022, November 14). User flow diagram — what it is, why it’s important, and how to create one. Adobe Experience Cloud. https://business.adobe.com/blog/basics/how-to-make-a-user-flow-diagram
8. See 7.
9. See 7.
10. Kapoor, P. (2021). Mobile User Experience (UX) Design Guidelines Considering the Need for Accessibility. In A. Chakrabarti, R. Poovaiah, P. Bokil, & V. Kant (Eds.), Design for Tomorrow - Volume 1 (pp. 444–457). Springer.
11. Oswal, S. K. (2019). Breaking the exclusionary boundary between user experience and access. Proceedings of the 37th ACM International Conference on the Design of Communication. https://doi.org/10.1145/3328020.3353957
12. Loginov, A. (2021, December 10). Case study: User flow uncovering—Disney+. Medium. https://bootcamp.uxdesign.cc/case-study-user-flow-uncovering-disney-493f6f064bcb