User flow

Have you ever wanted to learn the best way to understand your users? Creating user flows can help you define your goals, understand your users, and drive more business. We’ll also cover some tips on how to improve your user flows and create a better overall experience.

What is a user flow?

A user flow, or UX flow, is the path created by a user on a website or app to complete the task at hand. User flows are similar to a traditional flow chart, but they include visual interfaces or gestures. The flow maps out the user’s entry point, exit point, and every step they take along the way.

User flows focus on a specific user task, and eventually include all possible alternative paths. Designing for the “happy path”—the best way to complete a task without errors or exceptions—allows the designer to focus on exactly what the user needs, and nothing else.

How is a user flow related to design?

A user flow is used as supplemental information during the visual design process. In a perfect world, it would be created well before creating the design and layout, and by the same designer that’s doing the visual design.

The ideal flow would include a document of decisions that map out the intended usage for the app or service. This acts as a guide for any new designers, and ensure the goals of the flow are always top of mind.

Best practices when designing a user flow

At the beginning, user flows are usually organic, and can often be drawn on a whiteboard or sheet of paper. Once the initial ideals have been solidified, it’s time to formalize them. This doesn’t mean they have to have certain specs, necessarily, but it’s extremely helpful to clean everything up in a graphics program like InVision Studio.

One of the most important things in a user flow process is to document the decision tree versus the fidelity of the design itself. You’ll need to understand:

1. The business objectives and goals.
2. Where your current users are coming from.
3. Where your current users are going.

For example, a simple sign-up flow might consist of a homepage, a how-it-works page, and the account sign-up flow itself. A user could skip each of these pages and go directly to the sign-up flow. From a business perspective, it’s best if a user learns more about the service and how it’s priced before signing up—but users have minds of their own. Some enter from an ad, others through organic search, social media, email, etc. This is where user flows come in handy. You can map out all the possibilities, and make sure each makes sense to your business and aesthetic objectives.

For an existing site, you can lean heavily on analytics and data to figure out where your users are coming from, what their goals are, and how they should flow through your site. Once you’ve defined the main entry points, you can begin exploring the desired flow. Maybe the social media users come straight to the how-it-works page, while the organic users end up on pricing. You can use different iterations of your user flow to show how each user would make it through the desired pages before signing up.

For a new site, you can rely on your business goals, and design for best practices. Once you launch your site and generate some user data, you’ll start to learn from their behavior and can adjust your user flows accordingly.

How to improve your user flows

There are several ways to improve your user flows, but we’ll outline some impactful places to start.

Focus on conversion paths

Make sure you understand where your traffic is going and how it’s getting there. For example, let’s say a user finds your app from an ad, lands on your product page, and makes a purchase (conversion). You want that path to be as tight and effective as possible from start to finish: page loading, clear calls to action, and simple form fields in your check-out flow. These can all help improve conversion.

Account for all types of users

It’s common to serve multiple types of users regardless of the products you sell—but don’t forget to look for the ones you don’t expect. You might have a subset of users that end up on your site even though you’re not specifically marketing to them; make sure you have products or paths that address their journey, too.

For example, your site may cater to women’s goods, but you have a large user group that’s men buying for women. By catering to that demographic, you’ll be able to target them with ads and landing pages that speak directly to their use case.

Otherwise, you could lead a bunch of users down the wrong path and bring down your conversion rate.

Keep your content concise

To keep users focused and on task, content should be trimmed and to the point. If you’re driving traffic to a landing page with a lot of content, users could be turned off by how much they have to read and are more likely to bounce. By keeping content concise, you’ll drive more traffic toward your goals or CTAs. Be careful not to cut it too short and sacrifice clarity for length. Aim for digestible content, and always try to get an outsider’s perspective.

Use supporting graphics and videos

Graphics and videos can be a powerful way to engage users and guide them through the experience. But it’s easy to have too much of a good thing. Make sure each piece of content serves a purpose and is complementary to the next, not random and distracting.

Test your content

Multivariate or A/B testing is a simple, efficient way to incrementally learn about your users and improve your landing pages. Does the page convert better with a one- or two-step form? Are users more drawn to sign up with the form on the left or the right? In addition to different designs and visual elements, you can test code, loading screens, page speeds, and everything in between.

Design for devices

Discover what devices are being used for your site, and make sure you have a satisfying experience for each one. If your site is overwhelmingly mobile, you’ll want everything to cater to the most popular device size, browser, and operating system. If your site hosts mainly desktop traffic, take into account a variety of browsers and multiple screen resolutions.

Solve user problems as a team

Understanding your customers is a key part of creating quality user flows. InVision Freehand and Boards allow your team to collaborate on empathy maps, create wireframes, and gather design inspiration. Sketch out your own thoughts or add your feedback to someone else’s ideas; either way, you’re working together in real time to push your project forward.