1
00:00:00,740 --> 00:00:01,430
Welcome back.

2
00:00:01,670 --> 00:00:07,010
Now we're going to talk about how we can create our very own form and the questions we often ask ourselves

3
00:00:07,010 --> 00:00:12,560
in terms of the types of input we want to use, we're probably not going to create our own components

4
00:00:12,560 --> 00:00:19,880
and go really deeper into what that looks like just yet, because we want to, you know, just come

5
00:00:19,880 --> 00:00:24,230
up with some quick concepts in terms of what types of content we're going to see on the page.

6
00:00:24,710 --> 00:00:31,790
Step number one, where are we going to find a form on our page within our product for our client habitual?

7
00:00:32,390 --> 00:00:37,340
I think, like you'll probably see, like log in and, you know, sign up.

8
00:00:37,730 --> 00:00:42,350
And I think probably like the biggest form we'll probably see is like the registration.

9
00:00:42,350 --> 00:00:43,880
And that's about it really.

10
00:00:44,340 --> 00:00:49,460
This is a type of product that doesn't necessarily have a lot of forms, but registration is huge.

11
00:00:49,460 --> 00:00:54,110
And especially with this product, I think it's going to be pretty integral to the way people kind of

12
00:00:54,110 --> 00:01:01,460
like maybe talk about like why they're joining the product or maybe to like pick some interests, maybe

13
00:01:01,460 --> 00:01:03,190
narrowing down those interests.

14
00:01:03,200 --> 00:01:09,590
So let's jump right in to how we can create some form elements for our client.

15
00:01:10,220 --> 00:01:16,310
When I think about our client, they need to have a registration and I need to think about those different

16
00:01:16,310 --> 00:01:16,900
types of elements.

17
00:01:16,900 --> 00:01:18,470
So I'm just going to create a frame.

18
00:01:18,860 --> 00:01:23,270
Let's press F and we're going to just use one of these screens.

19
00:01:24,530 --> 00:01:27,350
We'll just call it registration.

20
00:01:29,350 --> 00:01:35,470
OK, so we're going to kind of just create like a wire frame just so we get a good indication of like

21
00:01:36,070 --> 00:01:39,800
what we want to build and then we can eventually get to a higher fidelity.

22
00:01:40,120 --> 00:01:44,380
So when a user comes to the page, they'll probably see like an input.

23
00:01:46,660 --> 00:01:48,030
And let me just.

24
00:01:50,410 --> 00:01:53,380
They'll probably see 40, it's probably good.

25
00:01:54,720 --> 00:01:56,600
Don't want to get too fancy just yet.

26
00:01:59,030 --> 00:02:00,080
Let's give it a stroke.

27
00:02:01,330 --> 00:02:05,280
We can actually start creating some pieces if we wanted to over here.

28
00:02:06,190 --> 00:02:10,250
I'm going to create a couple of elements that I can just easily reuse.

29
00:02:11,380 --> 00:02:17,320
I know I said I wasn't going to go for creating it, but, you know, maybe maybe that's the best course

30
00:02:17,320 --> 00:02:17,920
of action.

31
00:02:19,330 --> 00:02:20,550
What else do we have here?

32
00:02:21,720 --> 00:02:22,710
Let's make a button.

33
00:02:26,870 --> 00:02:31,820
And we are just going to fill that with brand color, I don't know if I have the brand color, but we

34
00:02:31,820 --> 00:02:33,530
can just kind of get close to it right now.

35
00:02:35,150 --> 00:02:35,700
Oops.

36
00:02:37,290 --> 00:02:38,970
Maybe that's our primary, but in.

37
00:02:40,250 --> 00:02:43,520
And we'll put some text in there in primary.

38
00:02:48,110 --> 00:02:49,570
I like I like a lot.

39
00:02:50,450 --> 00:02:52,430
This could be like 16 pixels.

40
00:02:54,910 --> 00:03:03,780
Make this phone, we'll call it primary button, so we are kind of creating our own little components

41
00:03:03,790 --> 00:03:04,840
we can make this way.

42
00:03:05,080 --> 00:03:09,820
I know it's probably not accessible, but I mean, we can kind of fine tune.

43
00:03:10,750 --> 00:03:15,040
Like sometimes accessibility could be like a little wonky in terms of like.

44
00:03:16,390 --> 00:03:22,000
What is actually readable and what isn't like this is probably like ordering that line, it's probably

45
00:03:22,000 --> 00:03:23,650
not accessible, like if we check right now.

46
00:03:24,320 --> 00:03:27,490
It's to contrast like it's probably not.

47
00:03:27,710 --> 00:03:34,560
Yeah, it fails, but it may be more legible than black, which is probably actually accessible.

48
00:03:34,960 --> 00:03:36,340
So that's our primary button.

49
00:03:37,030 --> 00:03:39,730
We can just go over here.

50
00:03:40,420 --> 00:03:42,530
We can make a secondary.

51
00:03:43,180 --> 00:03:45,310
So probably have a second like a back button.

52
00:03:46,520 --> 00:03:53,980
And that frame, we won't have anything in it, no, Phil, but the primary button's color will probably

53
00:03:54,080 --> 00:03:57,710
be like a block, so that's good.

54
00:03:57,920 --> 00:03:59,360
We'll just call it secondary.

55
00:04:00,390 --> 00:04:05,340
And remember what I said about constraints, so we can do that, I can do that.

56
00:04:09,230 --> 00:04:09,610
Perfect.

57
00:04:09,740 --> 00:04:11,330
Do you have a secondary in a primary?

58
00:04:11,360 --> 00:04:12,800
We have an input up there.

59
00:04:14,020 --> 00:04:20,320
I think that's fine for now, I guess let's just call this our our components for now.

60
00:04:22,190 --> 00:04:27,890
Just so we have some basic empathy, like we may have some checkboxes, so it's like this is an input

61
00:04:28,160 --> 00:04:28,970
field.

62
00:04:29,850 --> 00:04:31,110
And we'll just call it field.

63
00:04:32,160 --> 00:04:33,890
We probably should have some text in there.

64
00:04:36,700 --> 00:04:41,440
And by text, that's totally fine, and we could pop that to regular.

65
00:04:45,280 --> 00:04:46,860
You're not going to worry too much.

66
00:04:50,010 --> 00:04:57,420
We do need to, however, create some, like checkboxes possibly I'm envisioning that there will be

67
00:04:57,420 --> 00:05:03,480
checkboxes in our future 30 to 40, some still using that base unit.

68
00:05:04,710 --> 00:05:10,950
Of eight pixels to create my components here, that's a little big, bump it down to 30 to.

69
00:05:12,430 --> 00:05:13,960
Change the border radius.

70
00:05:15,510 --> 00:05:16,290
I think that's fine.

71
00:05:17,250 --> 00:05:18,830
We do need some text for it, though.

72
00:05:20,350 --> 00:05:23,020
CheckBox, text.

73
00:05:25,450 --> 00:05:26,620
Just do this.

74
00:05:27,410 --> 00:05:30,220
I mean, we can start creating some of our components.

75
00:05:31,510 --> 00:05:37,960
I mean, they don't necessarily need to be components, it's good to just kind of prep before we even

76
00:05:37,960 --> 00:05:38,500
start.

77
00:05:39,430 --> 00:05:40,560
OK, I think that's enough.

78
00:05:40,850 --> 00:05:41,170
Cool.

79
00:05:42,070 --> 00:05:43,330
Let's create another frame.

80
00:05:43,930 --> 00:05:44,770
Select F.

81
00:05:45,820 --> 00:05:50,770
So when a user first comes to our registration, I think like the first thing we'll probably ask them

82
00:05:50,770 --> 00:05:54,160
to do is maybe like, you know, we'll say something like Welcome.

83
00:05:55,180 --> 00:05:57,520
It's said that in their.

84
00:06:01,530 --> 00:06:04,200
We see something like Welcome, how are you?

85
00:06:06,430 --> 00:06:13,370
And we'll probably ask them to possibly, like, you know, add a profile image and like in terms of

86
00:06:13,520 --> 00:06:14,110
input.

87
00:06:15,910 --> 00:06:23,410
It's kind of tough because we don't necessarily have, like an input for the actual like it could just

88
00:06:23,410 --> 00:06:27,550
be a button that, like, uses their phone to, like, find an image.

89
00:06:27,760 --> 00:06:31,620
And that's all handled on, like the iPhone side or the Android side.

90
00:06:31,900 --> 00:06:36,160
So that's a discussion to have with your developers.

91
00:06:36,670 --> 00:06:38,470
So we'll just do this.

92
00:06:39,370 --> 00:06:44,610
Um, and let's just go to a corner of fire.

93
00:06:44,740 --> 00:06:50,380
Let's use material design icons and we'll just say profile a person.

94
00:06:51,200 --> 00:06:52,450
OK, there we go.

95
00:06:53,530 --> 00:06:55,000
So I'm going to take that.

96
00:06:55,660 --> 00:06:57,160
I'm just going to detach it.

97
00:06:59,380 --> 00:07:00,250
Command, Comanche.

98
00:07:01,400 --> 00:07:03,350
Let's bring that into our registration.

99
00:07:07,700 --> 00:07:08,210
And there you go.

100
00:07:08,240 --> 00:07:15,350
OK, so we have like a thing here, like a little image, maybe we should have some text below because

101
00:07:15,370 --> 00:07:16,580
this is very vague.

102
00:07:17,980 --> 00:07:26,160
Had a photo, so other members I don't know if other members know who you are.

103
00:07:27,120 --> 00:07:39,060
Or actually add a photo, so, hmmm, why would they add a photo so you can customize your experience?

104
00:07:39,720 --> 00:07:42,090
This is probably like a nice to have feature.

105
00:07:43,570 --> 00:07:44,950
Do they really need a photo?

106
00:07:49,930 --> 00:07:56,500
It's really about exploring if you need something versus like if it's a nice to have.

107
00:07:57,580 --> 00:08:08,650
So the button here may say upload a photo and the secondary could be something like skip this for now.

108
00:08:10,730 --> 00:08:15,330
So we want that primary action to be much bigger, much more prominent.

109
00:08:15,350 --> 00:08:22,010
I mean, we can even go over here and make this a little bit less obvious.

110
00:08:23,550 --> 00:08:28,830
And I think another thing is we need to let people know this seems like it's going to be a multi-step

111
00:08:28,830 --> 00:08:29,540
process.

112
00:08:29,970 --> 00:08:34,990
So we need to let people know, like what step of the process to in this just change that.

113
00:08:35,010 --> 00:08:36,990
So step one of for.

114
00:08:38,960 --> 00:08:45,260
OK, and let's just pull that so it's pretty obvious, I mean, we can actually just leave it at the

115
00:08:45,260 --> 00:08:45,680
top.

116
00:08:45,870 --> 00:08:47,400
I'm not sure about the whole deal.

117
00:08:47,400 --> 00:08:48,170
The page is set.

118
00:08:49,300 --> 00:08:58,480
So we copy that, we can just change that over there and the next one could be like, what's your main

119
00:08:58,480 --> 00:09:01,240
reason for joining?

120
00:09:02,680 --> 00:09:06,070
It's good to understand why they want to join.

121
00:09:09,260 --> 00:09:10,590
I could just pop this up here.

122
00:09:10,610 --> 00:09:17,090
We're not being to like crazy in terms of, like how we structure just yet, but we could, like, essentially

123
00:09:17,090 --> 00:09:23,810
put these items in a frame that has auto layout and thout whenever we adjust something, it's going

124
00:09:23,810 --> 00:09:24,460
to bump it down.

125
00:09:24,490 --> 00:09:25,370
I'll show you what that looks like.

126
00:09:25,670 --> 00:09:27,590
So if we select these, we do option commands.

127
00:09:28,190 --> 00:09:33,060
We have a frame and if you select auto label, it will automatically position them vertically.

128
00:09:33,080 --> 00:09:39,140
You can even do it horizontally, but it's going to push it to the right over here so you can space

129
00:09:39,140 --> 00:09:40,610
it any which way you want.

130
00:09:40,640 --> 00:09:47,510
So if I want to, like, adhere to a pixel based upon you like twenty four pixels, and if I add to

131
00:09:47,510 --> 00:09:53,210
this, it's just going to keep on pushing the content down and you can just like keep things incredibly

132
00:09:53,210 --> 00:09:53,810
consistent.

133
00:09:54,020 --> 00:09:56,510
It's just it's for your own sanity to be honest.

134
00:09:57,050 --> 00:10:02,780
OK, so this will help us make some great.

135
00:10:04,290 --> 00:10:06,840
Recommendation's.

136
00:10:08,230 --> 00:10:13,060
So when I'm thinking about this registration, I want to get as much info about the user as possible

137
00:10:13,060 --> 00:10:18,610
with kind of making it fun, checkboxes are kind of hard to hit on mobile sometimes unless you make

138
00:10:18,610 --> 00:10:28,960
this whole feel like saveable or just each interact with so we can do optional kind of like checkboxes

139
00:10:28,960 --> 00:10:30,400
or like radio buttons.

140
00:10:31,360 --> 00:10:32,850
And I'll show you what we can do here.

141
00:10:32,860 --> 00:10:40,450
So I've taken like the primary button over here and I'm just going to make this feel like white.

142
00:10:42,310 --> 00:10:45,460
I'm going to go in and I'm going to make that Phil Black.

143
00:10:47,670 --> 00:10:48,450
Perfect.

144
00:10:49,200 --> 00:10:55,260
And I am going to also apply a stroke, and that stroke is going to be like a.

145
00:10:56,900 --> 00:10:59,680
We'll just do 50 percent of black.

146
00:11:00,650 --> 00:11:04,190
So, I mean, there you go, we kind of have like a radio button that they can click.

147
00:11:05,760 --> 00:11:10,710
So we can give them some options, like maybe one of them is discover.

148
00:11:12,310 --> 00:11:14,620
New and exciting.

149
00:11:21,590 --> 00:11:28,760
The next one could be make month to month shopping.

150
00:11:30,700 --> 00:11:36,940
Easier so that is like a definitely a big thing in terms of like shopping, in terms of like the usefulness

151
00:11:36,940 --> 00:11:37,510
of this product.

152
00:11:37,510 --> 00:11:41,950
If you do a lot of month to month shopping, you have a lot of like things that you constantly buy over

153
00:11:41,950 --> 00:11:42,750
and over again.

154
00:11:42,760 --> 00:11:53,050
If we know more about you, we can easily make the experience much better, get home, get relevant

155
00:11:53,920 --> 00:11:55,530
recommendations.

156
00:11:56,830 --> 00:11:58,570
So there's a couple of options.

157
00:11:58,570 --> 00:12:05,110
And like if I select one, so for this use case, I'm just going to select it just to kind of showcase

158
00:12:05,110 --> 00:12:06,410
what that's going to look like.

159
00:12:06,760 --> 00:12:08,260
So I'm going to.

160
00:12:09,590 --> 00:12:10,340
Do the.

161
00:12:12,440 --> 00:12:16,380
And that is going to be white and that's what it can look like.

162
00:12:17,120 --> 00:12:18,920
So all of a sudden we kind of have.

163
00:12:22,250 --> 00:12:26,720
A nice little active state there, too, we can create a component for that.

164
00:12:27,380 --> 00:12:33,620
What I've done here is I've actually removed this get because this is a mandatory, um, I'm thinking

165
00:12:33,620 --> 00:12:38,720
about this actually being mandatory because it's pretty it's pretty big in terms of like the type of

166
00:12:39,380 --> 00:12:40,400
question we're asking.

167
00:12:41,000 --> 00:12:44,630
And if they don't fill it out, we can give them like a disabled state.

168
00:12:50,290 --> 00:12:55,960
So just make sure you disable seats are easy to read in terms of contrast, and when they do to select

169
00:12:55,960 --> 00:12:59,420
that, it will move to the active state here.

170
00:12:59,830 --> 00:13:04,810
You can work along with me and just think about the type of content we are we are creating for in terms

171
00:13:04,810 --> 00:13:05,730
of the registration.

172
00:13:05,740 --> 00:13:08,080
I mean, there's so many different things we can do.

173
00:13:10,190 --> 00:13:17,420
You can just think about the different types of like inputs that we need and the different types of

174
00:13:17,420 --> 00:13:23,360
processes that we're going to like designed for, so I'm saying this registration process actively as

175
00:13:23,360 --> 00:13:27,620
I'm kind of coming up with these concepts, I'm thinking about the different questions and asking users.

176
00:13:28,280 --> 00:13:35,900
So I probably at this point, I want them to just start picking some like interest gets started by picking

177
00:13:36,260 --> 00:13:38,180
some interesting.

178
00:13:39,570 --> 00:13:46,650
And I mean, I don't even know, I think that's pretty self-explanatory and they can essentially, like

179
00:13:46,980 --> 00:13:52,950
we could create like cards for them to make it a little more fun, like checkboxes are kind of boring.

180
00:13:52,960 --> 00:13:57,000
So for something like this, we could create.

181
00:13:58,700 --> 00:14:01,970
Like cards, I'm not sure what's in the cards, maybe.

182
00:14:03,390 --> 00:14:06,380
Actually, I think it would be best if we do something like this.

183
00:14:07,160 --> 00:14:07,970
Let's create a frame.

184
00:14:08,900 --> 00:14:14,300
For a square and we'll put a text in that frame and we'll call it something like music.

185
00:14:15,550 --> 00:14:21,190
That's a little debate, but let's go down to 20 pixels.

186
00:14:22,970 --> 00:14:25,170
And that's fine.

187
00:14:25,910 --> 00:14:30,950
This is going to be our different type of checkbox.

188
00:14:32,850 --> 00:14:38,640
And the background color, let's give it a fill so it's a little bit more interesting than it is now.

189
00:14:39,870 --> 00:14:40,650
And there you go.

190
00:14:40,670 --> 00:14:44,910
Like we easily have like a checkbox that we can select.

191
00:14:46,360 --> 00:14:47,920
So there it is.

192
00:14:55,640 --> 00:14:57,440
Remember what I said about constraints?

193
00:14:58,950 --> 00:15:02,060
So if my position this like that.

194
00:15:04,620 --> 00:15:07,950
I'm going to try and make this almost a square.

195
00:15:09,510 --> 00:15:13,590
So if her position is like the there it go does need to be perfect.

196
00:15:16,110 --> 00:15:23,820
We have a bunch of different options, and if they will do the same thing over here, oops, I forgot

197
00:15:23,820 --> 00:15:24,960
to actually make that continue.

198
00:15:27,110 --> 00:15:31,800
This one can be continue as well, for now at least, I don't know what this is going to be.

199
00:15:31,810 --> 00:15:32,930
It could be like an image.

200
00:15:32,930 --> 00:15:35,340
It could be like a colored square.

201
00:15:35,720 --> 00:15:40,580
I think we need to really kind of think about that a little bit more in terms of what that active state

202
00:15:40,580 --> 00:15:41,270
looks like.

203
00:15:41,780 --> 00:15:45,200
But that's when we get more in depth in terms of actually creating the component.

204
00:15:45,590 --> 00:15:47,630
But now I know what types of questions I'm asking.

205
00:15:47,630 --> 00:15:53,270
I'm asking them to upload a photo for customization purposes, you know, making their experience a

206
00:15:53,270 --> 00:15:54,370
little bit more delightful.

207
00:15:54,380 --> 00:15:55,040
It's not needed.

208
00:15:55,050 --> 00:15:57,020
So I gave them like a skep option.

209
00:15:57,680 --> 00:16:03,190
I asked them why they're joining, because maybe the types of products we do push to them is relevant

210
00:16:03,220 --> 00:16:04,640
based off of this question.

211
00:16:05,390 --> 00:16:10,010
You know, if they want to have like a month to month subscription of things, like we could do something

212
00:16:10,010 --> 00:16:16,430
like that, if they also discover new and exciting products, like we can push like new products to

213
00:16:16,430 --> 00:16:16,730
them.

214
00:16:17,090 --> 00:16:21,890
But if they weren't relevant recommendations, it's a little bit of both in terms of the types of products

215
00:16:21,890 --> 00:16:22,820
we decide to push them.

216
00:16:23,000 --> 00:16:29,390
If we think about this from a data collecting perspective, this will definitely help us kind of learn

217
00:16:29,390 --> 00:16:30,440
more about our users.

218
00:16:30,650 --> 00:16:35,600
So if people keep on creating this, we'll know the types of users we're getting in terms of like what

219
00:16:35,600 --> 00:16:37,010
they're trying to achieve.

220
00:16:37,010 --> 00:16:41,420
Are they trying to like, ah, the majority of our users doing month month subscriptions or something

221
00:16:41,420 --> 00:16:41,890
like that?

222
00:16:42,410 --> 00:16:47,570
If that's the case, then it could actually force us to pivot the purpose of the application.

223
00:16:47,930 --> 00:16:53,870
It moves away from relevant recommendations to more so like a one stop shop where we constantly just

224
00:16:53,870 --> 00:16:55,850
ship to you every single month.

225
00:16:55,880 --> 00:16:59,280
And that's it's constantly relevant and it's constantly based off of what you need.

226
00:16:59,660 --> 00:17:05,000
So take that into consideration in terms of the types of questions you're asking even for over here,

227
00:17:05,090 --> 00:17:11,060
like getting started, I've kind of given them the option to select different types of interests.

228
00:17:11,420 --> 00:17:12,800
I could have sports.

229
00:17:13,220 --> 00:17:14,860
I could have like tech.

230
00:17:15,940 --> 00:17:17,840
Another option could be like gaming.

231
00:17:19,020 --> 00:17:23,190
I've given them a bunch of different interests, I don't know what I have for I mean, we could have

232
00:17:23,190 --> 00:17:27,470
four, we can even go a deeper level and think about like now, like narrow it down.

233
00:17:27,480 --> 00:17:28,620
What type of music do you like?

234
00:17:28,620 --> 00:17:30,260
Do you like to listen to like vinyl?

235
00:17:30,270 --> 00:17:36,090
Do you like to listen to live music or are you thinking, like buying speakers like if you've selected

236
00:17:36,090 --> 00:17:42,450
something like fashion, like are you into sneakers etc. or if there's anything else, can you add that

237
00:17:42,960 --> 00:17:45,860
so we could even go even deeper here?

238
00:17:46,080 --> 00:17:50,520
I think we're at a good spot right now just to get some basic information for from our user.

239
00:17:51,300 --> 00:17:56,400
What we can do for now is what I would do is actually.

240
00:17:57,430 --> 00:18:03,790
Put this together and put it into a prototype and test with users immediately test fast.

241
00:18:04,890 --> 00:18:10,780
We're here, we can just get started at the end, we'll probably have like a nice little screen that

242
00:18:10,780 --> 00:18:17,520
just says like, Woo, you did it like these are your results or we could show them results, if that's

243
00:18:17,520 --> 00:18:17,950
important.

244
00:18:17,970 --> 00:18:18,540
I don't know.

245
00:18:18,880 --> 00:18:22,950
It's really going to depend based off of, like, how we validate our assumptions.

246
00:18:23,310 --> 00:18:28,800
But this is essentially how you go about, like, thinking through a form.

247
00:18:28,800 --> 00:18:34,430
You got to ask yourself and the questions of like, well, especially with this case in terms of registration,

248
00:18:34,470 --> 00:18:37,080
what types of questions am I going to ask our users?

249
00:18:37,080 --> 00:18:38,610
And like, how do I break that down?

250
00:18:38,610 --> 00:18:42,070
Like what types of inputs on my using based off of those questions?

251
00:18:42,480 --> 00:18:47,340
Now, this is a really simple form, and I'm sure eventually in your career, you're definitely going

252
00:18:47,340 --> 00:18:49,740
to have much more complex forms.

253
00:18:50,220 --> 00:18:57,450
So take it step by step, start with sketching, move on to like user flows in terms of like figuring

254
00:18:57,450 --> 00:19:04,140
out what that process kind of looks like and then jump into like a product like Fatema and really start

255
00:19:04,140 --> 00:19:05,610
to figure out those details.

256
00:19:06,240 --> 00:19:08,940
So that's how you create your own form within Sigma.