1 00:00:00,390 --> 00:00:02,040 Hey, everyone, and welcome back. 2 00:00:02,280 --> 00:00:08,970 So we are going to be talking about how we bring everything together, so we talked about how to create 3 00:00:09,240 --> 00:00:10,670 different types of components. 4 00:00:10,680 --> 00:00:14,270 We talked about like creating recipes for our design system. 5 00:00:14,280 --> 00:00:16,650 Let's take a look at what that looks like right now. 6 00:00:17,190 --> 00:00:23,960 So over here, we have our major, like foundational base styles. 7 00:00:23,970 --> 00:00:25,160 We have our colors. 8 00:00:25,500 --> 00:00:29,370 We have things like typography, iconography. 9 00:00:29,970 --> 00:00:37,680 If we go into our components, we have stuff like avatars checkboxes different various inputs. 10 00:00:38,520 --> 00:00:43,360 And you may be asking me, well, Daniel, how do I bring this all together? 11 00:00:43,380 --> 00:00:44,640 Like, how do I use these things? 12 00:00:45,000 --> 00:00:51,090 So at this point, you probably have started to, you know, created some more high fidelity designs. 13 00:00:51,100 --> 00:00:54,770 You've settled on more of a specific style. 14 00:00:55,140 --> 00:01:02,460 So as you can tell, things have come together a bit more and there is much more like style definition 15 00:01:02,460 --> 00:01:05,760 in the different types of components that we've created. 16 00:01:06,030 --> 00:01:09,850 So you can tell that we definitely have a direction to go in. 17 00:01:10,500 --> 00:01:15,050 Now, as I said before, design systems are always changing. 18 00:01:15,060 --> 00:01:21,060 We are constantly iterating on them, but they give us a great way to have like a bunch of components 19 00:01:21,060 --> 00:01:25,560 in one place that you can update and have it update through the rest of your application. 20 00:01:26,070 --> 00:01:30,810 So this is my current iteration of the design system for Habitual. 21 00:01:31,140 --> 00:01:35,280 And what I've created here are a bunch of recipes like I showed you, and now I want to show you what 22 00:01:35,280 --> 00:01:37,380 it looks like when we actually start bringing it together. 23 00:01:37,830 --> 00:01:39,990 I have a bunch of different pages laid out. 24 00:01:41,190 --> 00:01:47,730 I have our own burning pages, registration, and as you can tell, they all have that very similar 25 00:01:47,730 --> 00:01:50,730 style and there's a lot of visual cohesiveness. 26 00:01:51,090 --> 00:01:53,570 So let me show you how I went about and actually did that. 27 00:01:53,820 --> 00:01:56,100 So let's go to the wish-List. 28 00:01:56,100 --> 00:01:57,940 I think that would be a great place to start. 29 00:01:58,200 --> 00:02:01,610 So you can tell a lot of things have changed since the last time. 30 00:02:02,310 --> 00:02:06,110 How did I create this actual page? 31 00:02:06,510 --> 00:02:11,010 So as you can tell over here, I've created a frame called the header. 32 00:02:11,490 --> 00:02:14,150 Let's just bring that up so we can see. 33 00:02:14,670 --> 00:02:16,980 So I have everything that scrolls. 34 00:02:16,980 --> 00:02:18,870 I have our footer, which is our nav. 35 00:02:18,870 --> 00:02:25,590 And what I've done here is I've actually gone to my ascites tab here and I'm looking through here and 36 00:02:25,590 --> 00:02:34,170 I see my main navigation component and I want the wish list component, so I'll just drag that into 37 00:02:34,380 --> 00:02:35,370 my frame. 38 00:02:36,400 --> 00:02:41,910 Like I've done here, and then I've set my component there, and then if I change them, I design system, 39 00:02:41,920 --> 00:02:45,240 then it will automatically update in this mock up over here. 40 00:02:46,180 --> 00:02:50,970 So I have one for wish-List, I have one for our cart or a shopping bag. 41 00:02:51,400 --> 00:02:53,800 I have four orders. 42 00:02:54,490 --> 00:02:56,460 And you see we have different variations. 43 00:02:56,830 --> 00:03:02,410 Now, if we take a look at what we have over here, this is our SWIP container and you may actually 44 00:03:02,410 --> 00:03:07,150 remember this from when we created a recipe for product cards. 45 00:03:07,540 --> 00:03:09,340 So we had large product containers. 46 00:03:09,580 --> 00:03:15,490 And what I've done is I've actually just kind of taken this recipe that we've put together. 47 00:03:16,850 --> 00:03:21,540 And I've just copied it over there now, do I think we're going to use this forever? 48 00:03:21,560 --> 00:03:22,880 Probably not, actually. 49 00:03:22,880 --> 00:03:25,700 I can guarantee that things are going to change. 50 00:03:25,700 --> 00:03:29,330 Different types of details will change within these product cards. 51 00:03:29,330 --> 00:03:33,320 But this is our iteration right now, and this is what we think the user wants right now. 52 00:03:34,220 --> 00:03:39,620 So if I go back, I have a recipe over here and I will continue to use this anywhere. 53 00:03:39,620 --> 00:03:42,380 I see a large container that needs to be used. 54 00:03:42,740 --> 00:03:47,050 And that's what I mean about having so much reusability within your design system. 55 00:03:47,360 --> 00:03:53,300 You may also find that there's some components that you may have forgotten or some certain styles that 56 00:03:53,300 --> 00:03:54,340 you may have forgotten. 57 00:03:54,500 --> 00:03:59,780 It's very hard to build an application from the ground up so quickly without taking into account all 58 00:03:59,780 --> 00:04:00,920 the different use cases. 59 00:04:01,400 --> 00:04:04,250 Now, more specifically, I'm talking about like the heading over here. 60 00:04:04,790 --> 00:04:10,490 The last time I thought I was going to use a more traditional, just like a capitalized text, but I've 61 00:04:10,610 --> 00:04:15,050 done in all caps header for the different types of content that follows below. 62 00:04:15,050 --> 00:04:18,110 And then I have Dougray Link or underlined link. 63 00:04:18,110 --> 00:04:21,060 That's all capitalized right beside the on the right side. 64 00:04:21,860 --> 00:04:29,420 Now, I didn't think about this before, but as I started to build out the fidelity of our application, 65 00:04:29,600 --> 00:04:33,590 I found out that, you know, I need a little more variation with my typographic styles. 66 00:04:33,800 --> 00:04:38,630 So I'm going to either create a new style or I'm going to just kind of create a variation. 67 00:04:38,640 --> 00:04:45,020 So I have like the link here, which is this style, the interactions link style, and I've just kind 68 00:04:45,020 --> 00:04:46,250 of capitalized it on my own. 69 00:04:46,250 --> 00:04:50,680 And I may go back into our typography section and actually create a capitalized version there. 70 00:04:50,840 --> 00:04:54,100 So that way it's just easily accessible since we're using it so much. 71 00:04:54,830 --> 00:05:01,850 You may also find that, wow, I use these two typographic elements together and I use them a lot. 72 00:05:02,180 --> 00:05:04,730 So I'm actually I may actually take them out here. 73 00:05:06,680 --> 00:05:09,380 I'm going to actually create a frame around them. 74 00:05:12,410 --> 00:05:20,040 And we'll call it content header, and this content header will be like another recipe that we use. 75 00:05:20,810 --> 00:05:26,380 You'll notice that whenever I move this frame, then it gets moved as well. 76 00:05:26,930 --> 00:05:29,180 This can have that on both sides. 77 00:05:29,180 --> 00:05:32,210 So we'll see what that looks like when we start to shrink it down. 78 00:05:33,550 --> 00:05:40,210 So now we have our own recipe for that section and we can just kind of copy and paste that from our 79 00:05:40,210 --> 00:05:41,840 design system whenever we need it. 80 00:05:42,100 --> 00:05:46,450 So remember, your design system is kind of like that source of truth and you're never going to get 81 00:05:46,450 --> 00:05:50,740 it right in the first try and you're going to continually iterate on it as you see your application 82 00:05:50,740 --> 00:05:53,290 grow and as new demands need to be met. 83 00:05:53,590 --> 00:05:59,980 Like if you new learnings that you found out through user testing or just general analytics, you'll 84 00:05:59,980 --> 00:06:05,440 find out that maybe we should have like a big button on the bottom of these cards that says add to CART 85 00:06:06,130 --> 00:06:09,010 and I'll show you that and how we can iterate later on. 86 00:06:09,400 --> 00:06:11,560 So this is what I've done for the wish-List page right now. 87 00:06:11,860 --> 00:06:14,170 I've also created like different variations. 88 00:06:14,170 --> 00:06:19,150 I'm thinking through these different use cases, more in depth right now, like I've done the user flows 89 00:06:19,150 --> 00:06:19,570 for them. 90 00:06:19,690 --> 00:06:23,470 And I thought, OK, when you come to the wishlists pages, a couple of different scenarios here. 91 00:06:23,470 --> 00:06:27,210 We have like a locked out version where, you know, you haven't logged in yet. 92 00:06:27,220 --> 00:06:32,230 So we have that CTA at the top pushes them to like a sign up or a login screen. 93 00:06:32,530 --> 00:06:36,100 I also have a card here that says you have no safe products. 94 00:06:36,400 --> 00:06:39,810 You know, you can start saving to add to wishlists or creating one now. 95 00:06:39,820 --> 00:06:41,220 So I don't have a log in. 96 00:06:41,230 --> 00:06:43,210 This is probably going to prompt me to create one. 97 00:06:44,170 --> 00:06:45,520 So I have that. 98 00:06:45,520 --> 00:06:49,540 I've also incorporated different elements like illustration. 99 00:06:49,540 --> 00:06:51,310 So let's take a look at that really quickly. 100 00:06:52,570 --> 00:06:58,540 So what I've done here is I've started to use these illustrations through a plug in and I'll show you 101 00:06:58,540 --> 00:07:02,110 with that plug in is called it's actually just called illustrations. 102 00:07:02,500 --> 00:07:05,500 So it's launch that it's running right now. 103 00:07:05,950 --> 00:07:09,070 OK, so pretty funky plug in over here. 104 00:07:09,370 --> 00:07:13,120 And what I've done is I've just taken like one like this. 105 00:07:14,170 --> 00:07:15,310 Let's just throw that in there. 106 00:07:15,340 --> 00:07:16,350 Let's close that plug in. 107 00:07:16,360 --> 00:07:19,300 So I've taken this illustration that we've gotten from that plug in. 108 00:07:20,510 --> 00:07:24,500 And a shift option for that, so I can scale it appropriately. 109 00:07:25,440 --> 00:07:30,330 OK, and what I've done is I've just used our brand colors, so I'll use like the primary to replace 110 00:07:30,330 --> 00:07:34,430 that and to replace the block, I'll use like just a lighter gray. 111 00:07:34,740 --> 00:07:40,850 And just like a little use of an illustration like that makes this card much more better. 112 00:07:40,860 --> 00:07:47,340 Like, if we remove that, it doesn't necessarily have the the same effect that it did prior. 113 00:07:52,130 --> 00:07:57,590 So let's just move that up so as you can tell, it's really plain, the illustration adds a little more 114 00:07:57,650 --> 00:07:59,140 of a dynamic touch to it. 115 00:07:59,220 --> 00:08:02,720 It makes a little more exciting and gives your application a little bit more personality. 116 00:08:03,410 --> 00:08:06,040 So that is what I've done here. 117 00:08:06,050 --> 00:08:12,050 And like I said before, I've noticed that I've started to use cards like this to prompt users to do 118 00:08:12,050 --> 00:08:15,430 certain things with like a primary button. 119 00:08:15,710 --> 00:08:20,810 I have like a secondary copy and I also have the primary copy over here. 120 00:08:20,810 --> 00:08:21,860 And then an illustration. 121 00:08:22,430 --> 00:08:28,700 I'll create card and I may actually create a component out of this now because I found that I'm using 122 00:08:28,700 --> 00:08:30,110 a bunch of different illustrations. 123 00:08:30,350 --> 00:08:33,170 I'm using this a bunch of different scenarios that it may be reusable. 124 00:08:33,560 --> 00:08:38,460 So that's another example of how you find more reusability as you start to design. 125 00:08:38,930 --> 00:08:42,260 I've also created like a title over here with a background. 126 00:08:42,260 --> 00:08:43,220 So this is our header. 127 00:08:45,540 --> 00:08:56,070 So all housing right now is the background color, it has the wish list copy and the avatar can actually 128 00:08:56,070 --> 00:08:56,990 come in here as well. 129 00:08:58,900 --> 00:09:09,610 OK, you can throw that in there and then we can just say log in CTA and right now we have a nice header 130 00:09:09,610 --> 00:09:10,510 component as well. 131 00:09:11,170 --> 00:09:17,410 So that is another way to start to build out your design system a bit more because we do have some top 132 00:09:17,410 --> 00:09:18,590 navigation options. 133 00:09:19,360 --> 00:09:22,370 Now, let's take a look at some other options we have on wish-List. 134 00:09:22,810 --> 00:09:27,760 So over here, when you actually have an active list and you've logged in, you have your avatar, you 135 00:09:27,760 --> 00:09:28,990 see how things have changed a bit. 136 00:09:29,320 --> 00:09:31,450 You have like your wish list at the top. 137 00:09:31,720 --> 00:09:33,790 So right now I have like a personal wish list. 138 00:09:34,060 --> 00:09:37,660 I'm using this component in here as well, which is like your invite. 139 00:09:37,840 --> 00:09:43,630 I'm using a horizontal component that possibly opens up like a list where you can share this. 140 00:09:43,870 --> 00:09:48,670 You can invite more people possibly or actually just delete the list and you'll probably open up an 141 00:09:48,670 --> 00:09:53,660 overlay within whatever operating system you using, whether that's iOS and Android, as you can tell 142 00:09:53,660 --> 00:09:58,960 them, using a small wish list components that we've created these horizontal car reviews. 143 00:10:01,120 --> 00:10:06,150 I've created another observer over here and I have another CTA, which I'm using the secondary button 144 00:10:06,490 --> 00:10:10,330 now, as you can tell, like this seems like a pretty standard thing that we're going to probably be 145 00:10:10,330 --> 00:10:11,440 using a lot of. 146 00:10:11,770 --> 00:10:16,930 And this makes sense to probably create, like either a component out of something like this or just 147 00:10:16,930 --> 00:10:19,000 a recipe so that we can reuse that. 148 00:10:20,110 --> 00:10:26,290 And again, I'm repeating this same kind of thing over here, like I suggested, for U.S. possibly showing 149 00:10:26,290 --> 00:10:31,750 them results that are based off of their recommendations and based off of their warrants within their 150 00:10:31,750 --> 00:10:32,340 wish list. 151 00:10:32,380 --> 00:10:34,720 So I have like some Bose headphones over here. 152 00:10:34,960 --> 00:10:41,650 You know, they coincide with maybe the music that this person is listening to or just general technology. 153 00:10:42,890 --> 00:10:48,800 So that's just another option we have in wish-List, and the last option I have here is what happens 154 00:10:48,800 --> 00:10:52,640 if a user comes here and they don't have a wish list, but they are logged in. 155 00:10:52,970 --> 00:10:57,320 So now what they need to do is all you need to do is create a wish list. 156 00:10:57,410 --> 00:11:03,320 They'll select the CTA over here and it will prompt them to kind of name a wish list, invite some people 157 00:11:03,320 --> 00:11:06,080 and then they can go ahead and start saving to it. 158 00:11:07,310 --> 00:11:14,030 So that is what we have here thus far for wish-List, there are so many other scenarios like what happens 159 00:11:14,030 --> 00:11:15,150 if we don't have a wish list? 160 00:11:15,410 --> 00:11:16,880 What happens if we do have a wish list? 161 00:11:16,880 --> 00:11:19,330 But what happens when we first click this? 162 00:11:20,000 --> 00:11:20,810 Where will it go? 163 00:11:20,840 --> 00:11:27,740 Will it prompt me within a model to say I want to save to this specific wish list or that specific wish 164 00:11:27,740 --> 00:11:27,960 list? 165 00:11:27,980 --> 00:11:33,890 So as you can tell, as you start building out the application, you'll realize that while there's so 166 00:11:33,890 --> 00:11:38,330 many different use cases that I haven't necessarily thought about, and that's totally fine, because 167 00:11:38,510 --> 00:11:43,880 that's just the nature of the job and that's just the nature of actually designing from low fidelity 168 00:11:43,880 --> 00:11:44,770 to high fidelity. 169 00:11:45,230 --> 00:11:51,920 So this is how we've built out wish thus far, using some of the components that we've created, using 170 00:11:51,920 --> 00:11:57,190 the recipes that we've created and actually finding some new components and new recipes along the way.