1
00:00:00,000 --> 00:00:04,681
[MUSIC]

2
00:00:04,681 --> 00:00:07,285
Based on everything you
know from your research,

3
00:00:07,285 --> 00:00:10,020
it's time to start ideating
potential solutions.

4
00:00:11,270 --> 00:00:15,450
Using the problem statement worksheet and
your user journey map as your guide,

5
00:00:15,450 --> 00:00:18,980
begin to brainstorm some
ideas by hand sketching.

6
00:00:18,980 --> 00:00:21,570
This can be an individual exercise, or

7
00:00:21,570 --> 00:00:25,930
you can also facilitate group sketching
sessions with your product team.

8
00:00:25,930 --> 00:00:30,180
All you need is some pen and paper, or
any other medium you'd like to use.

9
00:00:30,180 --> 00:00:32,940
When you're exploring solutions,
try to go broad and

10
00:00:32,940 --> 00:00:36,420
brainstorm a lot of solutions
before narrowing them down.

11
00:00:36,420 --> 00:00:41,010
The goal of this exercise is to
explore as many ideas as possible.

12
00:00:41,010 --> 00:00:44,240
Don't feel intimidated or
shy about your drawing skills.

13
00:00:44,240 --> 00:00:46,810
These sketches aren't meant
to be really refined.

14
00:00:46,810 --> 00:00:48,390
But they're meant to be quick drawings so

15
00:00:48,390 --> 00:00:51,810
that you can get as many
ideas as you can on paper.

16
00:00:51,810 --> 00:00:56,640
Think about the UX flow, what screens
you'll need, the flow of these screens and

17
00:00:56,640 --> 00:01:01,380
how users are interacting with the app
as you're creating these wireframes.

18
00:01:01,380 --> 00:01:03,740
After going through a few
rounds of sketching and

19
00:01:03,740 --> 00:01:07,800
putting your ideas on paper,
try to narrow down some options.

20
00:01:07,800 --> 00:01:10,500
Some things that will help
to narrow solution ideas

21
00:01:10,500 --> 00:01:13,850
is considering technical limitations or
feasibility.

22
00:01:13,850 --> 00:01:17,150
This is where communicating
with engineers is important.

23
00:01:17,150 --> 00:01:20,870
You can also use a dot voting method,
where each person on your team

24
00:01:20,870 --> 00:01:24,940
votes on the ideas that they like most
by putting dots or stickers on them.

25
00:01:26,560 --> 00:01:28,550
Once you've narrowed down your ideas,

26
00:01:28,550 --> 00:01:31,770
it's good to have two very
different solution ideas, so

27
00:01:31,770 --> 00:01:36,650
that you can test both of them and find
out which is more successful with users.

28
00:01:36,650 --> 00:01:38,490
In order to test these ideas,

29
00:01:38,490 --> 00:01:41,890
we'll need to create higher
fidelity mockups of our sketches.

30
00:01:41,890 --> 00:01:44,470
We'll be using a software
tool called Sketch.

31
00:01:44,470 --> 00:01:49,450
Which you can also use by downloading
a free trial version from sketchapp.com.

32
00:01:49,450 --> 00:01:51,090
If you're not working on a Mac,

33
00:01:51,090 --> 00:01:56,350
you can also use tools like Figma which
we'll be using in our prototype later on.

34
00:01:56,350 --> 00:02:00,010
Once you've downloaded Sketch,
open a file called Craigslist,

35
00:02:00,010 --> 00:02:02,620
which is provided in the project files.

36
00:02:02,620 --> 00:02:07,360
If you're using Figma, you can simply
import the Sketch file and it should work.

37
00:02:07,360 --> 00:02:11,600
In the Sketch file, there will be a page
in the left side bar called Assets.

38
00:02:11,600 --> 00:02:12,750
These are some brand and

39
00:02:12,750 --> 00:02:16,570
UI elements provided to help you
get started with your mockups.

40
00:02:16,570 --> 00:02:17,980
Under the Template page,

41
00:02:17,980 --> 00:02:21,180
you'll see a template that you
can use to help you get started.

42
00:02:21,180 --> 00:02:22,790
When you're starting a new project,

43
00:02:22,790 --> 00:02:26,250
it's helpful to start by
setting up a grid or a layout.

44
00:02:26,250 --> 00:02:30,540
Go to the View menu and
under Canvas select Layout Settings.

45
00:02:30,540 --> 00:02:34,556
You can set the number of columns and
rows, as well as the gutters,

46
00:02:34,556 --> 00:02:36,435
which is the space in between.

47
00:02:39,140 --> 00:02:42,369
Once you've set up your grid,
you can turn the grid on or

48
00:02:42,369 --> 00:02:45,990
off at any time by pressing
the Ctrl key and L.

49
00:02:45,990 --> 00:02:47,810
Now let's' take your hand sketches and

50
00:02:47,810 --> 00:02:51,060
begin creating a mockup,
one screen at a time.

51
00:02:51,060 --> 00:02:54,300
Don't worry too much about getting
everything right the first time,

52
00:02:54,300 --> 00:02:57,200
in terms of the UI elements and
visual design.

53
00:02:57,200 --> 00:03:01,160
Sketch provides standard iOS
elements under the Insert menu,

54
00:03:01,160 --> 00:03:03,350
which you can use instead
of creating them yourself.

55
00:03:11,670 --> 00:03:15,830
Then start thinking about the UI elements
for this screen, by referring back to your

56
00:03:15,830 --> 00:03:19,940
hand sketches and start creating
those elements on the screen.

57
00:03:19,940 --> 00:03:24,120
You can use the UI elements provided in
the file or feel free to create your own.

58
00:03:25,450 --> 00:03:28,670
Drag and drop icons,
whether they're SVGs, PNGs, or

59
00:03:28,670 --> 00:03:31,170
Illustrator files, into your art board.

60
00:03:31,170 --> 00:03:35,370
You can also add text and use
the inspector on the right to change size,

61
00:03:35,370 --> 00:03:38,040
color, justification, fonts and so on.

62
00:03:39,260 --> 00:03:43,290
Think about how to translate
Craigslist brand to the app interface.

63
00:03:43,290 --> 00:03:48,620
What are some colors, shapes, imagery,
or illustrations you can use?

64
00:03:48,620 --> 00:03:52,520
How can typography, space and
layouts enhance the usability and

65
00:03:52,520 --> 00:03:53,960
the aesthetic appeal of the app?

66
00:03:55,160 --> 00:03:57,450
One of the things from talking to users,

67
00:03:57,450 --> 00:04:01,920
was that while Craigslist users want a
more visually appealing UI, they also like

68
00:04:01,920 --> 00:04:06,800
the familiarity of the Craigslist brand,
which hasn't changed for so many years.

69
00:04:06,800 --> 00:04:09,048
And there's a sense of charm
that shouldn't be lost by

70
00:04:09,048 --> 00:04:10,130
over-designing the app.

71
00:04:12,016 --> 00:04:15,950
For this mockup, I tried to make the home
screen more visually appealing while

72
00:04:15,950 --> 00:04:21,040
using Craigslist brand colors and making
sure that it still feels like Craigslist.

73
00:04:21,040 --> 00:04:24,907
As I was thinking about how to increase
the feeling of trust and safety for

74
00:04:24,907 --> 00:04:29,570
users, one idea was to bring the existing
safety tips that are currently buried on

75
00:04:29,570 --> 00:04:33,620
the website, more to the forefront,
while the user experiences the app.

76
00:04:33,620 --> 00:04:36,890
What if users saw these safety
tips at the beginning of the app,

77
00:04:36,890 --> 00:04:39,030
before they start using the app?

78
00:04:39,030 --> 00:04:42,050
On the categories page,
I wanted to see what it would look

79
00:04:42,050 --> 00:04:45,730
like if we added icons to
represent all the categories.

80
00:04:45,730 --> 00:04:47,830
Does it enhance
the browsing experience for

81
00:04:47,830 --> 00:04:53,090
users, does it bring more pleasure
to users, or is it more confusing?

82
00:04:53,090 --> 00:04:55,790
Does it still feel simple and
straight forward?

83
00:04:55,790 --> 00:04:59,760
And lastly, on the search results page,
I was thinking of some ways to make it

84
00:04:59,760 --> 00:05:04,050
easy and less overwhelming for
users to discover and browse the post.

85
00:05:04,050 --> 00:05:08,730
Perhaps by having larger images and
more space between the thumbnails.

86
00:05:08,730 --> 00:05:11,560
Especially considering
the size of the mobile screen.

87
00:05:11,560 --> 00:05:15,600
You don't wanna cramp any small thumbnails
and make it feel overwhelming to users.