User flows

Creating a user flow is an important exercise in optimising user tasks and uncovering problems with your Information Architecture and User Interface design.

A user flow is tied to a single task. It allows a concentrated view on how a user achieves a particular goal through your website, software or app. User flows often gets confused with #user journeys which show a larger mapping through your entire product, often encompassing more than one task.

It starts with the user

The first thing to think about when creating user flows is your user. Before you start to look at user flows, you might want to create, or take a look at previously created personas. If they’ve been created well, they should include at least motivations and needs for your product or site.

You should also consider where your users have come from (search, email, print etc) as entry points often illicit different behaviours. For instance, a user arriving through search might be evaluating different products, an email user might want to purchase immediately.

Creating your user flow

Creating your user flow starts with naming the task, the users needs, business objectives and where your user is coming from

You can map out your user flow in a number of ways from using a spreadsheet, to sketches and wireframes. I started out sketching userflows, but now prefer  to use low-fidelity wireframes in Sketch.

Here’s an quick example user flow I made for the task of posting a photo on Instagram. Over time, the Instagram team has trimmed down both the screens and time for a user being able to post a photo to these 3 screens, and one is skippable by the user.

The reason for making these changes is both user and business orientated:

  • Users are able to post photos quickly and easily 📷, which means they will post more 👍
  • More photos means more ‘free’ data for Instagram (Facebook)
  • Leads to more targeted ads 🎯
  • This then increases revenue 💰💰💰

Instagram flow of posting a photo - Step 1, take a photo, Step 2, add a filter, Step 3 Post photo with detail