1
00:00:00,120 --> 00:00:01,200
Everyone, and welcome back.

2
00:00:01,210 --> 00:00:07,140
So in our last video, we touched upon, like building a product page and we created something pretty

3
00:00:07,140 --> 00:00:12,240
quickly and we did it really well, I think especially for a first pass, you're never going to nail

4
00:00:12,240 --> 00:00:13,260
it on the first try.

5
00:00:13,270 --> 00:00:15,670
So I think we did really great here.

6
00:00:16,200 --> 00:00:17,040
We have reviews.

7
00:00:17,040 --> 00:00:19,200
We have like all the product information.

8
00:00:19,200 --> 00:00:25,590
We have different ways to get them back into the product funnel and we have our navigation.

9
00:00:25,830 --> 00:00:32,350
So I'm going to actually create a new frame and I keep on doing that.

10
00:00:32,400 --> 00:00:33,120
Do not know why.

11
00:00:33,120 --> 00:00:37,330
Bad habit, I guess I really want to think about the cards.

12
00:00:37,800 --> 00:00:40,500
OK, so for the cards.

13
00:00:42,260 --> 00:00:45,570
You know, maybe they are navigations there.

14
00:00:46,340 --> 00:00:51,620
I mean, we could have it actually, I don't know if we should have it, but let's just keep it for

15
00:00:51,620 --> 00:00:51,950
now.

16
00:00:52,390 --> 00:00:55,640
We'll definitely iterate on this.

17
00:00:55,640 --> 00:00:57,260
So we have something in our current.

18
00:00:57,260 --> 00:01:00,890
Maybe we'll have like a notification so we can add like something small here.

19
00:01:03,310 --> 00:01:04,450
Like read.

20
00:01:08,080 --> 00:01:09,730
I'm just going to throw this on top.

21
00:01:10,390 --> 00:01:11,250
That's cool.

22
00:01:11,260 --> 00:01:11,730
I love it.

23
00:01:14,040 --> 00:01:18,090
You know, I often don't think especially for something like this, I'm not sure I feel like you need

24
00:01:18,090 --> 00:01:21,560
a badge that shows the amount of items in your car or anything like that.

25
00:01:21,600 --> 00:01:28,290
I think it's pretty cool to have, like, just a little notification or badge there that it's just red

26
00:01:28,290 --> 00:01:33,990
and it just reminds the user, hey, you got something in your car, buddy, you should probably buy

27
00:01:33,990 --> 00:01:34,350
it.

28
00:01:34,440 --> 00:01:43,770
So for Kaat, I'm going to give us a title and we're going to call my cart so.

29
00:01:45,950 --> 00:01:53,880
I'm going to call it my car, and that is the title of the page right now, let's apply our grid just

30
00:01:53,960 --> 00:01:55,220
so we have something to work with.

31
00:01:56,980 --> 00:01:57,490
Awesome.

32
00:01:58,430 --> 00:02:01,020
So we have our card title.

33
00:02:02,000 --> 00:02:05,900
OK, so let's think about the different types of things that are involved in this car here.

34
00:02:06,390 --> 00:02:07,820
We're going to have our.

35
00:02:08,780 --> 00:02:09,560
Items.

36
00:02:11,070 --> 00:02:12,690
So we're going to take that.

37
00:02:15,640 --> 00:02:19,700
Let's just copy that into here, so we're going to have our items.

38
00:02:19,720 --> 00:02:22,660
This is definitely going to I think it's going to be a little different.

39
00:02:22,660 --> 00:02:26,010
So there won't be a heart at this point.

40
00:02:26,020 --> 00:02:32,670
We want to get them into purchasing an item as quickly as possible.

41
00:02:34,520 --> 00:02:43,820
So probably like that, let's look at our icons, like maybe we'll get like a garbage can and I'll show

42
00:02:43,820 --> 00:02:45,000
you what I'm thinking right now.

43
00:02:46,250 --> 00:02:46,970
Trash.

44
00:02:48,540 --> 00:02:54,830
OK, we're out to go searching for that, so icons, now I'm looking for a garbage can because what

45
00:02:54,840 --> 00:03:01,980
I do want to build is like a little add remove kind of thing where they can add more items to their

46
00:03:01,980 --> 00:03:06,750
cart if you want to buy doubles or, you know, it really depends on some items.

47
00:03:06,750 --> 00:03:07,950
You may want to buy more than one.

48
00:03:08,000 --> 00:03:08,430
So.

49
00:03:11,430 --> 00:03:14,180
There it is, garbage, I love it, perfect.

50
00:03:15,310 --> 00:03:19,350
Just going to detach this can remove the group.

51
00:03:23,300 --> 00:03:28,440
So there's a garbage can and I want a plus button.

52
00:03:28,880 --> 00:03:30,800
Oh, there's the minus button.

53
00:03:32,340 --> 00:03:33,450
There's the plus button.

54
00:03:34,810 --> 00:03:40,690
This isn't like that I'm going to detach this and break up the group, shift command G will break up

55
00:03:40,690 --> 00:03:45,150
that group so that perfect, OK.

56
00:03:48,770 --> 00:03:52,010
I'm just turning off my grid so I can get a better look at this.

57
00:03:53,270 --> 00:04:01,850
So if there's one item I think, like we should just like give them the option to add or remove that

58
00:04:01,850 --> 00:04:02,300
item.

59
00:04:05,440 --> 00:04:11,650
That's just three sides that I think like that's going to be fine for now, let's build this.

60
00:04:12,020 --> 00:04:13,930
So 16 Bould.

61
00:04:15,830 --> 00:04:19,750
OK, so we have something here.

62
00:04:25,240 --> 00:04:25,620
Oops.

63
00:04:26,680 --> 00:04:31,360
So we're just going to align that and we can.

64
00:04:33,340 --> 00:04:43,480
OK, so there is our product, maybe if we have a second product, it looks like that and maybe we can

65
00:04:43,480 --> 00:04:44,470
reverse the remove.

66
00:04:48,080 --> 00:04:49,460
You can do something like this.

67
00:04:52,530 --> 00:04:57,760
So if there's more than one product, so these are the types of interactions I'm thinking about a lot,

68
00:04:57,840 --> 00:05:01,590
especially in the beginning, it's better to start thinking about them earlier than later.

69
00:05:03,220 --> 00:05:05,080
So perfect.

70
00:05:05,110 --> 00:05:08,890
OK, so there is are adding and removing.

71
00:05:10,230 --> 00:05:13,650
Let's just group that for now, grouping them, bringing them up.

72
00:05:14,540 --> 00:05:16,500
OK, so we have that.

73
00:05:17,010 --> 00:05:20,640
I think we need some more information, maybe like total.

74
00:05:23,080 --> 00:05:27,670
So we can just start grabbing some stuff here that we've used in the past.

75
00:05:29,500 --> 00:05:30,190
Total.

76
00:05:33,620 --> 00:05:36,290
And we're just going to shrink this.

77
00:05:39,840 --> 00:05:40,680
Perfect.

78
00:05:40,800 --> 00:05:42,720
I don't think this needs to be like 20.

79
00:05:42,740 --> 00:05:53,280
It could be something smaller, like a 16 year old get the perfect and we have the character on the

80
00:05:53,280 --> 00:05:53,670
right.

81
00:05:55,950 --> 00:05:58,290
So it's going to be seventy five dollars.

82
00:06:02,930 --> 00:06:03,670
OK.

83
00:06:06,020 --> 00:06:09,230
You know, maybe there is like address information.

84
00:06:12,700 --> 00:06:18,550
Here we go, we have some address delivered to Leslie.

85
00:06:22,350 --> 00:06:30,930
And the information, so if you want to get some quick information, another great plugin is content

86
00:06:30,930 --> 00:06:31,260
real?

87
00:06:33,020 --> 00:06:42,230
So let's just bring that up next, you know, you can get names, you can get avatars, icons, so many

88
00:06:42,230 --> 00:06:44,280
different things you don't even need to sign in.

89
00:06:44,720 --> 00:06:47,130
I'm just going to get an address.

90
00:06:47,250 --> 00:06:48,620
So there it is.

91
00:06:49,220 --> 00:06:52,190
Just give me a random U.S. address, and that's perfect.

92
00:06:53,650 --> 00:06:57,890
That's where you can bump down in size, maybe like a 12.

93
00:07:00,130 --> 00:07:03,800
Maybe A14 a little hard to read, OK, so there we go.

94
00:07:03,820 --> 00:07:05,320
We got an address easily.

95
00:07:07,190 --> 00:07:13,480
And I think that's pretty much it we're going to probably need let's think, what else would we need?

96
00:07:13,490 --> 00:07:16,370
We will need a button to check out.

97
00:07:18,290 --> 00:07:19,580
So primary.

98
00:07:22,890 --> 00:07:24,810
But in there we go.

99
00:07:29,450 --> 00:07:30,530
Perfect.

100
00:07:33,320 --> 00:07:40,340
So we are definitely thinking about, like the hierarchy over here, you know, my assumption right

101
00:07:40,340 --> 00:07:47,740
now is people want to see the items in the car and then maybe some other items afterwards.

102
00:07:48,260 --> 00:07:53,480
I'm not even sure if this is actually useful right now, but I think maybe it's good to give them a

103
00:07:53,480 --> 00:07:54,680
heads up of, like, hey.

104
00:07:56,010 --> 00:07:56,660
Is this you?

105
00:07:57,090 --> 00:07:59,800
Is this who we're going to deliver to you?

106
00:07:59,900 --> 00:08:04,730
Maybe it's something worth checking out and we can ask our users what they expect.

107
00:08:04,740 --> 00:08:09,600
And if it's something that kind of surprises them, maybe they'll like it, maybe they won't.

108
00:08:09,600 --> 00:08:12,270
And we can definitely make changes based off of that.

109
00:08:12,900 --> 00:08:14,310
So we have check out.

110
00:08:14,310 --> 00:08:15,660
We're going to definitely need this.

111
00:08:16,380 --> 00:08:18,570
Some other things I'm thinking about also like.

112
00:08:21,060 --> 00:08:27,240
Some things I have been thinking about, I don't know if I want to navigation in the card screen.

113
00:08:28,960 --> 00:08:37,150
Maybe it's best to kind of like make a sticky checkout button rather than a navigation, because we

114
00:08:37,150 --> 00:08:39,520
want to get them checking out much more quicker.

115
00:08:39,980 --> 00:08:42,820
So something that we need to also explore.

116
00:08:44,570 --> 00:08:52,070
I think we can even use this maybe like in this screen, this is another assumption of mine as well,

117
00:08:52,070 --> 00:08:56,390
like maybe if they don't want to check out right away, they're just looking at their cart.

118
00:08:59,010 --> 00:09:02,030
Maybe there's another way to kind of push them into the funnel.

119
00:09:02,060 --> 00:09:02,840
Once again.

120
00:09:04,210 --> 00:09:08,920
OK, so this is a basic card screen, like your card screen doesn't need to be complex, it could just

121
00:09:08,920 --> 00:09:16,190
show just some images in terms of like the items that the user has purchased or has added to their cart.

122
00:09:16,810 --> 00:09:20,980
Definitely the total needs to be there and there needs to be some sort of button to push them into the

123
00:09:20,980 --> 00:09:22,640
actual checkout process.

124
00:09:23,230 --> 00:09:24,700
You know, this is all optional.

125
00:09:25,360 --> 00:09:27,330
I'm not sure if this is actually useful.

126
00:09:27,370 --> 00:09:29,440
Same with like this.

127
00:09:31,480 --> 00:09:38,500
I'm not sure yet, but I've seen this a couple of times before, so I'm not sure exactly if these are

128
00:09:38,500 --> 00:09:44,260
going to work, but we are definitely going to iterate based off of the type of feedback we get.

129
00:09:44,530 --> 00:09:49,870
So I want you to kind of take a stab at the rest of the screens that you feel are really necessary.

130
00:09:50,200 --> 00:09:53,050
Things like car, things like a wish list, maybe.

131
00:09:53,050 --> 00:09:55,780
What is a search look like when we wireframe it?

132
00:09:56,140 --> 00:09:57,270
You know, have fun with it.

133
00:09:57,280 --> 00:10:00,970
I mean, think about the different types of content that will be on each page.

134
00:10:01,000 --> 00:10:04,450
Think about that hierarchy when you're actually laying it all out.

135
00:10:04,720 --> 00:10:07,320
If you need a grid, it's so easy to create one.

136
00:10:07,780 --> 00:10:09,130
So go ahead and do that.

137
00:10:09,370 --> 00:10:13,720
You don't necessarily need one, especially at this stage, but it helps keep things consistent in terms

138
00:10:13,720 --> 00:10:15,610
of like when you're starting to think about laying it out.

139
00:10:16,210 --> 00:10:20,950
And yeah, definitely just keep on building those wire frames and test them.

140
00:10:21,160 --> 00:10:29,020
Don't just stick with one set and then, you know, forget about it, because I know that I'm going

141
00:10:29,020 --> 00:10:30,130
to have to change this.

142
00:10:30,140 --> 00:10:32,890
I've already accepted that fact because it is a fact.

143
00:10:32,890 --> 00:10:35,650
I mean, we're definitely never going to get anything right on the first try.

144
00:10:35,950 --> 00:10:41,680
So go out there, test your assumptions and make those changes and test again to ensure that you're

145
00:10:41,680 --> 00:10:42,550
doing the right thing.

146
00:10:43,210 --> 00:10:45,000
And that's if for wire frames.

147
00:10:45,640 --> 00:10:46,930
I hope you all learned a lot.

148
00:10:46,930 --> 00:10:53,020
And I hope you've seen like this component library will definitely speed up your workflow.

149
00:10:53,020 --> 00:10:55,870
So go out there and create some more frames and fun.