1
00:00:00,630 --> 00:00:01,710
Hello and welcome back.

2
00:00:01,740 --> 00:00:05,850
We're going to talk about creating our very own user flow for onboarding.

3
00:00:06,000 --> 00:00:11,730
So on our last video, we sped up our workflow a bit and now we have a bunch of different components

4
00:00:11,730 --> 00:00:14,760
that we can just plop into our designs really, really easily.

5
00:00:15,150 --> 00:00:20,070
And we're going to use those to just kind of signify fields text.

6
00:00:20,070 --> 00:00:22,380
And we can work out those details just a little bit later.

7
00:00:22,380 --> 00:00:28,380
But we really want to understand what users need to click, what they need to do, what they see and

8
00:00:28,380 --> 00:00:29,730
what gets into the next step.

9
00:00:30,420 --> 00:00:32,160
I think for the first user flow.

10
00:00:32,190 --> 00:00:37,080
We should probably do something like onboarding or those very first screens that a user sees when they

11
00:00:37,080 --> 00:00:38,220
first come to our product.

12
00:00:38,610 --> 00:00:43,380
We really want to make a great impression and we want to push them into the funnel of registering and

13
00:00:43,380 --> 00:00:45,660
telling us about their interests.

14
00:00:46,290 --> 00:00:48,460
So let's actually do that right now.

15
00:00:48,480 --> 00:00:52,440
So what we're going to do is we're going to press F and we're going to create a frame.

16
00:00:52,440 --> 00:00:53,700
It doesn't matter which size.

17
00:00:54,590 --> 00:00:59,990
I like to have a big canvas to work with because, you know, we did actually show a couple of those

18
00:00:59,990 --> 00:01:03,800
that went beyond three steps, but I think we're going to probably go to four or five steps, and that's

19
00:01:03,800 --> 00:01:04,550
totally fine.

20
00:01:04,960 --> 00:01:05,840
We're going to keep it simple.

21
00:01:06,020 --> 00:01:08,420
So we'll call this on board and flip.

22
00:01:09,530 --> 00:01:15,830
What we're going to do here, if you notice that we have our assets and layers tabs, so if I go into

23
00:01:15,830 --> 00:01:23,030
assets, I can go into our local components and I'm going to go into user flow, demo into their components

24
00:01:23,030 --> 00:01:29,750
screen right components section, which is actually this frame over here.

25
00:01:30,410 --> 00:01:34,160
And I can start pulling components from there into my user flows.

26
00:01:34,880 --> 00:01:38,150
So what I do is I'm just going to grab that screen background.

27
00:01:38,150 --> 00:01:40,270
I'm going to grab this as well.

28
00:01:41,380 --> 00:01:44,340
I'm not sure what else I'm going to grab right now, so let's think about this flow.

29
00:01:44,920 --> 00:01:49,970
So step one of creating a user flow is to have a title.

30
00:01:50,560 --> 00:01:52,960
So let's think about our title.

31
00:01:53,140 --> 00:01:58,960
I tell should be what do we want the user to actually accomplish during the onboarding?

32
00:01:59,980 --> 00:02:06,550
I want the user to register with our product.

33
00:02:09,630 --> 00:02:10,430
Can.

34
00:02:13,740 --> 00:02:16,020
I like to keep things really neat.

35
00:02:16,420 --> 00:02:20,550
I like using this font, Gilroy's really nice font.

36
00:02:26,200 --> 00:02:27,580
Well, let's just set the.

37
00:02:30,770 --> 00:02:32,280
OK, that's it, order for now.

38
00:02:32,540 --> 00:02:35,390
So we want to our user to register with our product.

39
00:02:35,990 --> 00:02:41,330
Step one, when they come to our welcome screen, they should probably see something like.

40
00:02:42,810 --> 00:02:51,180
I don't know, like a welcome band or maybe a button, probably see some text to some welcome text.

41
00:02:53,840 --> 00:03:00,410
That's just saying, hey, welcome to Habitual, we are an awesome product and you should totally register

42
00:03:00,410 --> 00:03:00,830
with us.

43
00:03:01,740 --> 00:03:09,120
If we think about this a little differently, we'll notice that there is probably a decision moment

44
00:03:09,120 --> 00:03:11,850
here, we shouldn't force the user to register.

45
00:03:12,540 --> 00:03:17,010
We could probably give them the option to skip and go right into our product.

46
00:03:17,010 --> 00:03:18,510
And we can handle that later.

47
00:03:18,930 --> 00:03:21,360
But we should probably just.

48
00:03:22,840 --> 00:03:24,450
Have a screen down here as well.

49
00:03:29,190 --> 00:03:35,460
And maybe we'll have like this can signify some sort of like Skype text.

50
00:03:42,550 --> 00:03:45,860
Oops, I didn't actually make a smaller one.

51
00:03:46,690 --> 00:03:50,590
So what we could do, we can duplicate this.

52
00:03:52,070 --> 00:03:53,300
Going to our stroke.

53
00:03:55,390 --> 00:03:56,440
We're going to say none.

54
00:03:57,760 --> 00:03:59,920
And we're going to save around.

55
00:04:00,940 --> 00:04:06,250
On our cap ends that way, we have a nice kind of hill looking cap.

56
00:04:07,520 --> 00:04:08,550
And there we go.

57
00:04:08,570 --> 00:04:11,630
Let's actually open this up just a bit.

58
00:04:14,140 --> 00:04:17,950
So that way we have a little bit more breathing room, because we're gonna have to right underneath

59
00:04:17,980 --> 00:04:20,380
these, so let's open up our frame.

60
00:04:20,380 --> 00:04:22,590
Like I said, like the size of the frame doesn't really matter.

61
00:04:22,630 --> 00:04:25,090
I know you can clean that up just later.

62
00:04:25,870 --> 00:04:30,550
Right now, I am focused on creating a good flow.

63
00:04:32,010 --> 00:04:35,810
OK, so what will group these actions go to our last panel.

64
00:04:36,770 --> 00:04:41,630
So let's do Comen Z just to show you what just happened there, will select both of these since there

65
00:04:41,630 --> 00:04:43,580
are instances of our initial arrow.

66
00:04:43,970 --> 00:04:45,680
So we want to actually disconnect that.

67
00:04:45,710 --> 00:04:51,080
So what you can do is you can right click and you can detach that instance or you can select them and

68
00:04:51,080 --> 00:04:55,840
click option command and B and you'll notice that they're both frames again.

69
00:04:56,510 --> 00:05:01,220
And if we do option command K now we can name the second arrow.

70
00:05:03,710 --> 00:05:10,280
And we can copy that and paste it and take this and put it into our components file up here.

71
00:05:13,040 --> 00:05:14,510
So now we have another component to use.

72
00:05:15,080 --> 00:05:18,710
OK, so now I know that step one.

73
00:05:20,710 --> 00:05:21,400
Well, that's right.

74
00:05:21,430 --> 00:05:22,240
Step one.

75
00:05:25,290 --> 00:05:27,720
And let's make that smaller.

76
00:05:30,390 --> 00:05:34,070
And let's start writing a little bit of a description for it.

77
00:05:39,450 --> 00:05:42,030
OK, now we have our text perfect.

78
00:05:43,420 --> 00:05:47,680
So what we can do is our description should be something like.

79
00:05:48,820 --> 00:05:59,290
What is the policy and what do they do to get to the next screen so user arrives are welcomed screens

80
00:06:00,070 --> 00:06:08,730
and notices a button to proceed forward for registration.

81
00:06:10,810 --> 00:06:16,090
This text is a little too big, we can pump that down just a bit.

82
00:06:17,830 --> 00:06:23,370
The user is also able to practice a second paragraph.

83
00:06:23,710 --> 00:06:32,410
The user is also able to skip this step and go straight to our home page.

84
00:06:33,160 --> 00:06:36,520
So now we know what the user can do on step one.

85
00:06:38,130 --> 00:06:43,980
And what they can do here, so I know that step one, I'm going to be able to click this big primary

86
00:06:44,490 --> 00:06:50,370
call to action and go straight to the registration or I can avoid that and skip it.

87
00:06:50,370 --> 00:06:53,280
And I'll eventually have to register once I check out.

88
00:06:53,280 --> 00:06:58,440
But I can go right into the home screen and we can give them a little bit of a teaser on why our app

89
00:06:58,440 --> 00:06:59,000
is so great.

90
00:06:59,580 --> 00:07:04,050
So step two, what happens on step two?

91
00:07:04,800 --> 00:07:11,640
So step two, we're not going to really focus on the actual home screen right now, but we're going

92
00:07:11,640 --> 00:07:12,780
to focus on step two.

93
00:07:13,080 --> 00:07:20,280
And step two should be something like the user starts the kind of the registration process.

94
00:07:20,280 --> 00:07:31,380
So maybe it's like the user is prompted to add their email and password.

95
00:07:33,480 --> 00:07:40,110
They can confirm those details and proceed.

96
00:07:45,710 --> 00:07:50,570
OK, so let's just build that out really quickly and use the assets tab right here.

97
00:07:52,380 --> 00:07:53,700
There is probably.

98
00:07:55,750 --> 00:07:57,730
This should be.

99
00:07:59,350 --> 00:08:02,930
Let's go back to our component's page so we can just fix that really quickly.

100
00:08:03,220 --> 00:08:08,380
So another interesting thing you can do here is you can right click and go to the master component and

101
00:08:08,380 --> 00:08:08,980
over here.

102
00:08:10,010 --> 00:08:11,980
022 is like top.

103
00:08:13,170 --> 00:08:15,480
Bring that right in and now.

104
00:08:16,760 --> 00:08:21,500
We can select top and bottom, so perfect.

105
00:08:23,250 --> 00:08:28,140
Let's go back to our float so we have an input, we have a couple of inputs.

106
00:08:30,140 --> 00:08:31,940
And we have a primary in.

107
00:08:33,780 --> 00:08:34,060
Great.

108
00:08:34,710 --> 00:08:35,910
OK, that's up to.

109
00:08:45,080 --> 00:08:53,770
Now, step three, what should the user see, the user should probably see a step to add their photo,

110
00:08:53,870 --> 00:08:56,300
possibly so we can.

111
00:08:58,560 --> 00:09:03,870
The user can add a photo or skip that step.

112
00:09:04,200 --> 00:09:06,570
So we do want to make this registration fairly easy.

113
00:09:06,570 --> 00:09:12,960
So the ability to actually skip the step is kind of key, especially here where a photo isn't necessarily

114
00:09:12,960 --> 00:09:13,380
needed.

115
00:09:14,460 --> 00:09:18,350
So we'll just write that in and you'll notice the way I'm actually writing.

116
00:09:18,360 --> 00:09:20,180
It's not really friendly.

117
00:09:20,190 --> 00:09:22,130
It's kind of extremely logical.

118
00:09:22,320 --> 00:09:28,890
And the reason why I'm doing that is because I really want people to understand and be able to kind

119
00:09:28,890 --> 00:09:29,810
of read this once.

120
00:09:29,820 --> 00:09:32,870
And it's kind of like a manual or a blueprint in a way.

121
00:09:32,910 --> 00:09:35,490
I really want them to understand it at first glance.

122
00:09:36,690 --> 00:09:39,840
So that is step three step for now.

123
00:09:39,840 --> 00:09:45,690
We probably get into some more interesting things like actually adding their interests.

124
00:09:46,420 --> 00:10:00,330
So step for the user can know the user can now pick interests and hobbies to personalize their shopping

125
00:10:01,350 --> 00:10:02,310
experience.

126
00:10:03,400 --> 00:10:07,150
So this is probably like headline.

127
00:10:08,330 --> 00:10:13,100
There's probably some text here, there's probably a bunch of little buttons, like little pills or

128
00:10:13,100 --> 00:10:19,010
checkboxes that they can take off, so it's but a headline up here, SkyBitz and text.

129
00:10:21,560 --> 00:10:28,940
Maybe there's a series of checkboxes we can actually just modify these if we want to speed things along.

130
00:10:33,010 --> 00:10:40,390
OK, so now they are prompted to actually pick their interests and hobbies to personalize their experience,

131
00:10:41,110 --> 00:10:46,480
and the next step is what's the next step?

132
00:10:46,480 --> 00:10:46,860
Be here.

133
00:10:47,320 --> 00:10:48,690
So they pick their interests.

134
00:10:49,210 --> 00:10:51,610
They've possibly uploaded a profile.

135
00:10:52,080 --> 00:10:53,740
You know, maybe we're missing a step here.

136
00:10:53,740 --> 00:10:54,700
And that's totally fine.

137
00:10:54,700 --> 00:10:55,750
We can review these.

138
00:10:55,990 --> 00:11:01,760
I often just go back to my team, just get some insight on what they think of our current flow.

139
00:11:01,990 --> 00:11:05,520
So you should definitely do this, not necessarily in a silo.

140
00:11:05,530 --> 00:11:07,060
Get some feedback really quickly.

141
00:11:09,180 --> 00:11:22,050
We're going to end our fall right here, so step five, success, the user has registered for the individual

142
00:11:22,170 --> 00:11:29,880
product and can now access all of our features.

143
00:11:31,220 --> 00:11:32,240
So essentially.

144
00:11:34,400 --> 00:11:41,900
The user will see a success screen, maybe it is this little ball, maybe it's some, like, welcome.

145
00:11:43,530 --> 00:11:46,260
Screen text that we use there.

146
00:11:47,710 --> 00:11:53,510
That is perfect, and that's it, that's essentially our user fee for onboarding.

147
00:11:54,160 --> 00:11:55,210
It's really detailed.

148
00:11:55,210 --> 00:11:58,540
We understand the actual purpose of the flow.

149
00:11:58,570 --> 00:12:04,330
We understand that there's a possible break here and we need to think about what that looks like for

150
00:12:04,330 --> 00:12:04,840
the user.

151
00:12:05,050 --> 00:12:09,370
We started building out these steps a little bit more in thinking about them, that this is a pretty

152
00:12:09,370 --> 00:12:11,830
linear flow right now.

153
00:12:12,240 --> 00:12:18,220
There are some moments where the user can make a decision like over here, they can actually just you

154
00:12:18,220 --> 00:12:19,610
know, they can skip a step.

155
00:12:20,230 --> 00:12:23,480
Now, we're starting to think about all the elements that are going to be here as well.

156
00:12:23,980 --> 00:12:26,800
If you have more refined sketches, you can actually start wireframe.

157
00:12:26,800 --> 00:12:30,610
And at this point, there really is no right or wrong way to do this.

158
00:12:30,910 --> 00:12:33,190
I like to think about this very conceptually.

159
00:12:33,190 --> 00:12:37,240
So I'm not really worried about, like, the visual design or anything like that just at the moment.

160
00:12:37,240 --> 00:12:42,550
But I do know that I'm starting to think about this from a user's perspective and what they should be

161
00:12:42,550 --> 00:12:44,530
seeing and what they should be doing at each step.

162
00:12:45,010 --> 00:12:48,760
So this is our fault for registering with our product.