Product Design Lessons

Interface Design Sketching  |   Lesson #109

Finding your Flow

Help your team figure out your products macro-flow.

At ZURB we’re often getting quickly acclimated to client products before we hop into a deep dive for our design work. One of the main goals at the start of a project is to rapidly understand how users will flow through an app at a very high level. We’ll be looking at using a macro-flow Discovery session to get a quick but effective flow created for our new or redesigned product.

The People:

For any work session it’s important to invite people who will benefit the meeting, while keeping the amount of the people as small as possible. While every project is different, we aim to keep the teams 50/50 client to ZURB with a nice mix of product managers and technical leads from the client and designers and design leads from ZURB.

The Supplies:

100+ Post-its
Sharpies for everyone in the room
A large whiteboard or wall to place post-its on

1. Collect user tasks

We’ll start with individual brainstorms from everyone in the room on tasks a user would like/need to take within their daily use of the product. Hand out a stack of post-its to all participants and instruct them to take 10 minutes to write down as many user tasks they can think of with one task on each post-it. These should be major tasks like log-in, check analytics, or create a new item. Make sure to timebox users here and have one individual give both time updates and encouragement if anyone seems stuck.

2. Group Tasks

Next we’ll group tasks together to combine duplicates or similar tasks that may be just phrased differently. This will also highlight outliers, so ensure to discuss lone post-its to gain insights on why only one member of the group has chosen it. We can highlight the validity of a task by how much debate and interest these outliers get and can even take an opportunity to build on it and solidify it more.

3. Order Tasks

Now that we have basic groups, we can start ordering them on a timeline. We’ll take our groups and begin to lay them out on the line, this should be done by everyone on the team and take no more than 30 minutes. This doesn’t need to be done in order, we can guess where a task might fall since it can always be moved later. Since we’ve used post-its every member of the team can easily move a group around and discuss the way this would affect the overall experience of the user. We can also branch the flow, if some tasks or steps are discovered to be optional or concurrent flow based on the user type.

4. Analyze

Once we’re satisfied with a basic flow we can take a step back and analyze what we’ve created. This is an opportunity to note where the team understands the flow best and where they need to work harder at understanding it. If some steps have piles of post-its while others have fewer, this may be a sign that we need to explore the need or purpose of the smaller section or if we have too many individual steps we may work on combining or consolidating steps for our user.

Next Steps

It’s important to note that this is an early deliverable and should be used to focus the efforts of the team moving forward. If we feel good about the macro-flow overall we can take deeper dives at separate sections, focusing more on individual interactions that make up each task. If we noticed we had gaps in our knowledge we can head back to user interviews or research to help better understand the tasks at hand.

About the instructor


Brandon Arnold is a Foundation mastermind. He contributed several key components of the latest version of our framework, and walks you through getting started with Foundation for Emails.