Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
Now that you know the basic components of wireframes, we'll show you how to apply that knowledge to a real-world project.
New Terms:
- Persona: The user profile of a theoretical user who represents a larger group of potential users. These user profiles are helpful in putting a name and a face to decisions you make about your users.
- Empathy map: A tool used to consider the user’s perception of what happens as they use the product. This helps shape our insights into our users and lets us focus on what their thoughts and feelings may be.
- User flow: A document that outlines the progression of ideal user behavior through key moments in their interaction with a product
- Crazy Eights: A fast brainstorming exercise that challenges you to create eight different ideas, sometimes within a deadline of 8 minutes.
Resources:
- The Noun Project - icon inspiration
- Crazy 8's - from Google's Design Sprint Kit
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up