A workflow breaks down the steps of the process flow into specific activities a user needs to do and the conditions a system needs to consider in order to complete a step — or series of steps — in a process. Workflows are the “boxes and arrows” diagram of UX design.

Process flows capture the high-level end-to-end “what” and workflows detail out the “how,” but both put users at the center of the design.

‍

Workflows capture both user and system actions

A workflow is from the POV of the end user (the UX persona developed in the first stage of design).

As that persona, the workflow starts off at the initial step of a process, noting all the activities the persona needs to do in order to complete that step.

An example of a basic workflow is logging into an application. Initially, the diagram shows the user encountering no obstacles (i.e., the flow is an unobstructed path where everything works perfectly, aka the Happy Path). In the context of our login workflow, the user has remembered both their login name and password, the application has successfully logged them in, and they are seeing the page they expected to see. The same concept is used with greater abstraction when initially designing process flows, in which completing the series of steps relies on an unobstructed path.

We then layer in any decision points our user may encounter and the alternate workflows resulting from that decision (e.g., What does the “forget password” workflow look like? What happens if they need to reset their password to comply with their company’s security requirements? What happens if an error occurs?). These alternate workflows cover the very realistic scenarios a user may encounter and demonstrate how the application handles them in order to keep progressing the user through the workflow.

Workflows are similar to flow charts, where a process might result in more than one possible path, depending on a decision. In some cases, it is the system that applies a condition and decides which path to follow, not the user (e.g., Did the user enter the correct password? If so, continue. If not, return with an error.) All of this is captured in the workflow diagram.

Creating the workflow is a critical stage of design

By defining the activities involved in specific steps of the overall process, workflows help to identify gaps in our thinking, whether the gap is a missed activity, or an overlooked decision point that ends up sending the user through a different flow. As a designer, I take the information gathered through various conversations with team members and clients and incorporate them into workflow diagrams, then socialize the workflows with my team. I have found this to be the best way to uncover these gaps.

Workflows inform both the product manager and the engineers of the potential scope of that feature. For example, the login process might seem very straightforward until all use cases are considered and it becomes clear that there are multiple alternate scenarios that need to be accommodated.

A workflow also helps define the information a user needs in order to complete activities, as well as where the application needs to gracefully handle any potential errors.

Workflows move design forward

Creating a workflow is an important intermediate step between understanding the process and beginning to design the user experience. A completed workflow gives the designer an idea of how the different tasks within activities should be grouped for presentation in the UI and forms the foundation for the next stage in design: Storyboard Sketches.