1 00:00:00,520 --> 00:00:01,720 Hey, everyone, and welcome back. 2 00:00:01,740 --> 00:00:07,650 So we're going to talk about our Khatun Checo compositions that we've created based off of some of the 3 00:00:07,650 --> 00:00:10,190 components that we've created in the past and recipes that we've created. 4 00:00:10,680 --> 00:00:12,860 So you may notice that we have our car here. 5 00:00:12,870 --> 00:00:15,730 And what I've done with our car is I've made it really simple. 6 00:00:15,750 --> 00:00:17,830 I've used it as just an overlay. 7 00:00:18,360 --> 00:00:19,910 Now I have just my header. 8 00:00:20,160 --> 00:00:24,570 Now, this is a component that I've created, but I actually didn't use the component in this instance. 9 00:00:24,780 --> 00:00:29,670 We can use that because I just pulled this because I had a previous design of cart where I took up the 10 00:00:29,670 --> 00:00:32,160 whole page and I thought that wasn't necessary. 11 00:00:32,400 --> 00:00:38,640 And I thought a better implementation of it would be to actually have it just pop up from the bottom 12 00:00:38,820 --> 00:00:44,940 as an overlay and to keep that really simple and small, not have that take up too much of the screen. 13 00:00:44,940 --> 00:00:50,520 Because if we think about cart in general, when we buy stuff off of different types of marketplace 14 00:00:50,520 --> 00:00:53,510 websites, we don't necessarily buy like ten things at once. 15 00:00:53,520 --> 00:00:57,180 I mean, that's a rare occurrence, maybe if you're shopping for a holiday or something like that. 16 00:00:57,540 --> 00:01:01,760 But generally you're buying like maybe one or two things, maybe three things at once. 17 00:01:02,220 --> 00:01:07,380 And what I wanted to do is I want to make that very simple in terms of the experience. 18 00:01:07,380 --> 00:01:10,650 I want them to press that cart button, see this pop up. 19 00:01:10,950 --> 00:01:13,380 They can add to it really easily. 20 00:01:13,800 --> 00:01:15,570 I have these two variations here. 21 00:01:15,780 --> 00:01:19,920 Like I said, when you were starting to build out the design a bit more, we have to start thinking 22 00:01:19,920 --> 00:01:22,770 about all those different types of scenarios. 23 00:01:23,040 --> 00:01:26,970 We also think about the scenarios in the beginning as well, when we're building site maps, when we're 24 00:01:27,390 --> 00:01:30,690 sketching still, when we're, you know, building out user flows. 25 00:01:31,350 --> 00:01:36,600 The thing is user flows and sketching, that's kind of thing is going to just happen throughout the 26 00:01:36,600 --> 00:01:37,920 entire design process. 27 00:01:37,920 --> 00:01:42,390 So don't worry about, you know, forgetting something in the past because new features will come, 28 00:01:42,840 --> 00:01:47,550 new problems will need to be solved, and you'll need to kind of go back to the drawing board, quite 29 00:01:47,550 --> 00:01:54,600 literally, share those with your team or your stakeholders like clients and come to some sort of solution. 30 00:01:54,960 --> 00:01:57,000 So this is my solution for carp. 31 00:01:57,570 --> 00:02:03,510 And I use the same type of recipe that we created back in our design system, which was like our cart 32 00:02:03,510 --> 00:02:03,870 list. 33 00:02:05,680 --> 00:02:11,680 And I have the different car components, so you'll notice that this is not a component, this default 34 00:02:11,680 --> 00:02:16,220 component over here, that is just because of when I was using it within a prototype. 35 00:02:16,240 --> 00:02:21,640 So if I go to actually update this, I'll need to do is copy that. 36 00:02:21,940 --> 00:02:24,130 I can bring that down the list. 37 00:02:25,810 --> 00:02:26,840 I can remove that one. 38 00:02:26,860 --> 00:02:34,960 Now, what they do is I'm going to Comanche and I think I have this price that seventy five, ninety 39 00:02:34,960 --> 00:02:35,500 nine. 40 00:02:37,180 --> 00:02:40,960 And like you can just easily update it like that. 41 00:02:42,740 --> 00:02:43,230 Perfect. 42 00:02:43,490 --> 00:02:44,160 So there you go. 43 00:02:44,180 --> 00:02:49,280 Like, now we have a component you can even have that reflected. 44 00:02:52,990 --> 00:02:59,560 And here it's pushed all the way up, let's get rid of the one that isn't a component and there you 45 00:02:59,560 --> 00:03:01,170 go, everything's kind of back to normal now. 46 00:03:01,920 --> 00:03:04,510 Now, like I said, I had two variations here. 47 00:03:04,510 --> 00:03:08,590 I have a variation where we have the cart when the user first pulls it up. 48 00:03:08,590 --> 00:03:12,310 And then I have a variation where we have a cart where somebody swipes. 49 00:03:12,850 --> 00:03:16,540 And I just want to show that because when you're working closely with developers, they want to see 50 00:03:16,540 --> 00:03:19,720 all these different types of interactions and we'll get into prototypes later. 51 00:03:19,720 --> 00:03:25,840 But they want to see the different types of use cases we have for different types of models, overlays 52 00:03:25,840 --> 00:03:28,210 or just like compositions in general. 53 00:03:28,630 --> 00:03:33,220 So at the bottom, I've decided to kind of go with just showing off the total. 54 00:03:33,220 --> 00:03:39,610 Like I said, like we haven't seen this all caps version yet as typographic elements, but we've seen 55 00:03:39,610 --> 00:03:40,210 them in the pill. 56 00:03:40,210 --> 00:03:42,670 So I found like a maybe like a double use case for this. 57 00:03:42,670 --> 00:03:46,540 So I may create another style just to have for something like this. 58 00:03:47,050 --> 00:03:53,800 I have the checkout button with an arrow trying to create a little bit of like famo, which is fear 59 00:03:53,800 --> 00:03:59,250 of missing out or just trying to create some sort of urgency like come up, let's go in this direction. 60 00:03:59,590 --> 00:04:03,370 So when this happens, we're going to push them to a new page, which is the checkout. 61 00:04:04,180 --> 00:04:06,640 So they've already reviewed their car at this point. 62 00:04:06,910 --> 00:04:11,500 And then check out what we want to just kind of focus on is do we have the right type of payment method? 63 00:04:11,500 --> 00:04:15,180 You'll notice that I'm using the same card that we've created in the card section. 64 00:04:15,490 --> 00:04:19,210 So if we kind of go back to our design system, I'll take a look there. 65 00:04:19,660 --> 00:04:21,040 Let's go back to the cards. 66 00:04:21,910 --> 00:04:29,650 You'll see that we've created a Bank of America card, just something small that we can kind of change 67 00:04:29,650 --> 00:04:29,770 on. 68 00:04:29,800 --> 00:04:32,080 If you want to, like, add a new bank, you can do that. 69 00:04:32,080 --> 00:04:36,700 What I've done is I've just created a standard card that kind of fits our brand, but I've also just 70 00:04:36,700 --> 00:04:37,930 kind of slapped the name on there. 71 00:04:38,680 --> 00:04:42,040 I've also kind of slapped like a MasterCard logo. 72 00:04:42,040 --> 00:04:43,240 And you can you can do that, too. 73 00:04:43,600 --> 00:04:46,570 It's there for you to kind of go ahead and edit. 74 00:04:47,260 --> 00:04:48,850 Now, I have that. 75 00:04:48,850 --> 00:04:51,280 I've also added like a carousel at the bottom. 76 00:04:52,450 --> 00:05:01,360 So if users want to swipe through cards maybe of multiples, there's a cool interaction to be hard right 77 00:05:01,360 --> 00:05:01,750 there. 78 00:05:02,080 --> 00:05:07,330 We want to make this really nice, really exciting even through the checkout process, because if we 79 00:05:07,330 --> 00:05:11,980 take a look at all the different types of checkout processes that we've participated in, a lot of them 80 00:05:11,980 --> 00:05:12,970 are really boring. 81 00:05:13,630 --> 00:05:15,010 We don't even read anything. 82 00:05:15,280 --> 00:05:17,390 We are just kind of like, yeah, yeah, whatever. 83 00:05:18,310 --> 00:05:23,770 But if we do need to change credit cards, that kind of stuff becomes a little bit more less exciting. 84 00:05:23,920 --> 00:05:27,160 They also sometimes the experience there is not nice. 85 00:05:27,160 --> 00:05:31,870 So we want to make sure that these cards are right up in the user's face. 86 00:05:32,050 --> 00:05:33,790 They are very familiar for the users. 87 00:05:33,790 --> 00:05:39,310 So they can understand that, oh yes, this is my Visa or MasterCard that I've put into this application. 88 00:05:39,310 --> 00:05:41,830 So I can see that very vividly over here. 89 00:05:42,100 --> 00:05:47,290 I can swipe it if I need to add another one or if I need to use another one. 90 00:05:47,860 --> 00:05:52,360 I also have like the important shipping information right up front, like I know where this is getting 91 00:05:52,360 --> 00:05:52,930 shipped to. 92 00:05:56,630 --> 00:06:02,300 Below, I've also added a very small section for adding a promo code making that very simple. 93 00:06:02,600 --> 00:06:05,690 It has a CTA like a bright yellow button. 94 00:06:05,900 --> 00:06:10,760 But I mean, it's not necessarily the primary thing users need to do here, but I've kept it there just 95 00:06:10,760 --> 00:06:13,310 so it will reflect in the total price of right away. 96 00:06:13,310 --> 00:06:16,100 And users can see that connection between here and here. 97 00:06:16,500 --> 00:06:19,690 But like I said before, I'm using my placeholder unselected button. 98 00:06:20,240 --> 00:06:24,980 And if we want to show this interaction in more detail, we would create like another screen and have 99 00:06:24,980 --> 00:06:26,510 like a selected input as well. 100 00:06:26,510 --> 00:06:27,920 And I'll show you what that looks like later. 101 00:06:28,430 --> 00:06:33,370 I have my apply button over here, which is just kind of like my primary button. 102 00:06:33,380 --> 00:06:34,280 That is the default. 103 00:06:34,670 --> 00:06:37,160 And then I have like my delivery fee. 104 00:06:37,460 --> 00:06:40,280 I have the order total and the button. 105 00:06:40,280 --> 00:06:41,720 I'm using our footer. 106 00:06:41,720 --> 00:06:46,880 And I've noticed that I'm starting to use a footer very much like I'm using a header within the application. 107 00:06:46,880 --> 00:06:49,880 And I thought, you know, maybe this footer becomes an actual component now. 108 00:06:50,090 --> 00:06:55,370 So I may actually go back and create like a footer component section where this and I maybe add different 109 00:06:55,370 --> 00:07:00,410 variations like you've seen in the cart where there's a footer, where there's a button and text. 110 00:07:00,740 --> 00:07:04,550 Over here we have just like kind of the primary button. 111 00:07:04,880 --> 00:07:07,430 You'll see it also and like product pages as well. 112 00:07:08,840 --> 00:07:12,590 And once that happens, this is the exciting part. 113 00:07:12,590 --> 00:07:18,110 We have like a confetti pop at the end, you know, just showering down on our users, like, woohoo, 114 00:07:18,110 --> 00:07:19,100 you place your order. 115 00:07:19,340 --> 00:07:24,080 And what will happen here is just a continue button would pop up and they would just go back to the 116 00:07:24,080 --> 00:07:24,590 home page. 117 00:07:24,590 --> 00:07:27,100 But we want to kind of make it a little exciting right now. 118 00:07:27,110 --> 00:07:31,910 A lot of applications don't make it exciting when you do something really well. 119 00:07:32,420 --> 00:07:35,570 And this is kind of goes back to what we talked about with motion and animation. 120 00:07:35,570 --> 00:07:42,170 You know, it's OK to create these screens and reward your users in a way they kind of love that kind 121 00:07:42,170 --> 00:07:42,560 of stuff. 122 00:07:42,560 --> 00:07:49,400 And we want to make sure that it's reflected in our designs, gives our product a little bit more personality, 123 00:07:49,610 --> 00:07:54,110 especially with, like the bright colors, you know, just the animation of the confetti flying down. 124 00:07:54,110 --> 00:07:58,370 Whenever you actually complete in order, you do something successful. 125 00:07:58,700 --> 00:08:01,400 So I wanted to reflect also on the designs over here. 126 00:08:01,790 --> 00:08:07,310 And I've noticed that, OK, well, I have a confetti frame and I may actually have to make this into 127 00:08:07,310 --> 00:08:11,960 like an animation with fake motion or another type of application like principle or something like that 128 00:08:11,960 --> 00:08:12,890 or after effects. 129 00:08:13,190 --> 00:08:17,840 So I'll just create this and I may actually put this in their assets within our components in our design 130 00:08:17,840 --> 00:08:22,400 system if I want to reuse this elsewhere, because we do use a screen a couple of times. 131 00:08:22,880 --> 00:08:24,200 Yeah, you'll just realize that. 132 00:08:24,200 --> 00:08:30,350 OK, then this is some sort of reusable component or animation that we can kind of keep to the side 133 00:08:30,350 --> 00:08:31,820 and reuse whenever we want to. 134 00:08:32,510 --> 00:08:36,500 And again, like we have the footer come in here, it's a little different this time. 135 00:08:36,800 --> 00:08:38,180 It's still a fixed footer. 136 00:08:39,640 --> 00:08:45,100 As you can tell, it's fixed position over here, but it's not a primary button and it doesn't have 137 00:08:45,100 --> 00:08:50,310 like a thin horizontal rule that we see at the top of this, that little gray line. 138 00:08:50,620 --> 00:08:54,550 So there are different variations to be had for those components. 139 00:08:54,550 --> 00:09:00,010 And we'll probably go back and actually create more components based off of all the different variations 140 00:09:00,010 --> 00:09:00,780 we come up with. 141 00:09:01,000 --> 00:09:05,730 So it's OK to start creating high fidelity mockups without, you know, components and stuff like that. 142 00:09:05,980 --> 00:09:06,910 Totally fine. 143 00:09:06,910 --> 00:09:07,690 That's actually normal. 144 00:09:08,050 --> 00:09:11,950 When you start kind of adding components to your designs and stuff like that, you start to realize, 145 00:09:11,950 --> 00:09:13,920 hey, like this is starting to come together. 146 00:09:13,930 --> 00:09:15,070 It's really neat. 147 00:09:15,430 --> 00:09:17,500 Everything is like in its own place. 148 00:09:17,750 --> 00:09:20,380 But like, I'm finding that I don't have enough flexibility. 149 00:09:20,380 --> 00:09:25,210 So I have to go back and think about maybe some more typographic elements and stuff like that or more 150 00:09:25,210 --> 00:09:28,990 recipes that can help bring this all together a bit more. 151 00:09:29,470 --> 00:09:32,500 And that's it for Khatun Check-Out.