100 THINGS I LEARNED ABOUT DESIGN  |  AUGUST 6, 2020

100 THINGS I LEARNED ABOUT DESIGN
AUGUST 6, 2020

10. User Flows: From Research to Information Architecture

10. User Flows: From Research to Information Architecture

One of the biggest gray areas in UX right now is how to go from research to design. More specially, how do you translate the findings you gather from research techniques like the User Interview, into tangible design artifacts like your Information Architecture or even Wireframes? 

One of the biggest gray areas in UX right now is how to go from research to design. More specially, how do you translate the findings you gather from research techniques like the User Interview, into tangible design artifacts like your Information Architecture or even Wireframes? 

Start with the User Flow 

What is a User Flow? One of the best definitions out there can be found in this article by Alexander Handley. Here’s how he sums it up:

"A User Flow is a series of steps a user takes to achieve a meaningful goal.” -Alexander Handley

Let’s unpack that. 

A series of steps…
Aka things users do on your product. 

…to achieve a meaningful goal
People use your website or app because they have a specific goal. That goal might be to purchase a product or service; find information; or simply just to be entertained. 

I like to compare User Flows to those old school Map Quest directions you used to print out before Google Maps took over. Except instead of outlining a route on the road, a User Flow diagram outlines how users moves around your product.

Start with the User Flow 

What is a User Flow? One of the best definitions out there can be found in this article by Alexander Handley. Here’s how he sums it up:

"A User Flow is a series of steps a user takes to achieve a meaningful goal.” -Alexander Handley

Let’s unpack that. 

A series of steps…
Aka things users do on your product. 

…to achieve a meaningful goal
People use your website or app because they have a specific goal. That goal might be to purchase a product or service; find information; or simply just to be entertained. 

I like to compare User Flows to those old school Map Quest directions you used to print out before Google Maps took over. Except instead of outlining a route on the road, a User Flow diagram outlines how users moves around your product.

Designing User Flows

The best way to understand a User Flow is by looking at an example. In this case, we’ll design a User Flow for an online shoe store. 

You want to start by answering these three questions:

1.Who is the user?
2.What is their goal?
3.What steps will the user take to achieve this goal?

Let’s start with the first, who is the user?

In other words, who does this User Flow represent? Techniques like Stakeholder Interviews and Personas will help you identify the different types of people that will use your product. It’s common to have multiple types of users (aka subsets) with unique goals and characteristics, which are usually represented by your Personas. Hence, you want to design a User Flow for each Persona. 

So for the purpose of this example, let’s imagine the user we’re designing a User Flow for is Sidney. Here’s Sidney’s Persona:

Designing User Flows

The best way to understand a User Flow is by looking at an example. In this case, we’ll design a User Flow for an online shoe store. 

You want to start by answering these three questions:

1.Who is the user?
2.What is their goal?
3.What steps will the user take to achieve this goal?

Let’s start with the first, who is the user?

In other words, who does this User Flow represent? Techniques like Stakeholder Interviews and Personas will help you identify the different types of people that will use your product. It’s common to have multiple types of users (aka subsets) with unique goals and characteristics, which are usually represented by your Personas. Hence, you want to design a User Flow for each Persona. 

So for the purpose of this example, let’s imagine the user we’re designing a User Flow for is Sidney. Here’s Sidney’s Persona:

Second question, what is their goal? 

Now as you can see above we already defined Sidney’s goal in her Persona, which is to "profit from buying and reselling sneakers". 

Just remember when you’re defining the goal for your User Flow, it should be in the context of the product you’re designing. So even though Sidney’s goal is to profit from buying AND reselling sneakers, we’re more focused on the buying part and less on the reselling part. That’s because Sidney will buy her sneakers on the website we’re designing, but will likely resell them on a different platform. 

So we can actually simplify our goal to just “buying sneakers”. 

Also, keep in mind that it’s common for Personas to have multiple goals in the context of your product. So what you want to do is split each of these goals into separate User Flows.

Third question, what steps will the user take to achieve this goal? 

So here’s where we map out the specific steps that Sidney takes on our product to achieve her goal. In other words, how Sidney moves from page to page on our website to buy sneakers. 

So the steps involved in Sidney’s goal might look something like this: 

Step 1: Visit the online shoe store home page
Step 2: Browse categories (Women, Sneakers)
Step 3: View product details (images, info, price)
Step 4: Configure product (choose a size and color, if applicable)
Step 5: Add product to cart
Step 6: Complete checkout
Step 7: Receive confirmation

Side-note: I like to map out each step with post-its. 

As you’re defining these steps, it helps to check out the competition. I don’t mean you should blatantly copy what they’re doing because it might be wrong. Instead it’s more about understanding how people expect do things. 

So in this case, Sidney is buying something on a website. Buying things online is very common and users have certain expectations when it comes to doing so. Usually you find a product, add it to your cart and check out. Now if you were to do something radically different it could either be genius or it could be so unfamiliar that it confuses users and they end up choosing a different product. And usually what ends up happening is the latter. So be sure to understand conventions.

Once you’ve outline the steps, it's helpful to design a visual diagram composed of boxes and lines to represent your User Flow. Here’s what that looks like:

Second question, what is their goal? 

Now as you can see above we already defined Sidney’s goal in her Persona, which is to "profit from buying and reselling sneakers". 

Just remember when you’re defining the goal for your User Flow, it should be in the context of the product you’re designing. So even though Sidney’s goal is to profit from buying AND reselling sneakers, we’re more focused on the buying part and less on the reselling part. That’s because Sidney will buy her sneakers on the website we’re designing, but will likely resell them on a different platform. 

So we can actually simplify our goal to just “buying sneakers”. 

Also, keep in mind that it’s common for Personas to have multiple goals in the context of your product. So what you want to do is split each of these goals into separate User Flows.

Third question, what steps will the user take to achieve this goal? 

So here’s where we map out the specific steps that Sidney takes on our product to achieve her goal. In other words, how Sidney moves from page to page on our website to buy sneakers. 

So the steps involved in Sidney’s goal might look something like this: 

• Step 1: Visit the online shoe store home page
• Step 2: Browse categories (Women, Sneakers)
• Step 3: View product details (images, info, price)
• Step 4: Configure product (choose a size and color, if applicable)
• Step 5: Add product to cart
• Step 6: Complete checkout
• Step 7: Receive confirmation
  

Side-note: I like to map out each step with post-its. 

As you’re defining these steps, it helps to check out the competition. I don’t mean you should blatantly copy what they’re doing because it might be wrong. Instead it’s more about understanding how people expect do things. 

So in this case, Sidney is buying something on a website. Buying things online is very common and users have certain expectations when it comes to doing so. Usually you find a product, add it to your cart and check out. Now if you were to do something radically different it could either be genius or it could be so unfamiliar that it confuses users and they end up choosing a different product. And usually what ends up happening is the latter. So be sure to understand conventions.

Once you’ve outline the steps, it's helpful to design a visual diagram composed of boxes and lines to represent your User Flow. Here’s what that looks like:

From User Flow to Information Architecture

If you follow the steps above and repeat for each of your user groups or personas you’ll have a clear understanding of all of the things users will do on your website or app. And this allows you to start defining the content and functionality you need on your product, which translates directly into your Information Architecture and Wireframes. 

What does this process look like? What you want to do is take each of the steps that you includes in your User Flow and translate them into pages. 

So if we take the User Flow we created for Sidney and look at each of the steps needed to buy a pair of sneakers, they might boil down in to the following pages:

From User Flow to Information Architecture

If you follow the steps above and repeat for each of your user groups or personas you’ll have a clear understanding of all of the things users will do on your website or app. And this allows you to start defining the content and functionality you need on your product, which translates directly into your Information Architecture and Wireframes. 

What does this process look like? What you want to do is take each of the steps that you includes in your User Flow and translate them into pages. 

So if we take the User Flow we created for Sidney and look at each of the steps needed to buy a pair of sneakers, they might boil down in to the following pages:

We now have a list of pages needed for Sidney to achieve her goal of buying sneakers. You’d then repeat this same process for each Persona and each of their specific goals.

What that gives is comprehensive list of the key pages on your product. These pages become the foundation of your Information Architecture. And what you can do next is to start grouping and establishing the hierarchy between these pages with techniques like Sitemaps and Card Sorting.

We now have a list of pages needed for Sidney to achieve her goal of buying sneakers. You’d then repeat this same process for each Persona and each of their specific goals.

What that gives is comprehensive list of the key pages on your product. These pages become the foundation of your Information Architecture. And what you can do next is to start grouping and establishing the hierarchy between these pages with techniques like Sitemaps and Card Sorting.

Get started with our online UX course.

Get started with our online UX course.