1
00:00:00,850 --> 00:00:04,340
Hey, let's jump right back into creating some more user flows.

2
00:00:04,750 --> 00:00:10,690
So where do we leave off last when we actually finish creating the user flow for finding the right product

3
00:00:10,690 --> 00:00:12,740
through research and right at the end?

4
00:00:12,760 --> 00:00:18,370
We finished with the product description page, and I think that's a good kick off to, you know, possibly

5
00:00:18,370 --> 00:00:19,720
adding an item to the cart.

6
00:00:20,970 --> 00:00:22,600
Let's just duplicate this.

7
00:00:24,600 --> 00:00:31,140
Let's rename it so, commander, what should we call this, making a purchase?

8
00:00:32,230 --> 00:00:32,860
Perfect.

9
00:00:34,680 --> 00:00:37,590
Let's delete this stuff, clean this up just a bit.

10
00:00:38,780 --> 00:00:43,920
So hypothetically, the user has added this to their car.

11
00:00:44,730 --> 00:00:46,140
They're back at the home screen.

12
00:00:47,010 --> 00:00:48,120
Let's delete all that.

13
00:00:49,580 --> 00:00:55,670
Let's put our title, our title as making a purchase.

14
00:00:56,720 --> 00:00:58,010
Very nice.

15
00:00:59,750 --> 00:01:01,910
OK, step one.

16
00:01:02,480 --> 00:01:05,570
OK, just quick before we jump in, I'm going to click this.

17
00:01:06,050 --> 00:01:09,220
And right now, this is the instance that we're on this button.

18
00:01:09,920 --> 00:01:18,350
What we can do is we can click right here on our panel and click the instant sections of button, and

19
00:01:18,350 --> 00:01:19,940
I can replace it with anything I want.

20
00:01:20,150 --> 00:01:22,070
So I'm going to replace it with Field.

21
00:01:23,770 --> 00:01:24,400
And there you go.

22
00:01:25,360 --> 00:01:30,460
You don't have to keep on going back to your assets, Tokugawa, if you don't want to have your tab

23
00:01:30,460 --> 00:01:30,870
over here.

24
00:01:31,960 --> 00:01:35,580
So we actually didn't make a navigation, and that's totally fine.

25
00:01:41,730 --> 00:01:45,250
We'll just make one really quickly right now, OK?

26
00:01:46,830 --> 00:01:48,690
Spread out all the way to the end.

27
00:01:50,180 --> 00:01:51,660
That's going to be on the edge.

28
00:01:54,930 --> 00:02:01,900
Another figments tip, if you want to spread these all across evenly on the horizontal plane, we're

29
00:02:01,900 --> 00:02:03,010
going to do this go up here.

30
00:02:05,350 --> 00:02:15,700
And distribute horizontal spacing perfect so we can just do something like this and then.

31
00:02:20,580 --> 00:02:26,220
So this is going to be our icon for now, if we really wanted to, we can jump in, grab the icon,

32
00:02:26,730 --> 00:02:32,880
but we're just going to just use this and we're going to create another circle.

33
00:02:34,710 --> 00:02:39,600
So think about when we usually have something in our cart, we're using an app that has a. in their

34
00:02:39,600 --> 00:02:39,910
car.

35
00:02:39,940 --> 00:02:46,000
We usually have some sort of notification that's constantly there to basically push us to check out.

36
00:02:46,620 --> 00:02:54,510
So we have a little notification there on top of our car icon, which totally looks like a cart just

37
00:02:54,510 --> 00:02:56,570
to nudge the user in that direction.

38
00:02:56,610 --> 00:02:56,940
So

39
00:03:00,150 --> 00:03:11,130
the user is able to see a cart notification that they can interact with the user.

40
00:03:12,150 --> 00:03:17,190
These are taps on the cart and navigation.

41
00:03:19,150 --> 00:03:20,700
OK, so that's step one.

42
00:03:21,360 --> 00:03:23,150
Let's duplicate this again.

43
00:03:26,810 --> 00:03:28,970
Stabbed to the nose.

44
00:03:30,000 --> 00:03:32,500
OK, so what do they see now?

45
00:03:35,690 --> 00:03:37,500
You do OK?

46
00:03:38,030 --> 00:03:44,060
There's probably some text at the top that says cards and our sketches before we started building out

47
00:03:44,450 --> 00:03:45,670
what the screen looks like.

48
00:03:45,680 --> 00:03:49,430
So we kind of have some sense of hierarchy here.

49
00:03:49,940 --> 00:03:53,270
So let's just take some items.

50
00:03:54,680 --> 00:03:58,130
So, oops, there it is.

51
00:03:59,380 --> 00:04:00,520
Let's bring that in.

52
00:04:01,660 --> 00:04:07,840
So this is our item in our Kurts, it's looking fantastic.

53
00:04:09,190 --> 00:04:09,670
A button.

54
00:04:11,330 --> 00:04:14,940
You notice how quickly we're just creating these user photos with our components.

55
00:04:14,960 --> 00:04:16,880
I mean, it's all about speeding up your workflow.

56
00:04:16,910 --> 00:04:22,020
We don't have time to go over and recreate the wheel all over again, every single frame.

57
00:04:22,040 --> 00:04:23,970
So make your life easier.

58
00:04:24,410 --> 00:04:26,150
Set yourself up for success.

59
00:04:26,630 --> 00:04:30,750
OK, so I have a beautiful card screen, totally a card screen.

60
00:04:30,920 --> 00:04:35,030
So what we're going to do here is we're going to just write a description for this task.

61
00:04:36,150 --> 00:04:46,700
The user is able to review the item such as items in their carts.

62
00:04:48,160 --> 00:04:59,410
Once they are happy with this information, they can proceed to the checkout process.

63
00:05:01,240 --> 00:05:03,530
OK, that is perfect.

64
00:05:04,150 --> 00:05:11,580
So step one, cart notification nudges them, step two, they go into the cart screen.

65
00:05:12,160 --> 00:05:13,810
Now step three.

66
00:05:14,680 --> 00:05:17,260
So let's actually give a little more detail here.

67
00:05:17,890 --> 00:05:25,420
Once they are happy with this information, they can proceed to the checkout process by tapping the

68
00:05:25,420 --> 00:05:25,850
CTA.

69
00:05:26,710 --> 00:05:32,530
I know we're kind of moving quickly, but it's always good to just go back and do your best to avoid

70
00:05:32,530 --> 00:05:34,490
any details that you think are relevant.

71
00:05:35,170 --> 00:05:37,780
I'd like to kind of break it into two different sentences.

72
00:05:37,810 --> 00:05:42,190
I mean, they don't have to be limited to that, but they also don't need to be paragraphs.

73
00:05:42,500 --> 00:05:47,740
So the first sentence is what the user sees in the second sentence would be what they plan to do.

74
00:05:48,370 --> 00:05:50,850
Sometimes that's kind of molded together like we have here.

75
00:05:50,860 --> 00:05:53,800
The user is able to kind of review their item in their car.

76
00:05:53,830 --> 00:05:56,080
So they're kind of doing something at the same time.

77
00:05:56,080 --> 00:06:01,120
But once they are happy with that, once they've seen that information, they're able to do something

78
00:06:01,120 --> 00:06:01,390
else.

79
00:06:01,420 --> 00:06:05,950
So in this case, they're clicking that CTA to actually start that checkout process.

80
00:06:06,760 --> 00:06:07,600
Awesome.

81
00:06:07,840 --> 00:06:08,680
I love it.

82
00:06:09,010 --> 00:06:10,630
And it coming together.

83
00:06:11,530 --> 00:06:12,990
Let's go to the next step.

84
00:06:13,870 --> 00:06:19,210
So review purchase details is probably what we will do next.

85
00:06:22,980 --> 00:06:42,000
The user is able to review any details in relation to the total price user payment details, user address

86
00:06:42,480 --> 00:06:46,740
details, and that's probably it, I'm trying to think.

87
00:06:47,800 --> 00:06:56,020
So total price, hmm, maybe some check out details, maybe those are things like shipping.

88
00:06:57,220 --> 00:06:58,660
Shipping price.

89
00:06:59,830 --> 00:07:01,250
What else could there be?

90
00:07:01,270 --> 00:07:05,680
There could be like promo codes, so we do really need to think about all those different scenarios

91
00:07:05,680 --> 00:07:06,130
as well.

92
00:07:06,130 --> 00:07:09,630
So see how the details are kind of just coming to me as I'm building these screens.

93
00:07:09,640 --> 00:07:10,780
It's never going to be perfect.

94
00:07:11,200 --> 00:07:17,440
And that's honestly it's all about iterations about putting something down on paper or digitally and

95
00:07:17,440 --> 00:07:23,230
then building off that and getting better and better and just providing an overall good experience for

96
00:07:23,230 --> 00:07:23,830
your users.

97
00:07:23,830 --> 00:07:27,070
Don't just jump right into the pretty and fancy stuff just yet.

98
00:07:28,000 --> 00:07:32,890
So what we have here, the user is able to review any details in relation to the price.

99
00:07:32,890 --> 00:07:37,590
Check out details, user payment details and user address details.

100
00:07:38,260 --> 00:07:39,340
I'm just going to write this off.

101
00:07:39,790 --> 00:07:49,000
Once the user is satisfied, they can complete their purchase.

102
00:07:50,910 --> 00:07:51,180
Great.

103
00:07:51,210 --> 00:07:56,800
OK, so let's just kind of break up this screen a bit so we have the item details there.

104
00:07:57,870 --> 00:07:59,040
What else could they have?

105
00:07:59,760 --> 00:08:02,400
They'll probably have some information regarding.

106
00:08:04,460 --> 00:08:04,940
Like.

107
00:08:05,960 --> 00:08:06,920
Their account.

108
00:08:09,470 --> 00:08:16,020
And payment details, maybe that's at the bottom, I'm not sure, but the hierarchy just yet.

109
00:08:16,820 --> 00:08:22,100
That's something that you just kind of test over time, you prototyp with people just to get it right.

110
00:08:23,030 --> 00:08:25,160
Maybe there's a field for a promo code.

111
00:08:26,980 --> 00:08:31,540
I don't know what it looks like just yet for this checkout process.

112
00:08:31,570 --> 00:08:33,010
There's probably like a headline.

113
00:08:35,140 --> 00:08:40,660
OK, so we have like our item, we have our promo code.

114
00:08:42,600 --> 00:08:48,300
Maybe some details around the product or I mean, sorry about the users details like their method of

115
00:08:48,300 --> 00:08:51,620
payment and their address that maybe they'll be able to edit.

116
00:08:52,180 --> 00:08:56,190
So I'm starting to think about that kind of stuff that I need to design for and think about.

117
00:08:56,790 --> 00:09:00,510
Maybe this is a good place to throw in.

118
00:09:02,730 --> 00:09:04,470
This is what the total could be.

119
00:09:07,160 --> 00:09:09,450
Okay, perfect.

120
00:09:09,520 --> 00:09:10,950
I actually kind of looks like a receipt.

121
00:09:12,760 --> 00:09:14,740
Totally unintended that I like it.

122
00:09:15,310 --> 00:09:16,090
OK, so.

123
00:09:18,760 --> 00:09:21,060
What do you think the U.S. should do after here?

124
00:09:23,380 --> 00:09:29,920
And the user probably confirmed, so once the user is satisfied they can complete their purchase, the

125
00:09:29,920 --> 00:09:33,820
user gets a confirmation.

126
00:09:36,500 --> 00:09:43,340
And is able to return back to the home page.

127
00:09:43,700 --> 00:09:50,690
OK, so when a user gets like a confirmation screen or something like this, that's a pretty big deal.

128
00:09:50,700 --> 00:09:52,940
I think personally, I think it's a huge deal.

129
00:09:53,420 --> 00:09:58,670
And I think this is where we can start thinking about, well, a user just did something pretty amazing.

130
00:09:58,670 --> 00:10:03,740
They made a purchase on our platform and we should kind of like reward them with something, whether

131
00:10:03,740 --> 00:10:08,210
that's a micro interaction or some sort of animation just for, like, delite.

132
00:10:08,720 --> 00:10:18,710
So maybe it's something like we can start making a note here that says possible animation for our disconfirmation.

133
00:10:20,980 --> 00:10:26,470
So we can just kind of highlight that there and we can just label it a different color, because I want

134
00:10:26,470 --> 00:10:28,390
to really start thinking about these types of things.

135
00:10:29,050 --> 00:10:34,860
I don't want to leave it to the end because it's not good to leave it to the end, especially like how

136
00:10:34,870 --> 00:10:40,000
we spoke about that in terms of when we were sketching and sketching interactions so we can kind of

137
00:10:40,000 --> 00:10:44,260
break this out a little bit more and start thinking about, well, what does this look like?

138
00:10:44,410 --> 00:10:48,110
What is the possible animation that we want to build here if we do want to build an animation?

139
00:10:48,130 --> 00:10:51,940
Do we want to build an animation around, like the notification?

140
00:10:51,940 --> 00:10:54,400
So I'm going to probably leave a note here, too.

141
00:10:55,030 --> 00:11:06,480
So Kominski and Comen feel that perfect possible animation round notification.

142
00:11:07,750 --> 00:11:13,630
So I'm starting to pick out some key details here in this flow just so it makes my life easier when

143
00:11:13,780 --> 00:11:19,450
I come back to this or when I'm building I'm building this out further and that's it.

144
00:11:19,660 --> 00:11:20,290
There you have it.

145
00:11:20,300 --> 00:11:21,250
That's making a purchase.

146
00:11:21,310 --> 00:11:26,130
Step one is the user is able to see a card notification.

147
00:11:26,290 --> 00:11:30,610
Step two is they well, they click on the notification, then they go to step two and step two would

148
00:11:30,610 --> 00:11:32,560
be in their card screen.

149
00:11:32,950 --> 00:11:35,770
Look, I kind of think I forgot something here.

150
00:11:36,010 --> 00:11:38,620
Maybe in their card screen they possibly see.

151
00:11:39,820 --> 00:11:41,990
Additional items that they would like.

152
00:11:42,670 --> 00:11:45,170
So that's something to probably think about.

153
00:11:45,550 --> 00:11:51,280
I'm not sure if that's feasible or if we want to distract them here, but something to think about as

154
00:11:51,280 --> 00:11:51,580
well.

155
00:11:52,000 --> 00:11:58,030
Anyways, so step two is they go to their card screen and they're able to review this information.

156
00:11:58,030 --> 00:12:01,680
And if they're happy with that, they're going to go straight over here.

157
00:12:03,060 --> 00:12:11,700
And when they're done here, reviewing their whole order payment details, other types of input fields,

158
00:12:12,210 --> 00:12:18,270
check out total, they're able to click on this button to place their order.

159
00:12:18,270 --> 00:12:24,630
And once they're done that, they go to a confirmation screen that basically gives them a high five

160
00:12:24,630 --> 00:12:26,340
for doing what they're doing.

161
00:12:26,640 --> 00:12:33,150
So, like I said, keep these user flows simple because there will be more user flows.

162
00:12:33,480 --> 00:12:37,380
One hundred percent, as we saw, like, there's probably a couple of flows that could come from this.

163
00:12:37,710 --> 00:12:44,190
Like what happens if the user needs to change some payment details?

164
00:12:44,460 --> 00:12:46,300
We can easily create a user flow for that.

165
00:12:46,320 --> 00:12:49,440
What happens if the user deletes the item from here?

166
00:12:49,590 --> 00:12:50,280
Where do they go?

167
00:12:50,460 --> 00:12:54,140
Just keep making your user flows purposeful.

168
00:12:54,390 --> 00:12:55,680
I mean, they need to have a purpose.

169
00:12:55,890 --> 00:12:57,090
They need to be detailed.

170
00:12:57,480 --> 00:13:00,930
So that way you can keep track of them and other people can really understand them.

171
00:13:01,170 --> 00:13:07,260
And then from here, we can really start defining much more of the structure of the app and also much

172
00:13:07,260 --> 00:13:10,320
more of the details that we're going to need to design for.

173
00:13:10,320 --> 00:13:16,380
And that will definitely lead right into us actually creating some wire frames with some content.

174
00:13:16,860 --> 00:13:19,440
That's if for user flows, this is making a purchase.