1
00:00:00,900 --> 00:00:07,620
Let's jump right back into creating some more user flows, so we left off at registering within our

2
00:00:07,620 --> 00:00:08,280
product.

3
00:00:08,770 --> 00:00:15,000
I think the next user flow we should probably think about is, you know, maybe finding a product,

4
00:00:15,210 --> 00:00:20,310
something a little bit more interesting, but not necessarily more interesting, but possibly as a little

5
00:00:20,310 --> 00:00:20,970
bit of risk.

6
00:00:22,110 --> 00:00:22,650
So.

7
00:00:23,960 --> 00:00:31,700
And what I'm going to do is just delete this, I'm going to rename this to searching for a product fitting

8
00:00:31,730 --> 00:00:33,620
for a product.

9
00:00:35,390 --> 00:00:41,060
OK, so there's multiple ways to find products within our application, we've already kind of understand

10
00:00:41,060 --> 00:00:45,350
that let's start creating user flows for each type.

11
00:00:46,040 --> 00:00:53,960
The one that we're going to focus on right now, at least, is finding the right product through search.

12
00:00:55,760 --> 00:00:59,600
OK, so let's get right into this.

13
00:01:01,230 --> 00:01:02,640
Let's just start afresh.

14
00:01:02,670 --> 00:01:06,720
We have our first step, obviously not this step, but we'll work on that.

15
00:01:06,930 --> 00:01:14,910
OK, so step one, when I'm starting to search at the home screen, so I probably need an input.

16
00:01:15,780 --> 00:01:22,530
There's probably a bunch of stuff here and maybe there's like a headline, some large products.

17
00:01:23,790 --> 00:01:28,200
You know, we kind of made this so that the before maybe we should have saved that as a component of

18
00:01:28,200 --> 00:01:28,650
its own.

19
00:01:28,800 --> 00:01:32,460
But so, OK, we have some small products.

20
00:01:33,000 --> 00:01:33,480
I mean.

21
00:01:34,960 --> 00:01:41,740
If we were to try to create a flow for finding a product, we could probably find one through this route,

22
00:01:41,770 --> 00:01:44,110
whether it's like a small product or a large product.

23
00:01:44,110 --> 00:01:46,800
And, you know, those flows will be different from the one we're creating.

24
00:01:46,810 --> 00:01:49,870
So let's focus on just search.

25
00:01:49,880 --> 00:01:54,400
Actually, you know what I like to highlight that make it look like a.

26
00:01:56,510 --> 00:02:00,800
And that's another thing you can do with user flows, you can distinguish based off of color and stuff

27
00:02:00,800 --> 00:02:03,170
like that, we can do that with our search over here.

28
00:02:03,770 --> 00:02:12,650
Step one, the user is able to begin their search from the home screen.

29
00:02:13,530 --> 00:02:16,160
I called the welcome screen, but it's actually the only screen.

30
00:02:16,880 --> 00:02:21,710
These are able to begin their search from the home screen, and that's basically it.

31
00:02:22,580 --> 00:02:23,570
So that's step one.

32
00:02:24,630 --> 00:02:26,390
Let's just copy that over.

33
00:02:28,010 --> 00:02:29,540
Step two now.

34
00:02:29,540 --> 00:02:31,040
Watch it step to be.

35
00:02:31,580 --> 00:02:35,150
So, like I said before, we can actually start creating.

36
00:02:36,860 --> 00:02:42,830
Like this actually applies here as well, so we'll know that we'll need to create another flow for.

37
00:02:45,480 --> 00:02:52,410
Selecting a product directly, so sometimes I'll leave like a little note here and just say step two

38
00:02:52,410 --> 00:03:05,670
point one or something like that, the user is also able to find the right product if it shows up on

39
00:03:06,000 --> 00:03:13,230
the screen so we can actually create a feel for that if we want to afterwards.

40
00:03:13,260 --> 00:03:15,350
Now, I know that's just there as a reminder.

41
00:03:15,810 --> 00:03:19,410
So the user is able to begin their search from the home screen.

42
00:03:19,890 --> 00:03:22,320
OK, and what happens next?

43
00:03:23,340 --> 00:03:27,790
So the next step, lets just copy that over.

44
00:03:28,320 --> 00:03:34,210
Perfect step to actually let's just finish this off just a little bit.

45
00:03:34,380 --> 00:03:44,370
The user can click the search input, so once they've clicked the input.

46
00:03:46,440 --> 00:03:56,070
There is something here that happens and that should probably be them entering their search, so what

47
00:03:56,070 --> 00:03:58,050
can we signify is that.

48
00:03:59,810 --> 00:04:11,560
We can just say this is like a keyboard, so the user receives a keyboard prompt within a search overlay

49
00:04:12,250 --> 00:04:19,090
and is able to enter their search perfect.

50
00:04:19,120 --> 00:04:20,090
So that's step two.

51
00:04:20,890 --> 00:04:22,240
Now they have a prompt.

52
00:04:22,600 --> 00:04:24,880
They're able to enter their search.

53
00:04:28,790 --> 00:04:33,170
Now, when we were sketching, we started thinking about things like type ahead of it so we can actually

54
00:04:33,170 --> 00:04:34,050
highlight that here.

55
00:04:36,320 --> 00:04:41,030
OK, let's take so that we can use this as like part type of head results.

56
00:04:41,820 --> 00:04:52,580
So another figments, if if I'm going to press command shift and duplicate that, I can actually let

57
00:04:52,580 --> 00:04:58,430
it go and then press Kamandi to duplicate the exact same thing I just did so I can create multiple.

58
00:05:00,560 --> 00:05:09,230
Now, I'm just going to change the same color, I'm going to signify that these are actually the suggested

59
00:05:09,320 --> 00:05:10,030
results.

60
00:05:10,040 --> 00:05:11,960
So step three.

61
00:05:14,170 --> 00:05:32,200
As the user types, the product gives the user suggestions of potential searches, the user clicks on

62
00:05:32,200 --> 00:05:44,740
the search item that relates most to their intended search.

63
00:05:45,610 --> 00:05:52,930
So essentially what's happening here is the user is actually clicking on here as they are typing, they're

64
00:05:52,930 --> 00:05:58,930
getting suggested results and the user can actually just not click one of these, but they can just

65
00:05:58,930 --> 00:06:03,790
keep on going and click, enter whatever that is within the keyboard.

66
00:06:04,270 --> 00:06:08,650
But we're just going to highlight that they can actually click through a suggested result.

67
00:06:15,010 --> 00:06:20,050
OK, so step for let's jump right into that step for.

68
00:06:21,370 --> 00:06:22,600
What do they see now?

69
00:06:23,380 --> 00:06:25,150
Well, what do you think they see?

70
00:06:26,560 --> 00:06:31,810
Let's just remove some of that so they probably still have their search at the top.

71
00:06:33,320 --> 00:06:36,290
And it's going to continue to use this.

72
00:06:39,400 --> 00:06:51,100
And modify it from here on out, I'll use this as well to modify this well, what I can do here is go

73
00:06:51,100 --> 00:06:57,010
back to the master component and make this a bit more scalable.

74
00:06:57,490 --> 00:06:59,500
I fix the constraints there to make it left and right.

75
00:06:59,530 --> 00:07:04,900
So when I do adjust that frame, it's going to adjust with it so we can play around with that.

76
00:07:05,740 --> 00:07:07,360
So let's go back down.

77
00:07:08,630 --> 00:07:10,140
Ah, here we are.

78
00:07:10,670 --> 00:07:13,040
So let's fix that.

79
00:07:13,490 --> 00:07:16,670
So those are search results.

80
00:07:19,070 --> 00:07:32,480
OK, so these are the search results, so this is stuff for the user is presented with many search results

81
00:07:34,910 --> 00:07:43,220
and now they choose the product that they have been looking for.

82
00:07:45,050 --> 00:07:49,190
So another interesting thing here is, OK, I'm just going to highlight these really quickly.

83
00:07:50,480 --> 00:07:59,690
So let's just highlight those just so we can signify that this is being clicked.

84
00:08:00,780 --> 00:08:04,100
Like I said, I mean, there's no really right way of doing this.

85
00:08:04,100 --> 00:08:08,360
As long as you're explaining this really clearly to your audience, they're going to get it.

86
00:08:09,020 --> 00:08:14,750
Just make sure to use what I've told you in terms of like a very clear title, clear direction and clear

87
00:08:14,750 --> 00:08:15,410
details.

88
00:08:15,410 --> 00:08:17,350
And the rest is just kind of follow.

89
00:08:17,930 --> 00:08:22,580
But one thing I'm noticing here is that, you know, we spoke a little bit what the make up of this

90
00:08:22,580 --> 00:08:23,360
page could be.

91
00:08:23,960 --> 00:08:29,030
And I'm just going to create, like a little button in there.

92
00:08:29,450 --> 00:08:31,760
You know, maybe I'm thinking like, oh, wow.

93
00:08:31,760 --> 00:08:33,860
Like there is a filter here.

94
00:08:33,860 --> 00:08:35,590
And now we have to think about a filter flow.

95
00:08:36,080 --> 00:08:42,530
So as we go through individual flows that we're trying to solve for, we're going to find a bunch more

96
00:08:42,530 --> 00:08:43,970
that we're going to have to solve for.

97
00:08:44,390 --> 00:08:49,160
So this is the great thing about user flows and keeping them separate, because it really breaks things

98
00:08:49,160 --> 00:08:55,550
apart in a way, even though there are many to actually create and work through, it really helps us

99
00:08:55,550 --> 00:08:58,480
kind of make it much more manageable and understandable.

100
00:08:59,420 --> 00:09:03,920
So what I've done here is I've just highlighted the search results, so that's just going to indicate

101
00:09:03,920 --> 00:09:06,440
that a user is clicking through their.

102
00:09:08,320 --> 00:09:08,920
Perfect.

103
00:09:09,280 --> 00:09:15,700
Wow, while we are on step five, so what happens in step five, so they've clicked the search results

104
00:09:15,700 --> 00:09:21,550
and now they've found what they've been looking for and that is the product.

105
00:09:21,610 --> 00:09:23,800
So we're just going to kind of end this here.

106
00:09:26,390 --> 00:09:28,260
Let's just steal that again.

107
00:09:29,410 --> 00:09:34,930
So honestly, at this point, don't waste your time going crazy in terms of visual design or anything

108
00:09:34,930 --> 00:09:40,330
like that, we really just want to get into like it's the same concept as sketching.

109
00:09:40,330 --> 00:09:46,010
We just want to keep on generating ideas and we want to work through these and refine the details later.

110
00:09:46,870 --> 00:09:50,080
It's really easy to get bogged down by all that kind of stuff.

111
00:09:50,770 --> 00:09:56,380
So, OK, we have a CTA at the bottom, you know, like purchase this product or add it to your car.

112
00:09:56,710 --> 00:09:58,510
We have probably like a headline.

113
00:10:00,060 --> 00:10:01,980
We have some text.

114
00:10:03,850 --> 00:10:07,190
Maybe there is like similar products or options here.

115
00:10:07,960 --> 00:10:13,600
So there you go, we've kind of created some sort of wireframe very easily, took two seconds just using

116
00:10:13,600 --> 00:10:14,950
some of the components that we built.

117
00:10:14,950 --> 00:10:18,300
And we can even create a larger component library if we wanted to.

118
00:10:18,310 --> 00:10:24,790
But for the sake of moving with speed being a little lean, this is super easy just to do.

119
00:10:24,790 --> 00:10:26,730
If you're just quickly jumping into something.

120
00:10:27,580 --> 00:10:31,980
If you do this often and sometimes you will, maybe it's great to create your own kit.

121
00:10:32,860 --> 00:10:46,780
So step five, the user is now able to review the product that they had searched for and can decide

122
00:10:47,260 --> 00:10:53,450
if they want to add the item to their hearts.

123
00:10:54,070 --> 00:10:54,590
Perfect.

124
00:10:54,790 --> 00:10:59,050
So now I know that after this, there's going to be another flow hundred percent and we're going to

125
00:10:59,050 --> 00:11:00,100
tackle that soon.

126
00:11:00,730 --> 00:11:01,800
But this is our flow.

127
00:11:01,810 --> 00:11:07,630
So finding the right product through search step one, the user is able to begin their search from the

128
00:11:07,630 --> 00:11:08,410
home screen.

129
00:11:08,930 --> 00:11:09,870
There's our search bar.

130
00:11:09,880 --> 00:11:14,470
We do know that users can find a product elsewhere, so we'll probably create another floor for that.

131
00:11:15,040 --> 00:11:21,040
Step two is this user gets an overlay here with the keyboard and search.

132
00:11:21,910 --> 00:11:23,080
They can enter their.

133
00:11:24,110 --> 00:11:29,750
Details, and when they do that, they get suggested results here, they have the option of actually

134
00:11:29,750 --> 00:11:35,690
just clicking the button and going to the search results, page it just based off of their search.

135
00:11:35,690 --> 00:11:41,420
Or they can use one of their suggested results that we've given them to push them to the search results

136
00:11:41,420 --> 00:11:41,760
page.

137
00:11:42,380 --> 00:11:43,590
So that's what the user does here.

138
00:11:43,730 --> 00:11:49,510
The user actually clicks this button here and we can define that interaction a little bit more later.

139
00:11:50,540 --> 00:11:57,080
And now they see a list of search results and overhear what they're going to do is they're able to click

140
00:11:57,080 --> 00:12:02,750
on a search result and move to the next screen, next step in our flow, which is the product description

141
00:12:02,750 --> 00:12:03,110
page.

142
00:12:03,650 --> 00:12:09,890
We also do know that we probably need to make another flow for what happens if they don't find their

143
00:12:09,890 --> 00:12:10,410
product.

144
00:12:10,430 --> 00:12:13,690
What happens if they decide to filter?

145
00:12:13,730 --> 00:12:17,540
I mean, there are so many different scenarios just loaded in this one screen.

146
00:12:17,540 --> 00:12:22,610
And that's what I mean when we have to start asking ourselves some questions in terms of like, well,

147
00:12:22,610 --> 00:12:24,130
what is going to happen here?

148
00:12:24,140 --> 00:12:26,390
What happens if something doesn't go right?

149
00:12:26,570 --> 00:12:32,120
We often always design for the happy scenario, and that's totally fine because we do need to design

150
00:12:32,120 --> 00:12:32,810
for that scenario.

151
00:12:32,810 --> 00:12:35,810
But oftentimes that doesn't happen.

152
00:12:35,810 --> 00:12:39,760
So we need to make sure that the unhappy scenario is just as pleasant.

153
00:12:40,250 --> 00:12:47,300
So what happens here is they click on the search result and now they're right into our product description

154
00:12:47,300 --> 00:12:47,660
page.

155
00:12:48,320 --> 00:12:51,590
And from here they would probably either add the item to the card.

156
00:12:51,590 --> 00:12:53,820
They can actually add it to their wish list.

157
00:12:53,840 --> 00:12:58,640
So that's another scenario that we need to think about, a flow that we need to actually build out.

158
00:12:58,820 --> 00:13:01,070
And yeah, that's it.

159
00:13:01,100 --> 00:13:07,800
So this is our flow for finding the right product, the research.

160
00:13:08,420 --> 00:13:09,290
Great job, everyone.