Preview
Video Player
00:00
00:00
Demonstration of Wireframing on Paper
11:25Now that you know the basic components of wireframes, we'll show you how to apply that knowledge to a real-world project.
Now that you know the basic
components of wireframes,
0:00
I'll show you how to apply that
knowledge to real-world project.
0:03
At this point, you should already have
personas, empathy maps, and the user flow.
0:07
I've included all of these
in the project files.
0:12
It's a good idea to have this research
done before you start to wireframe.
0:16
If you want more information
about creating these pieces,
0:20
check the teacher's notes.
0:23
I'll use research artifacts to inform
the wireframes we built in this course.
0:25
So please download those from
the project files to follow along.
0:29
You don't need to understand how these
documents were created right now,
0:33
but you will want to
refer to the documents.
0:38
First, consult the user research.
0:41
It will guide you to discover
the user's goals and emotional states.
0:43
A persona is a user profile
of a theoretical user,
0:48
who represents a larger
group of potential users.
0:52
Persona's help place a name and a face
to decisions you make about your users.
0:56
Here's businessman Bryan, a sales manager
who travels frequently for his work.
1:02
He's mainly concerned with getting
to his destinations on time.
1:06
So he isn't late for important meetings.
1:10
The other persona we have research
notes on is Social Sarah.
1:14
Here's her persona, she uses the app for
very different reasons.
1:18
She's a full-time college student
who needs safe transportation.
1:23
She primarily uses the app to go to
late night parties during the weekend.
1:27
She travels with her friends, so
1:32
being able to easily split
the fare is important.
1:34
The next set of user
research is empathy maps.
1:38
They're used to consider
the user's perception
1:42
of what happens as they use the product.
1:44
This helps shape our
insights into our users and
1:47
lets us focus on other thoughts and
feelings may be.
1:49
Let's look at Bryan and
Sarah's empathy maps.
1:53
As you can see,
there's a lot to learn about them.
1:57
So we'll be referring to these
documents as we go along.
2:00
The final piece of user research
we have is the user flow.
2:05
It's a document that outlines
the progression of ideal user behavior
2:09
through key moments and
their interaction with the product.
2:13
These two personas have
slightly different objectives.
2:16
Bryan wants to book a ride in advance for
just himself.
2:20
And Sarah wants to book a ride
immediately to share with her friends.
2:24
Overall though, they have a lot in common.
2:29
They both want to easily
get to their destinations.
2:31
So, we'll address both the general and
specific user needs as we wireframe.
2:34
In addition to these personas,
you may think of additional ones.
2:40
After all, lots of different
people use ridesharing apps.
2:44
The point is many types of
users will be using the app so
2:48
you'll want to identify and
anticipate their needs.
2:52
This sets the app up to have a useful and
frictionless user experience.
2:55
I'll start by drawing a wireframe for the
homepage, this is a key screen in the app.
3:00
At later stages,
I'll create wireframes for other screens.
3:06
Now, let's start sketching the homepage.
3:10
For these wireframes, we won't concern
ourselves with whether it's an Android or
3:13
iOS app.
3:18
We'll just consider it a mobile app.
3:19
For starters, let's figure out what
content we want on the screen.
3:22
I'll draw the individual components and
then we'll put it all together later.
3:26
First, let's imagine the default
experience for the vast majority of users.
3:31
Most users want to get a ride
right away so perhaps,
3:37
we could show a map that
shows available cars nearby
3:40
Great.
3:59
Now I want to know where the user wants
to go, so I'll add in a destination input
4:01
Now the map can include the expected pick
up time and the estimated time of arrival.
4:19
Transparency of information
regarding timing
4:25
is key to making this
a trustworthy experience.
4:28
Now, let's get in to the specifics of
what would be useful for the personas.
4:32
What might Bryan want to see?
4:37
He's a busy guy that's trying to get
to his important meetings on time.
4:39
Plus, he gets anxious about
potentially missing his flight, so
4:43
he prefers to get to the airport
two hours before the takeoff time.
4:48
Let's give him an
option to schedule his rides in advance.
4:52
That way, he can rest assured his rides
will arrive on time and he won't have
4:55
to nervously order a ride right as
he's scrambling to get out the door.
5:00
He already knows his set schedule, so
he wants to organize his trip in advance.
5:05
That way, all he has to do is wait for the
notification that his ride is approaching,
5:10
and then off he goes.
5:15
Since the default experience assumes
the user wants a ride right away,
5:17
let's add a button to
schedule a ride later.
5:21
It'll take a few more screens
to complete this flow.
5:25
But let's explore other
features on the screen for now.
5:27
What other elements would
be helpful to include?
5:32
Users will need an input field
to add their destination.
5:35
Perhaps, it would be helpful to show
recently visited places to choose from for
5:38
quick access to common destinations.
5:43
For example,
Bryan is from Denver, Colorado.
5:46
So he frequently travels to and
from the Denver International Airport.
5:50
So let's make sure it's easy for
him to select that
5:54
destination without
typing it in every time.
6:00
We also want to be mindful
of user's budgets.
6:04
Different customers will have different
amounts of money that they'd like to pay
6:07
for different levels of service.
6:11
It's industry standard for
6:14
ridesharing apps to offer
a selection of cars to choose from.
6:15
For someone like Bryan, who is concerned
with the cleanliness of the car,
6:18
he may prefer to choose a car
upgrade to impress a client.
6:22
So let's show the car options, too.
6:26
Maybe we want to include a toggle, so
Bryan can easily sort through the choices.
6:29
For budget conscious
users like social Sarah,
6:34
it would be helpful to include cost
estimates before confirming the ride.
6:36
And since she likes to split the fare
with her friends, let's make it easy for
6:41
her to estimate that too.
6:45
Also, since she's in the group,
6:47
let's also show the number of
seats available in the cars.
6:48
What other secondary types of content
would be helpful for the user?
6:56
Lets include a navigation to other areas
in the app, such as account settings or
7:00
payment information.
7:04
Businessman Bryan uses a company card so
he may want to add his work credit
7:07
card upfront, so as to not accidentally
charge his personal credit card.
7:12
Providing a clear link to that
screen helps him find what he needs.
7:18
We could put in a menu icon in
the top left of the screen.
7:22
This is often referred
to as a hamburger icon.
7:26
So this sort of looks like a hamburger.
7:29
When clicked, it can slide up in
a panel with the navigation links.
7:31
One of those links would
be the payment screen,
7:36
where Bryan could enter his credit card.
7:38
One usability issue with this types of
menus is that the navigation gets buried
7:41
away, and it's difficult to discover.
7:45
To solve this, we could go with the UI
pattern originally seen in iOS apps,
7:48
a tab bar.
7:53
Due to their popularity,
we see them in android apps too,
7:55
where they are commonly referred
to as bottom navigation bars.
7:57
Their location and
8:02
persistent visibility across screens
makes navigation easy for users.
8:03
Also consider, what might internal
stakeholders want to see?
8:09
Perhaps, the marketing team
wants to feature our promo.
8:13
How might we make that promotion
available to the user?
8:16
Let's draw a banner.
8:20
Now, let's try a different take on it,
and draw an icon button.
8:27
Unsure of what the icon should be?
8:31
Feel free to draw an X as a place holder otherwise,
8:34
look into the teacher's note for
an icon inspiration website.
8:37
To show depth,
darken the outline of the button.
8:47
Now that you have an idea of what content
you like on the homepage, you can start
8:59
putting those elements together to
form a wireframe of the full screen.
9:04
Get a piece of white paper and a pen,
you could start drawing a single wireframe
9:08
on a whole sheet of paper, but I want to
show you a technique called Crazy 8's.
9:13
In this exercise, you'll create
eight small wireframes of a screen.
9:18
It's a fun exercise that forces you
to think of several different ways
9:22
to design a screen.
9:26
The small scale of each wireframe reduces
the pressure you might feel when creating
9:29
something larger and more detailed.
9:33
Start by folding the paper
in half lengthwise.
9:36
Then fold it in half the other way.
9:46
Then fold it in half again.
10:01
Open the paper up, and
you'll see there are now eight rectangles.
10:10
In each rectangle,
I'll be drawing a single wireframe.
10:15
In each one will be for the same screen.
10:18
Here is a page I did earlier.
10:21
These quick sketches are helpful because
you may start out with one idea,
10:26
do the exercise and realize there are many
alternative ways to lay out the page.
10:30
Wireframe number five may have been
your best idea, but you would have never
10:35
discovered it without forcing yourself
to iterate through multiple ideas.
10:39
Give yourself permission to be
messy with these wireframes.
10:44
Drawing neatly is not the goal.
10:48
You want to be drawing neatly enough so
you can understand what's going on, but
10:50
these won't be shown to stakeholders.
10:54
So they don't need to
be presentation worthy.
10:56
There's so many different possibilities.
11:00
Keep sketching and iterating.
11:02
You never know when your
best idea may appear.
11:04
So keep drawing different variations.
11:07
I suggest taking eight minutes to draw
your own set of crazy 8 wireframes.
11:10
Time boxing it to only
one minute to drawing
11:15
allows you to try out ideas
with minimal self editing.
11:18
Eight variations is a decent
number of designs to work with.
11:22