Creating Perfect User Flows for Smooth UX

by Marek Bowers

If someone asked you to define the word “flow” or describe an example of one, what would you say? Would you immediately think about flow as it relates to user experience or interaction design? Maybe…but, maybe not.

In this post, I’ll describe how to create smooth user flows based on my experience as a UX designer.

You may think about flow in terms of water. For example, how snowmelt flows into waterfalls and streams, which in turn, flow into reservoirs, lakes and the ocean.

Image for post
Image for post

You may also think about flow in terms of air. Did you know that a golf ball has dimples to turbulate the flow of air around it (which reduces drag), causing the ball to fly farther than a smooth ball?

Image for post
Image for post
Photo Credit: New Brunswick Tourism (Herring Cove Golf Course, New Brunswick, Canada), Creative Commons 2.0 via Wikimedia Commons

You can also measure the success of a flow (or lack thereof) in terms of efficiency. Just look at NASA and Boeing who collaborated on solving a flow problem this past April in a wind tunnel.

The teams outfitted a Boeing 757 tail with special technology that could potentially make flight more efficient. The impact of this? Lower fuel burn that might save airlines millions of dollars, which in turn, could save frequent flyers hundreds, possibly even thousands, of dollars on plane tickets.

Sounds good to us!

How Flows Relate to UX Design

So what do all these notions of “flow” have in common?

  • Flow depicts movement: movement through water, through air, through websites, through apps, etc.

Long story short, the concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.

Because lo-fi prototypes lack visual detail, the user flows are the heart of your prototype. Lo-fi prototypes help you focus on creating the smoothest flows for users to accomplish their goals.

Building a Flow with Users in Mind

When you build a user flow, what’s the first thing you should think about?

It might be obvious… your users!

For example, if you are designing a business intelligence tool that allows users to create reports and share them, you will want to have at least two flows: one flow for the Data Consumer (i.e. the user receiving/reviewing the reports) and an entirely separate flow for the data analyst (i.e. the user building/sharing the reports).

Image for post
Image for post
Photo credit: Persona tool in UXPin

Before you start creating your prototype flows, you should clearly understand your personas’ motivations and needs. Ask yourself, what drives my personas and what are they trying to accomplish?

Once you’ve created your persona, you can better grasp user goals. Map out both sets of goals so you know what your prototype needs to accomplish.

For templates and helpful tips on creating personas, check out the chapter “Analyzing Users Before Diving Into Design” in the free ebook The Guide to UX Design Process & Documentation.

Considering Goals & Entry Points

If you are designing a website user experience, another good practice before creating your flows is to determine and map out where your users are coming from.

Based on Morgan Brown’s advice in Stop Designing Pages and Start Designing Flows, we’d recommend you consider the following sources for your web or mobile prototype:

Image for post
Image for post
Photo Credit: “CCF Use Flows” by Rob Enslin is licensed under Creative Commons 2.0

Different entry points define different user behavior. Take a look at the difference in the below hypothetical scenarios for someone looking to buy a smartphone on Amazon.

Organic Search Visitor:

  1. Searches for reviews of iPhone

Direct Visitor:

  1. Enters Amazon.com

Now, we’re not saying the comparative shopping experience is that simple (or that the behavior between direct and organic visitors is always black-and-white). We are saying, however, that you must map out these different flows in order to deliver a comprehensively smooth experience.

To view some sample flows based on these entry points, check out the article Build it with the User in Mind: How to Design User Flow. The author,Peep Laja, has created three different user flows, where each flow originates from a different entry point and aligns with specific user and business objective.

Creating a Flow Outline

At this point, you should know:

  • Which users/personas you will be designing your flows for

Now you can think about what happens before and after a user is on a particular page. Like it’s described in Interaction Design Best Practices, you can link up your pages and create as many flows as you need.

One quick way that you can begin to begin exploring different page flows is by creating a simple flow outline. Before sketching or prototyping, a written outline helps you explore the most important part of your app or website — the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for the user experience.

Here are a couple techniques for outlining your flow.

Writing-first Approach to Outlining a Flow

You can use the writing-first approach, which Jessica Downey writes about in her article Jumpstarting Your App Conception Without Sketching UI. This outlining method helps flesh out ideas and build a “common understanding” of each page of your app or site.

Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.

Step 1: Would you like to set up auto deposit?

[Set auto-deposit]

Step 2: Select Deposit Frequency

[Once per month][Twice per month]

[Every other week][Every week]

Step 3: Deposit Once per Month

[Select calendar day]

Step 4: Set Amount

Display amount field

[Set auto-deposit]

Shorthand Approach to Outlining a Flow

You can also try a shorthand approach used by Ryan Singer at Basecamp. Ryan’s approach treats flows as ongoing conversations.

For our banking app example above, we can create a shorthand for Steps 2 and 3 that looks something like this:

Image for post
Image for post

To see how Singer demonstrates shorthand for Basecamp and how he can illustrates complex flows with this outlining process, check out A Shorthand for Designing UI Flows.

Sketching and Prototyping a Flow

Now we’re ready to create a low-fidelity sketch for each page in our flow outline and/or flow shorthand. The sketches bring your ideas to life with more detail around layout and structure. Once you have created your sketches, a simple low-fidelity prototype can help you test those ideas with users.

Image for post
Image for post
Photo Credit: “MF211: Figure 6.15” by Rosenfeld Media is licensed under Creative Commons 2.0

You can sketch out user flows in a variety of ways, as demonstrated in these examples of user flows and wire flows from Wireframes Magazine. Before committing to any particular flow, however, create a simple prototype to validate that its alignment with your user and business objectives. It doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.

Image for post
Image for post
Photo Credit: “Paper Prototype of Mobile Application” by Rodolphe Courtier is licensed under Creative Commons 2.0

From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like UXPin.

Image for post
Image for post

Real Examples of Flows and Their Teardowns

Now that we’ve shown you the process for creating your own user flows and turning them into sketches and low-fidelity prototypes, we’re going to leave you with some interesting examples of real UX flows for user onboarding.

Image for post
Image for post
Photo Credit: “Numbers” by Gustavo da Cunha Pimenta is licensed under Creative Commons 2.0

User onboarding is a great scenario in which it requires particular skill to balance user needs and business needs. The user wants to dive straight into the app with as little learning curve as possible. The business obviously also wants the user to dive in, but they also want to gently nudge users into upgrading their plans. To see deconstructed examples of what we’re talking about, we highly recommend going to User Onboarding.

You certainly need to master the art of persuasive design in order to create flows that educate users while helping them discover the benefits of upgrades.

Next Steps

When it comes to mastering user experience, there’s absolutely no substitute for practice.

I’ve used UXPin in my own career to create user flows, interactive wireframes, lo-fi prototypes, and even animated prototypes.

I’d recommend you start by wireframing basic flows like a mind map (making each box represent a step in a user action). Once you feel satisfied, feel free to build wireframes for each page, then add interactions to bring your flow to life with a prototype.

To practice what you learned, sign up for a free trial of the newly redesignedUXPin.

Written by

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store