.png)
User Flow Workshop
Understanding and Creating User Flows
While working at Chegg, I was tasked with redesigning and creating new lessons of my choosing in their efforts to update their UX curriculum. One of these lessons was User Flows.
When I was brought onto the Upright Education team, I was given the opportunity to bring in this same lesson because of its outstanding results from my time with Chegg.
Why this Lesson?
Simplifying Complexity
Students from previous classes had noted:
-
"I still don't fully understand how to create a proper user flow. The shapes confuse me."
-
"Even though I understand what they are supposed to portray, I don't understand their purpose."
As someone who struggled with user flows as a student, too, I knew how they were feeling. When I re-taught myself user flows, I felt like I could take on the world. I knew that if I could teach myself something I struggled to master, I could teach others.
Learning Objectives
What are my goals for this lesson and activity?
1 / Understand user flows and their purpose.
2 / Understand user flow shapes and their meanings
3 / Successfully build a user flow as a class
4 / Students leave the lesson with total understanding and more confidence
What's in Store
Timing
-
Lesson: 20 Minutes
-
Activity: 30-45 Minutes
-
Final Q&A: 5-10 Minutes
-
Total: 55-75 Minutes
-
What Is a User Flow?
-
Elements of a User Flow
-
Staying on the Happy Path
-
Building Flows Without Designs
-
Activity: Building the User Flow for Booking a Ride on the Uber Mobile Application
-
Student Feedback and Results
What Is a
User Flow?
What It Is
-
A visual representation that documents sequences of events and actions in your product.
-
User Flows walk through the product step-by-step as the user moves towards a meaningful goal to complete a specific task.
What Does It Tell Us?
-
The steps the user takes in the process.
-
The steps the flow takes in the process.
-
What the user sees.
-
The happy path (the ideal path the user takes to complete their task).
Why Do We Use It?
To communicate with clients, developers, and other team members how the product will function and how the user will interact with the product to achieve their goal.
How Do You Make One?
To make a user flow, you need to understand and utilize the 4 different shapes that communicate different aspects of the happy path.
⬇️
Elements of a User Flow
Oval
Entry & Exit
Circle
User Action
Rectangle
View
Diamond
System Decision
Tips for Shape Meanings
User Flow Legend in FigJam
Oval: Happy Path Start and End
-
Each flow has 1 start and 1 end
-
Think: “Open website,” “Leave app”
Circle: User Action
-
The physical action the user takes
-
Think: Pointing, clicking, tapping, pressing, selecting, circling
Rectangle: View
-
Always follows the Start and precedes the End
-
What user sees/what is shown (pages, overlays, popups)
-
Think: Your screen is almost always a rectangle
Diamond: System Decision
-
Functional decision made by the user
-
Always a yes/no question
-
Always lead to an action, sometimes to 1 other diamond
-
Think: “Existing user?” “Search product?” “Schedule ride?”
Putting It Together: Typical Login Path
When putting together your user flow, you are mapping your shapes together to tell a story.
Let's walk through an example of building a user flow for a typical login path (follow along in the image example):
Step 1: How did we get here?
-
Shape: Oval
-
Text: Whatever is being opened (ie, "Open App")
-
Next: View
Step 2: What are we seeing first?
-
Shape: Rectangle
-
Text: Name of the page we're seeing (ie, "Login/Signup Page")
-
Next: Action or Decision
Step 3: Is there a decision point?
-
Shape: Diamond
-
Text: Question the system is asking (ie, "Existing user?")
-
Next: 2 paths (1 for yes, 1 for no), both start with Action
Step 4: What action are we doing first?
-
Shape: Circle
-
Text: Whatever the action is (ie, "Tap Login")
-
Next: View
Step 5: What are we doing from here?
-
Shape: Rectangle
-
Text: "Login Page"
-
Next:
-
Action ("Tap Login") to complete login process
-
View ("Landing Page") to show login success
-
Step 6: Task completion
- Shape: Oval (End)
- Text: "Leave App"
- Next: Build path for "No" to Decision and build out Sign Up process
Staying on the Happy Path
Account for Necessary Side Quests
Don't Go Overboard!
It is important to showcase the different paths a user can take to complete their task, but only when it is necessary.
When you are designing for a specific task, you do not introduce another in your flow. If you are working on the path of a user posting an image to their Instagram feed, you are not going to cover posting to their story or editing their bio, too.
Examples of Occasional Necessary Side Quests:
-
Logging in vs. signing up when starting a task
-
Adding caption to post when posting photo to feed
-
Adding filter to photo when posting photo to feed
Why Does This Matter?
Communication & Attention to Detail
When working in user flows designing "side quests" can be tempting at first. But keep your happy path in mind!
Remember: This is a communication tool between you and your cross-functional team. If you mention that Instagram has stories to post in your designs, you don't have to share that in your user flow of posting an image to their regular feed.
Keeping on track with your happy path, and remembering that each task is a new path will have your team thanking you for the clarity and simplicity that is in your detailed user flow!
Building Flows Without Designs
1 / Start with a Task Flow
Get an idea of what your features will do and how they’ll do them.
2 / Dive into Specificity
After you start broad and have your ideas written down, you can dive into button terminology and specific order of pages and actions.
3 / Remember: Happy path!
Keep things minimal - stick to 1-2 tasks for each flow!
Activity Outline & Responsibilities
Instructor Responsibilities:
-
Provide FigJam template to students
-
Share Screen
-
Narrate class decisions
-
Ask questions, like: "Why a circle?" "What next?" "Does anything happen before we make that action?"
-
Encourage participation
-
Have app open on phone to follow along
Student Responsibilities:
-
Utilize prompt and legend to assign shapes and text
-
Have app open on phones to follow along
-
Narrate flow
-
Ask clarifying questions
Outcome
-
1 completed happy path for signing up for Uber and requesting a ride
-
Students have experience putting together a user flow while thinking out loud
-
Students have access to completed user flow
Student Feedback & Results
Long Term Results
After this lesson and activity, students are tasked with building 2-3 user flows for their projects. After grading these over the course of 6 cohorts, I found that:
-
100% of students completed their user flows on time
-
Before, only 50% completed them on time
-
-
Only 10% of students needed to make revisions based on shapes, but made the necessary corrections after receiving feedback
- 30% of students missed steps in their flows, but fixed them after receiving feedback
- 10% of students still went on side quests, but revised once reminded those could be separate user flows to break up the work and deliverable.
- Overall, the average grade for user flows improved from 60% to 95%
Feedback
"I really enjoyed being able to work with my class to assemble the user flow. It was interesting hearing different perspectives and ideas from everyone and having to come to a group decision." — Student
"The tips alone really helped me with understanding user flows better." — Student
"There are so many different approaches to user flows, but this has been the most straight-forward one for not only designers to understand, but for the whole cross-functional team to understand, too." — Student