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 it’s time to take what you know and start ideating on all potential solutions. In this video, you’ll learn the process of sketching and creating high fidelity mock-ups.
Design Project: Start ideating on solutions by hand sketching, then turn them into higher fidelity mock-ups in Sketch.
Access project files in the downloads tab
Further Reading:
Wireframing Tools:
[MUSIC]
0:00
Based on everything you
know from your research,
0:04
it's time to start ideating
potential solutions.
0:07
Using the problem statement worksheet and
your user journey map as your guide,
0:11
begin to brainstorm some
ideas by hand sketching.
0:15
This can be an individual exercise, or
0:18
you can also facilitate group sketching
sessions with your product team.
0:21
All you need is some pen and paper, or
any other medium you'd like to use.
0:25
When you're exploring solutions,
try to go broad and
0:30
brainstorm a lot of solutions
before narrowing them down.
0:32
The goal of this exercise is to
explore as many ideas as possible.
0:36
Don't feel intimidated or
shy about your drawing skills.
0:41
These sketches aren't meant
to be really refined.
0:44
But they're meant to be quick drawings so
0:46
that you can get as many
ideas as you can on paper.
0:48
Think about the UX flow, what screens
you'll need, the flow of these screens and
0:51
how users are interacting with the app
as you're creating these wireframes.
0:56
After going through a few
rounds of sketching and
1:01
putting your ideas on paper,
try to narrow down some options.
1:03
Some things that will help
to narrow solution ideas
1:07
is considering technical limitations or
feasibility.
1:10
This is where communicating
with engineers is important.
1:13
You can also use a dot voting method,
where each person on your team
1:17
votes on the ideas that they like most
by putting dots or stickers on them.
1:20
Once you've narrowed down your ideas,
1:26
it's good to have two very
different solution ideas, so
1:28
that you can test both of them and find
out which is more successful with users.
1:31
In order to test these ideas,
1:36
we'll need to create higher
fidelity mockups of our sketches.
1:38
We'll be using a software
tool called Sketch.
1:41
Which you can also use by downloading
a free trial version from sketchapp.com.
1:44
If you're not working on a Mac,
1:49
you can also use tools like Figma which
we'll be using in our prototype later on.
1:51
Once you've downloaded Sketch,
open a file called Craigslist,
1:56
which is provided in the project files.
2:00
If you're using Figma, you can simply
import the Sketch file and it should work.
2:02
In the Sketch file, there will be a page
in the left side bar called Assets.
2:07
These are some brand and
2:11
UI elements provided to help you
get started with your mockups.
2:12
Under the Template page,
2:16
you'll see a template that you
can use to help you get started.
2:17
When you're starting a new project,
2:21
it's helpful to start by
setting up a grid or a layout.
2:22
Go to the View menu and
under Canvas select Layout Settings.
2:26
You can set the number of columns and
rows, as well as the gutters,
2:30
which is the space in between.
2:34
Once you've set up your grid,
you can turn the grid on or
2:39
off at any time by pressing
the Ctrl key and L.
2:42
Now let's' take your hand sketches and
2:45
begin creating a mockup,
one screen at a time.
2:47
Don't worry too much about getting
everything right the first time,
2:51
in terms of the UI elements and
visual design.
2:54
Sketch provides standard iOS
elements under the Insert menu,
2:57
which you can use instead
of creating them yourself.
3:01
Then start thinking about the UI elements
for this screen, by referring back to your
3:11
hand sketches and start creating
those elements on the screen.
3:15
You can use the UI elements provided in
the file or feel free to create your own.
3:19
Drag and drop icons,
whether they're SVGs, PNGs, or
3:25
Illustrator files, into your art board.
3:28
You can also add text and use
the inspector on the right to change size,
3:31
color, justification, fonts and so on.
3:35
Think about how to translate
Craigslist brand to the app interface.
3:39
What are some colors, shapes, imagery,
or illustrations you can use?
3:43
How can typography, space and
layouts enhance the usability and
3:48
the aesthetic appeal of the app?
3:52
One of the things from talking to users,
3:55
was that while Craigslist users want a
more visually appealing UI, they also like
3:57
the familiarity of the Craigslist brand,
which hasn't changed for so many years.
4:01
And there's a sense of charm
that shouldn't be lost by
4:06
over-designing the app.
4:09
For this mockup, I tried to make the home
screen more visually appealing while
4:12
using Craigslist brand colors and making
sure that it still feels like Craigslist.
4:15
As I was thinking about how to increase
the feeling of trust and safety for
4:21
users, one idea was to bring the existing
safety tips that are currently buried on
4:24
the website, more to the forefront,
while the user experiences the app.
4:29
What if users saw these safety
tips at the beginning of the app,
4:33
before they start using the app?
4:36
On the categories page,
I wanted to see what it would look
4:39
like if we added icons to
represent all the categories.
4:42
Does it enhance
the browsing experience for
4:45
users, does it bring more pleasure
to users, or is it more confusing?
4:47
Does it still feel simple and
straight forward?
4:53
And lastly, on the search results page,
I was thinking of some ways to make it
4:55
easy and less overwhelming for
users to discover and browse the post.
4:59
Perhaps by having larger images and
more space between the thumbnails.
5:04
Especially considering
the size of the mobile screen.
5:08
You don't wanna cramp any small thumbnails
and make it feel overwhelming to users.
5:11
You need to sign up for Treehouse in order to download course files.
Sign up