The process we’ve taken through this series has been progressively detailed. In design, it is important to not get stuck in the details too early, which is why we took our time organizing research and building rough application maps.

At this point though, we are at our most detailed step before constructing wireframes. It’s time for UI flows!

What are UI flows?

UI flows, as Camren Browne puts it, “are diagrams that display the complete path a user takes when using a product.” The key phrase here is complete path. In developer lingo, UI flows present a comprehensive relational model of the states of an application, like clicking a button or signing in. Designers can use these flows to get a sense for which views to create. And engineers can use these diagrams to assist with developing business logic.

In this article, I’ll show you how we created UI flows for our Software Residency application. We’ll start first with tools.

Our toolbox

Different teams will use different tools to build UI flows. So, to some degree, the tool matters less than how it’s used. Still, the right tools can speed up collaboration and your overall workflow. For this application, our team used a Figma library called Squid.

Squid provides pre-built components for a variety of scenarios like gestures, solid and dotted lines, labels, and much more. Squid’s tools allowed us to focus on the work of developing application states since we didn’t have to worry about building the Figma components from scratch.

How to create a UI flow

Think through the logic

UI flows are all about if-then relationships. Your first task, then, is to think through success and failure states for each action a user will take at a particular point in the application.

Take our login flow for example:

‍

Let’s break down the logic here.

```

IF a user submits the login form

     IF credentials are correct (success)

          THEN show dashboard

     IF credentials are incorrect (failure)

          THEN display a cleared login form to prompt another attempt

```

‍

Visually show logical relationships

Returning to our login flow, notice four visual elements we are using from Squid:

1. Purple box: we used purple boxes for components that are diagrammed elsewhere. Think of it like a placeholder. Thus, the login flow itself would become a purple box in a different flow that uses it.
2. Arrows and state icons: we show the flow of states with arrows and icons. A green check represents a successful state, whereas a red “X” represents a failure state.
3. Black diamond: these boxes represent critical points in state logic.
4. Gray page views: pages in UI flows are meant to be low-fidelity and merely a representation of what the view may display. For example, the Login view shows rectangles to represent a login form, and the Dashboard shows lines and photos to represent the components that view may contain.

The key here is consistency. Your state logic boxes should all be the same shape, success icons should be the same color, and state arrows should be the same stroke type.

But wait ... there’s more?

One nagging question at this point is how do you know which UI flows to create? There are at least three things to consider:

1. Design systems, like codebases, are living and mutable. You will iterate on your flows over time, and that is okay!
2. Always be informed by qualitative and quantitative data. Don’t just shoot from the hip. Use the data you collected in surveys, as well as your application maps, to help you understand the states of your application.
3. Speaking of data, use your insights to inform a design and engineering strategy. At ZEAL, we break down app development into epics. Epics are made up of several stories, and form the key features you are trying to build for your users. For example, the Software Residency application has an authentication epic, a dashboard epic, and a user management epic. Each epic should have UI flows to diagram application logic.

Next Up!

We’ve covered quite a bit of ground so far in our series. We’ve talked about user research, affinity and application mapping, and UI flows. In our next article, we’ll show you our process for writing user stories.

Until then, do you have an application idea that needs some UX/UI help? Let’s chat.

<h2 id="series">More from this Series</h2>

1. Putting Together the Design Puzzle
2. How to understand users with User Research?
3. How to synthesize research with Affinity Mapping
4. How to Create an Application Map
5. How to Create UI Flows
6. How to Write Great User Stories
7. How to Create Wireframes and Prototypes

Photo by Sigmund on Unsplash

This article has been written in collaboration with Lisa Panke.