Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now that we’ve sorted the cards into steps the user should take, let’s arrange that into a User Flow. A User Flow is the path you mark out for your users to take, and you should make it easy for them to discover the next step in the process.
New Terms:
- User flow—A document that outlines the progression of ideal user behavior through key moments in their interaction with a product
Further Reading:
This article explains user flows clearly, and it also shows other common types of flows you may see. It does a good job comparing and contrasting differences between user flows and the other flows represented
-
UX Glossary: Task Flows, User Flows, Flowcharts, and some New-ish Stuff, by Naema Baskanderi
Linked earlier course notes, this Optimization Glossary from Optimizely does an excellent job covering what user flows are.
Let's look at all the steps we
need to include in the process.
0:00
For a ride sharing app,
we have three different goals.
0:04
To get to the airport quickly,
to get home as cheaply as possible, and
0:08
the third goal, for
the third group you worked through.
0:12
We also have things they
all have in common.
0:15
They all have a starting point and
a destination.
0:18
They all have to pay for their trip.
0:20
We need to determine the best order for
all of this.
0:23
For now, let's focus on the business man,
and we'll go back and
0:26
look at the other groups in a minute.
0:29
The business man has his goal,
to get to the airport quickly.
0:32
But what does he need to
do in our app to get there?
0:35
Let's make a stack of cards with all
the screens or pages that he needs to use.
0:39
We may decide that our app could let
us schedule rides for the future, so
0:44
this businessman doesn't
have to wait around.
0:49
That sounds like a great feature, but
0:52
is it something that actually plan for
the app?
0:54
Sometimes we may find features
that you want to explore or
0:57
implement when you're working on
some user experience document.
1:00
After all, you're finding ways to
make the lives of your users easier.
1:04
However, it's important to check
either with your projects team,
1:08
if you're on one, or
with your own constraints
1:11
to make sure that these features can be
implemented within the project's timeline.
1:14
We need a destination,
1:20
the driver won't know where to
take the passengers otherwise.
1:21
Which also means we need
a pickup location, so
1:26
the driver knows where
to meet the passenger.
1:28
This should probably default
to the current location.
1:31
We might want to follow up with
a survey about how his ride was.
1:35
That way we can make rides better for
our future passengers.
1:40
After making it through
security at the airport,
1:42
our timely businessman will be waiting for
his flight.
1:45
So he in particular may decide to rate
the driver when he's no longer in a rush.
1:49
Additionally, we should ask if
he wants to tip his driver.
1:55
We need a way for the businessman
to select the payment for his ride.
2:00
For him specifically, we should be able to
choose between multiple payment options.
2:04
He may have a company card as well as
a personal card within the app, so
2:08
that's yet another step we need
to take into consideration.
2:12
We may want to know how many people
are riding with the businessman, or
2:16
at least allow him to choose
the number of seats in a vehicle.
2:20
Is there a premium option
available with luxury cars?
2:24
If so, let's find a place
to build that option in.
2:28
The app should probably alert him
when its right is getting close, or
2:32
if the driver is running
late because of traffic.
2:37
He is looking to book a ride
which is an obvious step, but
2:40
it may be easy to overlook.
2:44
We need on-boarding, or
the process of creating an account and
2:46
setting up the app for first-time users.
2:49
Since this isn't a repeated part
of the businessman's journey,
2:52
we're going to leave those
details out of our user flow.
2:55
However, if you're up for
an extra challenge, and for
2:58
some more practice,
you can create a list of the pages and
3:00
steps you think our businessman would
need to create an account on our app.
3:03
For example, he may need a username,
a form of payment, and
3:08
address that's set as home, or email.
3:12
But that's just the beginning.
3:15
Feel free to dream up what you
think he may need to do before he's
3:17
able to use the app.
3:20
Now that we have these cards,
3:22
let's put them to use by doing
a hard sorting excercise.
3:24
We can better visualize the different
steps in the process, and
3:28
arrange them until they
make the most sense.
3:31
People usually do card sorting exercises
for determining where content lives
3:34
on a site, so they group them in
clusters with similar content.
3:38
For example, mission statement, policies,
3:42
company directory, and job opportunities,
could all fall under the about us heading.
3:45
For our purposes, we'll be using the cards
like parts on a timeline, where we
3:51
look at different steps and decide
the order that makes the most sense.
3:55
Got it?
4:00
Let's go.
4:01
Our users would need to go through
an on-boarding process, but
4:02
the businessman should've
done that already.
4:05
Our first step for booking a ride
is to get the pick up location.
4:08
Pickup location should default
to his current location.
4:12
Next, he should select the destination,
either by typing it in, or
4:15
by using the map.
4:20
Then, the app should present to
him with his vehicle choices,
4:21
including number of seats and
luxury upgrades.
4:25
We'll also need to give him
a price estimate at this point.
4:29
The app could give him a price
estimate with his vehicle choice,
4:32
to minimize any back and forth.
4:35
Maybe he needs to keep the trip
within a certain budget.
4:37
Finally, he can choose to book now or
schedule for later.
4:40
When he indicates that
he wants to schedule for
4:44
later, he can then set
his idea arrival time.
4:46
Let's say he wants to arrive at 3:45PM.
4:50
If there are changes based on the time,
like a higher fare at night or
4:53
early in the morning, the app will
inform him of the change in price.
4:58
The app will tell him if there aren't any
luxury vehicles scheduled to drive at that
5:02
time, in which case he can
book with an average car.
5:05
Wait a minute.
5:09
This sounds like we may have to
repeat the steps of choosing a car,
5:10
which doesn't sound very efficient.
5:14
To keep things in as few clicks as
possible, maybe we should move the option
5:16
to book now, or schedule for later,
up to the front of the line.
5:21
Now we can given the vehicle options
with price estimates all at once.
5:26
Once he has selected the vehicle
option with price estimates,
5:31
he should confirm his payment method and
book the ride.
5:35
The app will let him know the time
that he should expect to be picked up,
5:38
factoring in predicted
traffic in the area.
5:42
The app will also alert him
when his driver is nearby.
5:45
After he has been dropped
off at the airport,
5:49
his payment method should be charged,
and an email receipt sent.
5:51
The app should prompt him to rate his
driver and his passenger experience.
5:56
And finally, tip if he enjoyed his ride.
6:00
You need to sign up for Treehouse in order to download course files.
Sign up