1
00:00:00,700 --> 00:00:01,900
Hey, welcome back.

2
00:00:01,930 --> 00:00:04,780
We're going to jump right into Ukraine, our very own site map.

3
00:00:04,780 --> 00:00:10,260
So I have a copied instance of that initial component that I was talking about earlier.

4
00:00:10,630 --> 00:00:16,300
So this is going to signify which page we're on and the different types of hierarchy's and content within.

5
00:00:16,700 --> 00:00:18,400
And yeah, this is going to be great.

6
00:00:18,410 --> 00:00:19,770
I'm going to show you one quick thing.

7
00:00:19,780 --> 00:00:20,950
It's within a frame.

8
00:00:20,950 --> 00:00:27,430
If you notice, the frame has a thing called Autolib, and essentially it's really great for something

9
00:00:27,430 --> 00:00:27,900
like this.

10
00:00:28,000 --> 00:00:29,440
So I'll show you how that works.

11
00:00:30,070 --> 00:00:35,780
It's going to structure the content and vertically and you can set the spacing between.

12
00:00:36,050 --> 00:00:39,140
So this is the container for the pieces within.

13
00:00:39,580 --> 00:00:43,060
So you can set the space on the top and bottom.

14
00:00:43,060 --> 00:00:45,070
You can set the space on the sides.

15
00:00:45,380 --> 00:00:48,430
You can also set the space between components.

16
00:00:48,460 --> 00:00:49,510
So that's really cool.

17
00:00:49,510 --> 00:00:54,210
And if I add a component or remove a component, this whole container will grow.

18
00:00:54,550 --> 00:00:59,070
So it's really great for something like this where we don't have to constantly resize something.

19
00:00:59,620 --> 00:01:04,060
So let's go ahead and just position this in the middle of our frame.

20
00:01:06,020 --> 00:01:06,600
Perfect.

21
00:01:06,980 --> 00:01:12,320
And what we're going to do is we're going to rename the title to Home and let's start thinking about

22
00:01:12,320 --> 00:01:14,140
the different types of content within.

23
00:01:14,480 --> 00:01:19,400
So we're definitely going to have a search that's going to be public.

24
00:01:21,110 --> 00:01:27,860
We're going to have something like a shopping interest thing, I'm not sure exactly what that's going

25
00:01:27,860 --> 00:01:29,640
to be, so I'm going to have to sketch that out later.

26
00:01:30,050 --> 00:01:37,580
So shopping interests and and habits, so we'll have that.

27
00:01:38,390 --> 00:01:42,780
We probably have a login and a sign on that page.

28
00:01:43,040 --> 00:01:49,130
So the reason why I'm even breaking this page down even more is so I can really understand what other

29
00:01:49,130 --> 00:01:52,970
pages I can get to or rather pieces of content I can get to from here.

30
00:01:53,120 --> 00:01:57,740
It also allows me to really understand maybe how I should structure that content when I'm thinking about

31
00:01:57,740 --> 00:02:01,310
how I place those items on a page, especially through wire framing.

32
00:02:02,440 --> 00:02:06,910
So what we'll do is we'll duplicate the search in here.

33
00:02:09,800 --> 00:02:15,790
I guess we're just going to have to detach this whole instance, and that's totally fine, perfect work.

34
00:02:15,980 --> 00:02:21,740
OK, so we have search, maybe I want shopping, interesting habits to be right at the forefront and

35
00:02:21,740 --> 00:02:26,180
maybe I'm not sure that looks like right now, but I know we're going to probably have to have categories

36
00:02:26,180 --> 00:02:29,240
in this section because we don't really have the NAV at the moment.

37
00:02:29,240 --> 00:02:35,200
But we're going to reach out with categories, deals.

38
00:02:35,240 --> 00:02:37,100
We'll probably have a deal section.

39
00:02:39,140 --> 00:02:42,920
Let's just copy this a couple of times, so this is all going to be public.

40
00:02:44,670 --> 00:02:45,780
We're going to have a Cartes.

41
00:02:49,480 --> 00:02:58,170
OK, what else let's think about the other things we're going to have that are related to members only,

42
00:02:58,720 --> 00:03:04,650
so we are definitely going to wish list a way to get to the wish list.

43
00:03:07,970 --> 00:03:10,070
We are going to have borders.

44
00:03:13,150 --> 00:03:15,220
What else do we have?

45
00:03:19,030 --> 00:03:20,950
And a profile.

46
00:03:22,370 --> 00:03:28,280
So these are the different things that we will have, I've kind of listed the navigation in here that

47
00:03:28,280 --> 00:03:31,670
I've kind of proposed prior, it's up to you really.

48
00:03:32,060 --> 00:03:38,960
It's going to depend on whatever your preferences allows me to really think about the structure of the

49
00:03:38,960 --> 00:03:41,900
entire page, as well as navigation in one shot.

50
00:03:41,910 --> 00:03:45,140
So that's, like I said, just a little bit of preference.

51
00:03:45,680 --> 00:03:49,700
So I'm going to I'm going to copy this all the way over here.

52
00:03:49,700 --> 00:03:54,290
And let's start thinking about shopping interests and habits first.

53
00:03:56,840 --> 00:04:03,470
I'm not sure what that's going to look like, but let's start thinking about that, at least the structure

54
00:04:03,470 --> 00:04:04,040
of the page.

55
00:04:04,220 --> 00:04:07,700
So we do know that this is definitely going to be a members only page.

56
00:04:08,000 --> 00:04:14,210
And if you're not signed in, then log in or sign, it's probably going to be at the forefront of that

57
00:04:14,480 --> 00:04:18,280
so we can go ahead and delete all these different public links.

58
00:04:19,250 --> 00:04:24,080
So probably there'll be a way to like discovering new products.

59
00:04:25,890 --> 00:04:26,910
Maybe.

60
00:04:28,290 --> 00:04:33,870
I got my interest portion, like where you can edit them or see what you're currently interested in.

61
00:04:35,270 --> 00:04:41,090
They'll probably be some categories based off of those interests, and they'll probably be maybe like

62
00:04:41,090 --> 00:04:47,720
some deals, I think that's pretty sufficient right now since we're just trying to get a sense of what

63
00:04:47,720 --> 00:04:49,760
the overview of our app looks like.

64
00:04:50,810 --> 00:04:54,900
And the second step is categories.

65
00:04:54,920 --> 00:04:56,180
Let's build out one or two.

66
00:04:57,410 --> 00:05:01,160
So categories we won't necessarily need to have anywhere Loggins.

67
00:05:02,030 --> 00:05:06,140
We can go ahead and actually select all of these groups.

68
00:05:06,890 --> 00:05:08,150
We can delete these.

69
00:05:08,150 --> 00:05:11,420
And a quick way to switch to the.

70
00:05:12,390 --> 00:05:18,570
Public instance is to just go into our innocence panel over here and select public and automatically

71
00:05:18,570 --> 00:05:19,500
that changes to the color.

72
00:05:20,280 --> 00:05:28,710
So let's think about what could be on the category page and what links may link elsewhere, link to

73
00:05:28,710 --> 00:05:33,900
certain pages that may seem redundant, like trending items or whatever that means that may just link

74
00:05:33,900 --> 00:05:34,680
to the page.

75
00:05:34,950 --> 00:05:39,270
That is like a default list that we reuse over and over again, but we just name it differently, whether

76
00:05:39,270 --> 00:05:41,510
that's like DLS results.

77
00:05:41,910 --> 00:05:44,130
So just something to think about.

78
00:05:45,480 --> 00:05:46,820
Trending items maybe.

79
00:05:48,510 --> 00:05:48,890
Oops.

80
00:05:49,390 --> 00:05:56,040
See what else may be on the categories page, probably like this is going to be a page where we can

81
00:05:56,040 --> 00:06:01,270
get to the different categories throughout the entire application.

82
00:06:01,290 --> 00:06:06,870
We do know, like with larger products like this, they'll probably be like categories around, like

83
00:06:07,560 --> 00:06:12,980
gaming all the way to like fashion and maybe health.

84
00:06:13,500 --> 00:06:16,500
So it just is probably pretty fast.

85
00:06:16,500 --> 00:06:21,080
So we'll probably have to break this up just a little bit like and make it more interesting.

86
00:06:21,390 --> 00:06:26,670
So we'll probably have like a trending item section or something like that, maybe some more like most

87
00:06:26,670 --> 00:06:28,140
popular categories.

88
00:06:28,630 --> 00:06:34,890
We'll definitely have like in all categories section and we are going to be off like a deal section

89
00:06:34,890 --> 00:06:35,310
again.

90
00:06:35,310 --> 00:06:38,970
So you'll start seeing like there's a deal section here and deals section here.

91
00:06:38,970 --> 00:06:43,950
And like we probably won't show all the deals, but we'll give them a sneak peek and they'll probably

92
00:06:44,040 --> 00:06:50,070
be redirected to some sort of redonda type of page that we kind of reuse over and over again.

93
00:06:50,100 --> 00:06:54,080
I shouldn't say redundant more so that I just a reuseable kind of like page.

94
00:06:54,450 --> 00:06:57,990
So I think that's pretty sufficient for categories.

95
00:06:59,820 --> 00:07:01,080
What else do we have here?

96
00:07:01,980 --> 00:07:02,860
Deals.

97
00:07:03,010 --> 00:07:06,510
OK, so we've got deals.

98
00:07:06,930 --> 00:07:11,970
And like I said, this could be something easily accessible.

99
00:07:11,970 --> 00:07:19,140
So you can get it primarily, but you can access this from like the categories page and elsewhere.

100
00:07:19,500 --> 00:07:27,740
So the deals page probably has like the trending deals, probably has deals based off of categories.

101
00:07:31,110 --> 00:07:33,960
So I'm not sure if these are the right choices right now.

102
00:07:34,170 --> 00:07:38,910
And that's a good thing to remember when you're designing like everything you're doing without user

103
00:07:38,910 --> 00:07:42,460
research is definitely an assumption and you should treat them as such.

104
00:07:42,900 --> 00:07:46,260
So just something to think about as you're building.

105
00:07:46,260 --> 00:07:49,100
Don't just build the first thing that comes to mind.

106
00:07:49,950 --> 00:07:51,750
Go out and test with users.

107
00:07:52,860 --> 00:07:54,180
I'll definitely cover that.

108
00:07:55,560 --> 00:07:58,930
And another lesson, so we'll have here all categories.

109
00:07:58,950 --> 00:08:04,140
I'm just going to go no only so they're probably like a member only section if you are signed in and

110
00:08:04,140 --> 00:08:11,640
if you have enough content or data that our developers will be able to pull from and match you with

111
00:08:11,640 --> 00:08:17,200
certain deals like deals just for you, there are good deals just for you.

112
00:08:17,220 --> 00:08:17,960
I like that.

113
00:08:18,360 --> 00:08:20,430
I think that's pretty sufficient for now.

114
00:08:21,000 --> 00:08:25,920
See, now we're getting a sense of like what each page should probably have and where you can access

115
00:08:25,920 --> 00:08:29,220
it through the hierarchy wish list.

116
00:08:29,380 --> 00:08:31,100
I'm going to call it a wish list for now.

117
00:08:31,110 --> 00:08:38,400
We've been calling it saved, but I don't think that really does a good job of indicating what exactly

118
00:08:38,400 --> 00:08:38,730
it is.

119
00:08:40,390 --> 00:08:42,130
I'm going to actually steal that button.

120
00:08:44,970 --> 00:08:50,400
Because this is going to be a members only section, definitely A members only section, so we have

121
00:08:50,760 --> 00:08:54,720
probably like years saved items.

122
00:08:55,740 --> 00:08:58,590
Maybe there's multiple lists, but we can handle that.

123
00:08:58,590 --> 00:09:04,230
Once we start wireframe in sharing, we'll be able to share.

124
00:09:04,230 --> 00:09:06,780
So we have to think about maybe where that leads.

125
00:09:08,190 --> 00:09:17,100
And similar items, so another way to get them into the funnel of buying other items that are probably

126
00:09:18,180 --> 00:09:22,500
relevant to their needs, so we have a wishlist, what else is there?

127
00:09:23,400 --> 00:09:24,450
Let's copy this.

128
00:09:26,410 --> 00:09:35,800
And so we have orders over here, so that, again, is going to be a members only section, so let's

129
00:09:35,800 --> 00:09:36,400
do that.

130
00:09:37,510 --> 00:09:42,070
So well, if they do come into these pages, I'm thinking about having them.

131
00:09:43,230 --> 00:09:48,270
Be hit with like a registration block, so you can't necessarily create a wish list if you don't have

132
00:09:48,270 --> 00:09:52,430
an account with us or you can't really order if you don't have an account with us.

133
00:09:52,440 --> 00:09:58,140
So if somebody comes in and they don't necessarily sign up yet, then they'll be blocked to actually

134
00:09:58,140 --> 00:09:59,420
access these types of pages.

135
00:09:59,850 --> 00:10:05,720
So we're definitely to let them try out our up, but they're going to be blocked for the majority of

136
00:10:05,730 --> 00:10:05,830
it.

137
00:10:06,360 --> 00:10:12,930
Search and filter will probably be on the order screen, so they'll be able to search through past orders.

138
00:10:13,500 --> 00:10:14,550
What else do we have here?

139
00:10:14,550 --> 00:10:22,380
We have in progress orders and passed orders.

140
00:10:25,010 --> 00:10:29,720
Maybe there is somewhere like a customer service base thing like a help.

141
00:10:31,890 --> 00:10:36,960
Maybe a health section, so that's that's good to just think about what happens if an order is lost,

142
00:10:36,970 --> 00:10:38,640
what happens if an order is late.

143
00:10:38,640 --> 00:10:48,840
So customer satisfaction is very important and we have orders, profiling cards.

144
00:10:51,100 --> 00:10:53,650
OK, let's think about her first.

145
00:10:54,840 --> 00:10:59,300
This is not a members only page, you can view your cards.

146
00:11:00,390 --> 00:11:02,670
You just won't be able to check out.

147
00:11:03,970 --> 00:11:09,610
Let's just touch out with the public so we'll be able to see, like items in cards.

148
00:11:10,890 --> 00:11:12,210
What else will be able to see?

149
00:11:13,540 --> 00:11:20,290
But let's duplicate a couple of times, I'll probably be able to see maybe similar items, I'm not sure

150
00:11:20,290 --> 00:11:23,310
if that's relevant right now, but I'm going to put it in there anyways.

151
00:11:24,010 --> 00:11:25,360
And I think that.

152
00:11:26,310 --> 00:11:33,180
Is fine, so items in the car and the last minute we're running out of space, so I'm just going to

153
00:11:33,180 --> 00:11:34,710
shift these all over a bit.

154
00:11:36,520 --> 00:11:41,680
About then and there we go and profile.

155
00:11:44,550 --> 00:11:49,890
So this is definitely another member's only section, so I'm just going to copy that and bring it in.

156
00:11:52,220 --> 00:11:57,740
Oops, you see how they just kind of like the layout, you can just kind of like place things so easily.

157
00:11:59,330 --> 00:12:02,330
It's really great if you're like designing for one use case.

158
00:12:02,870 --> 00:12:06,980
FEMA has yet to really implement something that makes it totally responsive.

159
00:12:06,980 --> 00:12:12,580
So I wouldn't necessarily use them like when creating containers for a responsive website for mobile.

160
00:12:12,590 --> 00:12:17,120
If you're focused on just creating something that's maybe like growing or shrinking, then I think it's

161
00:12:17,120 --> 00:12:17,570
really great.

162
00:12:17,570 --> 00:12:19,970
And we'll build that out as well eventually.

163
00:12:20,690 --> 00:12:22,490
So profile, what do we need to think about?

164
00:12:22,700 --> 00:12:26,320
If they are not signed in, they're just going to get hit by a wall here.

165
00:12:28,280 --> 00:12:35,540
So let's just do a members only section and so the different types of things they can see here, the

166
00:12:35,540 --> 00:12:40,430
bill to see, like my profile, I'm guessing like four counts.

167
00:12:41,000 --> 00:12:42,010
Hmm.

168
00:12:42,500 --> 00:12:43,760
So account settings.

169
00:12:46,910 --> 00:12:47,720
And see.

170
00:12:49,220 --> 00:12:49,950
We're just going to.

171
00:12:50,950 --> 00:12:51,730
Karpeles.

172
00:12:53,040 --> 00:13:01,050
They'll probably be able to see, like their insurance, maybe stuff like customer service will be it

173
00:13:01,050 --> 00:13:02,880
could be here tucked in somewhere.

174
00:13:03,510 --> 00:13:04,540
What else could be here?

175
00:13:05,400 --> 00:13:06,750
I think that's fine for now.

176
00:13:06,780 --> 00:13:12,780
Actually, so their account settings, that could be anything from like their profile image to payment

177
00:13:12,780 --> 00:13:15,600
methods to address settings.

178
00:13:15,870 --> 00:13:19,880
Interest is definitely just like categories that they fall into.

179
00:13:19,890 --> 00:13:23,430
And we have customer service just in case.

180
00:13:24,580 --> 00:13:30,910
We can link back to if they need help or something and possibly orders, maybe it's another way to get

181
00:13:30,910 --> 00:13:32,170
to the audio screen.

182
00:13:33,610 --> 00:13:39,550
OK, so that looks like the first kind of tier, we can easily lay this out nicely.

183
00:13:39,850 --> 00:13:44,620
What I want to do is just select all of them and.

184
00:13:45,650 --> 00:13:49,970
Go and click up here and distribute horizontal spacing.

185
00:13:51,420 --> 00:13:55,820
So now they're all evenly distributed and will just center that as well.

186
00:13:57,770 --> 00:14:01,220
Well, we can also do is there's a plug in called auto flow.

187
00:14:02,440 --> 00:14:06,340
So we'll click that plug in and there it is.

188
00:14:07,850 --> 00:14:10,320
And this is really cool.

189
00:14:10,340 --> 00:14:11,270
I'll show you how it works.

190
00:14:12,000 --> 00:14:18,080
So if I selected this container and then this container, it'll automatically create a line and you

191
00:14:18,080 --> 00:14:19,760
can customize what that line will look like.

192
00:14:19,760 --> 00:14:21,910
Right now, it has a hundred mile radius.

193
00:14:21,920 --> 00:14:27,290
If I like zero, it'll just make a straight line so we can use that.

194
00:14:30,760 --> 00:14:32,010
That looks great.

195
00:14:35,700 --> 00:14:38,860
So now we have our structure.

196
00:14:39,810 --> 00:14:40,730
I like this a lot.

197
00:14:42,700 --> 00:14:47,860
And we can remove that for now and we can just select all of these and, you know, I'm not really worried

198
00:14:47,860 --> 00:14:54,530
about like this structure of what my current page structure looks like here on the side.

199
00:14:54,550 --> 00:15:02,620
I mean, these are meant to constantly be reworked, shared with others and kind of like constantly

200
00:15:03,370 --> 00:15:05,260
recreated and refined.

201
00:15:05,270 --> 00:15:08,230
So don't spend too much time on making things perfect.

202
00:15:08,410 --> 00:15:09,550
So that's our first layer.

203
00:15:09,760 --> 00:15:10,960
Let's take another look at it.

204
00:15:10,970 --> 00:15:12,310
We have shopping interests.

205
00:15:12,310 --> 00:15:16,440
We have categories, deals, wish lists, orders, car profile.

206
00:15:16,450 --> 00:15:18,280
That seems pretty sufficient.

207
00:15:18,730 --> 00:15:23,260
And let's stop here and our next video, we'll get into building this out just a little bit more.