Design + Strategy

How to Outline User Flows to Support the Information Architecture

What are User Flows?

User flows outline the steps that a user will take through your website or digital product in or complete a task or achieve a goal. Oftentimes there are primary key “tasks” that users will need to complete through the website or digital product that are critical to them achieving their goals.

In the initial stages of a web development project, it’s important to both 1) identify what these key tasks are, and 2) outline them in separate documentation in order to ensure the information architecture and UX supports these key tasks in as few steps as possible.

Who creates User Flows?

It depends. Usually, a UX designer will work with the client team to identify what key audiences “should be able to do” via the website or product. Through a workshop or simple Q & A session, the team identifies what the key tasks are, and which user groups these tasks pertain to. From there, it’s the job of the UX designer and product team to help guide the client towards prioritizing the tasks listed.

Gathering Through an In-person Session
If this is an in-person session, this can be accomplished easily through writing tasks on sticky notes, grouping the notes by the unique audiences, and prioritizing the tasks within each audience group. If it’s a phone session, a UX design will often create a list of questions related to audience needs, goals, and motivations, and the client and UX team will discuss the questions and answers during the call.

User testing or interviews will often preface a user flow document, which will help the project team gather first-hand accounts of user behavior, needs, and motivations.

Whatever the source of the user insights, it’s the UX designer’s job to translate this information into documentation that can be shared amongst the project team, along with a hypothesis of user behavior and additional questions that will help fill in gaps in information.

What's the Difference Between User Flows and User Journey Maps?

User journey’s outline more detail about the channels, thoughts, and feelings of the user that relate to multiple workflows. User Journey Maps also tend to integrate personas more closely. User workflows are essentially just user steps. The user journey shows more of the holistic experience surrounding the user flow as it relates to the product or service you’re designing.

Should User Flows be Shared with a Client?

You may choose to share a user flow document with a client to align expectations for understanding user behavior as it relates to the website or digital product. For example, some user tasks will be completed outside the technology that you're designing and building, so it’s important to outline where to draw the line of what the technology can and cannot solve. Another instance where it is valuable to share user flow documents with the client is when you’re outlining business operations and steps that are closely intertwined with the technology and UX you're building. For example, ordering systems that require a user to fill out specific information for the order to be fulfilled.

These user flows can become rather complex, but it’s worth outlining the steps in granular detail in order to both understand the intricacies of the client’s business operations, and ensure the user experience supports meeting both business and user needs.

How to Outline User Flows

Although user flows, from a design standpoint, can seem rather simple, following a set structure will help during the creation process, and ensure the document is easy to understand.

1. Start With User Stories

User flows can be useful inputs for the creation of user stories in the product/project backlog and planning. Follow this structure for your user stories: 

As a [role], I can [feature] so that [reason].

 

If you're writing user stories for the first time, learn more about how to write good user stories here.

2. Create an Artboard for each Key Audience

Create a new “Web Design” document in Sketch. This can be found under “File”>”New from template,” “Web Design.” Once you have Sketch open, go to “Insert” > “Artboard” via the top toolbar:

 

3. Create Sections for each “WorkFlow”

Depending on the complexity of the website or digital product you’re building, key audiences will typically have 1-2 primary workflows that will need to be supported, and therefore, that you’ll need to outline. Using one artboard for each audience, outline the primary workflows that have been identified and determined between the project and client team, and create sections for each of these on your artboard for that audience. This is more for organizational purposes, just so you don’t forget critical workflows.

Be sure to reference and use your user stories as a guide during this process.

4. For Each Workflow, Outline the User Steps

This step is a lot easier if you have a proto-persona in mind as you're outlining the steps within the user workflow. As you have this persona in mind, outline the user workflow for that audience step-by-step. Tackle each workflow independently until you have it outlined completely, then go back through each step to see if you forgot anything critical.

Once you feel each step has been outlined, go back through and add documentation and notes around each step if necessary.

5. Create a Key

Be sure to create and include a key on your document so that people understand the details of documentation, outside of the written descriptions and documentation. There's no set way to do this, as long as people are able to easily decipher graphic indicators, and it follows a set system.

Download Our FREE User Flows Template

It's important to outline the key user flows in the initial stages of the project, to underpin and support the subsequent information architecture and user experience you design.

Download our free user flows template and example, which you can customize with Sketch for the purposes of your web design project.

Download Template