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!
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.
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.
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
Returning to our login flow, notice four visual elements we are using from Squid:
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.
One nagging question at this point is how do you know which UI flows to create? There are at least three things to consider:
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>
This article has been written in collaboration with Lisa Panke.