1 00:00:00,330 --> 00:00:01,710 Hello and welcome back. 2 00:00:01,860 --> 00:00:05,110 We're going to be talking about site maps and we're going to be building our own and. 3 00:00:05,960 --> 00:00:11,430 Before we build our own, I want to go through a couple of different things about my process and how 4 00:00:11,430 --> 00:00:13,180 we can just get started on the right foot. 5 00:00:13,620 --> 00:00:19,470 So what I like to do is I like to grab all those sketches that we created in the beginning, and I'd 6 00:00:19,470 --> 00:00:23,170 like to just drop them into my files wherever they're relevant, of course. 7 00:00:23,580 --> 00:00:29,190 So if I'm done sharing them with the team, I'll put them in some sort of folder or a page where I can 8 00:00:29,190 --> 00:00:29,520 share. 9 00:00:29,520 --> 00:00:35,520 So I'll just click, share and copy that link and just drop it into a slot group or whatever messaging 10 00:00:35,520 --> 00:00:36,450 platform we're using. 11 00:00:37,650 --> 00:00:44,310 And over here, we have all our sketches, so I'm using them in our sitemap file right now, and they're 12 00:00:44,310 --> 00:00:47,460 going to help us really figure out the structure of our application. 13 00:00:47,470 --> 00:00:53,580 They're going to help us think about maybe some details or details on pages that could really influence 14 00:00:53,580 --> 00:00:55,390 the categorization of certain things. 15 00:00:55,680 --> 00:00:59,250 So we started with mapping out the overall journey. 16 00:00:59,250 --> 00:01:02,300 So I know that we need an onboarding screen. 17 00:01:02,310 --> 00:01:07,130 I do know that we need some sort of home screen or this looks like a search results screen that I quickly 18 00:01:07,140 --> 00:01:07,660 marked up. 19 00:01:08,460 --> 00:01:13,260 I know that there's going to be some sort of like order screen says package shipped here and a package 20 00:01:13,260 --> 00:01:13,770 arrived. 21 00:01:13,770 --> 00:01:20,880 So there's probably maybe another screen that will pop up for the user, but that is probably just conditional. 22 00:01:20,890 --> 00:01:23,900 So we're not going to necessarily worry about that kind of stuff just yet. 23 00:01:24,600 --> 00:01:31,130 I do know that there's a product page over here as well and we have a cart. 24 00:01:31,530 --> 00:01:38,190 So I know that there is certain areas where I can get to like the cart differently so I can probably 25 00:01:38,190 --> 00:01:40,220 get to the cart from the product description. 26 00:01:40,320 --> 00:01:44,010 I haven't necessarily thought about that too too much, but is a possibility. 27 00:01:44,010 --> 00:01:46,490 Maybe once you add an item, they'll push you into the cart. 28 00:01:46,860 --> 00:01:52,380 But mainly I think we thought about the cart from a navigation standpoint and keeping it there at all 29 00:01:52,380 --> 00:01:52,740 times. 30 00:01:52,740 --> 00:01:57,330 So we'll probably keep the cart in the navigation and we're going to worry about that when we're talking 31 00:01:57,330 --> 00:01:58,410 about actual site maps. 32 00:01:58,420 --> 00:02:04,480 So it looks like our main navigation is like home save orders cart. 33 00:02:04,500 --> 00:02:08,650 And there's going to be some extra information on each page that we're also going to break down. 34 00:02:09,120 --> 00:02:10,380 So right now we have a home page. 35 00:02:10,380 --> 00:02:11,910 It looks like we have some products here. 36 00:02:11,910 --> 00:02:18,150 I have a profile avatar that'll probably allow users to actually access a profile and maybe account 37 00:02:18,150 --> 00:02:18,720 settings. 38 00:02:19,260 --> 00:02:21,650 So we'll think about that while we're building our name up. 39 00:02:21,660 --> 00:02:23,520 We do have like a saved section. 40 00:02:24,720 --> 00:02:32,310 And this C section probably has different items, more similar items, a way into the card section. 41 00:02:33,180 --> 00:02:34,270 What else do we have here? 42 00:02:34,290 --> 00:02:36,960 We have a car, so we've already thought about that a bit. 43 00:02:38,270 --> 00:02:43,520 And here I'm already thinking about some of the navigation schemes, so I know a search leads to a product 44 00:02:43,520 --> 00:02:48,560 or results, then leads to a product, we have a product that leads right to checkout. 45 00:02:48,920 --> 00:02:52,170 We probably have categories down here that we need to think about. 46 00:02:52,310 --> 00:02:55,160 We spoke about kind of like those primary, secondary and tertiary levels. 47 00:02:55,160 --> 00:02:57,860 So we're going to think about how far we need to go. 48 00:02:58,400 --> 00:02:59,300 Probably not too far. 49 00:02:59,300 --> 00:03:01,100 I'm thinking only like secondary. 50 00:03:02,040 --> 00:03:03,610 So what do we have here? 51 00:03:03,630 --> 00:03:06,420 We have orders, so we probably have an orders page. 52 00:03:08,930 --> 00:03:09,760 OK. 53 00:03:09,800 --> 00:03:16,250 And yes, we do have some sort of navigation scheme that we started building up, and what I have here 54 00:03:16,250 --> 00:03:17,480 is home description. 55 00:03:17,490 --> 00:03:25,190 So what I really want you guys to do is grab all your sketches, digitize them, put them into Fatema 56 00:03:25,190 --> 00:03:29,460 and use them to really help influence what you're trying to build here. 57 00:03:30,020 --> 00:03:35,480 Sometimes people sketch and they forget about the sketch and they start building something entirely 58 00:03:35,480 --> 00:03:37,770 different or they start kind of fresh. 59 00:03:37,790 --> 00:03:39,380 We don't necessarily want to start fresh. 60 00:03:39,390 --> 00:03:43,430 We want to influence the work as we go along based off of our findings. 61 00:03:43,760 --> 00:03:45,110 So whatever feedback you got. 62 00:03:46,030 --> 00:03:52,910 Implements here don't have to necessarily go back and, like, redo everything, just keep moving. 63 00:03:53,560 --> 00:03:58,410 So we have screen flows and we know that a search will lead to results and the results to description. 64 00:03:58,420 --> 00:04:03,560 OK, so we basically know where we're going with some of these sketches. 65 00:04:03,580 --> 00:04:05,950 Now, let's review some of our user flows here. 66 00:04:06,190 --> 00:04:08,050 So we have registering with our product. 67 00:04:09,650 --> 00:04:14,090 We know that there will be a welcoming or on boarding, I'm not sure what that will look like, but 68 00:04:14,100 --> 00:04:16,010 leading to a registration floor. 69 00:04:17,410 --> 00:04:20,120 Which we need to think about, which would push us into the home page. 70 00:04:20,740 --> 00:04:22,170 So that's helpful. 71 00:04:23,150 --> 00:04:28,130 Over here, we have finding the right products through search, so we've done this already with our 72 00:04:28,130 --> 00:04:31,490 sketches, so we this is just more refined. 73 00:04:32,600 --> 00:04:38,480 Yeah, that yeah, we've done that and we are making a purchase, and so we understand the car, so 74 00:04:38,480 --> 00:04:40,370 we have a lot of refined little flows here. 75 00:04:40,770 --> 00:04:49,280 And since our application isn't too detailed or complex, we have a good starting off point based off 76 00:04:49,280 --> 00:04:50,210 of what we have here. 77 00:04:50,210 --> 00:04:52,670 And you'll probably have much more than this. 78 00:04:52,940 --> 00:04:56,500 And, you know, you should start thinking about all the different types of flows. 79 00:04:56,960 --> 00:05:02,170 But like I said earlier, the design process is just constantly evolving. 80 00:05:02,190 --> 00:05:04,100 You don't necessarily stop sketching. 81 00:05:04,100 --> 00:05:06,200 You don't necessarily stop creating user flows. 82 00:05:06,440 --> 00:05:12,940 Everything's always kind of happening simultaneously in a way, especially with sketching and user flows. 83 00:05:12,950 --> 00:05:16,550 So don't worry, if you don't have too much, you'll figure it out once you start building out the site 84 00:05:16,560 --> 00:05:19,010 map that maybe just doesn't necessarily make sense. 85 00:05:19,010 --> 00:05:20,560 And I need to go back and think about it. 86 00:05:21,050 --> 00:05:26,950 So don't be too hard on yourself if you forget something, because it definitely will happen. 87 00:05:28,130 --> 00:05:33,440 Especially once you start talking to more people and getting feedback, so before we begin, I just 88 00:05:33,440 --> 00:05:34,960 want to explain what I have here. 89 00:05:34,970 --> 00:05:36,440 And these are a couple of components. 90 00:05:36,440 --> 00:05:38,930 And you know how much I hate recreating the wheel. 91 00:05:39,530 --> 00:05:46,190 These are some components that I kind of took from a resource for site maps, because if somebody else 92 00:05:46,190 --> 00:05:51,320 created it and it's a free resource, I am down to use it because it's going to make my life easier 93 00:05:51,320 --> 00:05:54,590 and link that original resource for you. 94 00:05:55,000 --> 00:05:56,270 But you can use that. 95 00:05:56,270 --> 00:05:57,350 You can use what I've created here. 96 00:05:57,350 --> 00:05:58,570 I've kind of modified it a bit. 97 00:05:58,580 --> 00:05:59,950 It's just what I need at least. 98 00:06:00,650 --> 00:06:02,880 So let me just break this down. 99 00:06:02,900 --> 00:06:09,710 These are the individual components that will be using and I know I explained same a little differently 100 00:06:09,710 --> 00:06:14,930 in terms of just having a label, but I really like to build site maps in a way where I can start understanding 101 00:06:14,930 --> 00:06:21,770 the content structure inside so each page may have their own set of content that will link elsewhere. 102 00:06:21,950 --> 00:06:28,070 And you can kind of start merging some sort of site map with like a little bit of a flow diagram. 103 00:06:28,520 --> 00:06:32,900 I mean, like you don't want to get too complex, but it really helps you think about different types 104 00:06:32,900 --> 00:06:34,530 of content that you're going to need on the page. 105 00:06:34,550 --> 00:06:40,550 So this kind of stuff will be obviously influenced by your sketches and your user flows. 106 00:06:40,550 --> 00:06:46,880 And it'll give you a good overview if you have redundant content somewhere or if you don't have a piece 107 00:06:46,880 --> 00:06:48,350 of content that you forgot about. 108 00:06:48,800 --> 00:06:50,330 And we'll probably figure that out now. 109 00:06:50,930 --> 00:06:52,290 So what do we have here? 110 00:06:52,310 --> 00:06:53,980 So I have a public component. 111 00:06:54,000 --> 00:06:59,150 So this basically means that if a person uses our app and doesn't have an account, it's a nice shade 112 00:06:59,150 --> 00:06:59,510 of blue. 113 00:06:59,840 --> 00:07:03,740 If they're a member, they'll only be able to see content that is member based. 114 00:07:04,190 --> 00:07:09,830 And we have a log in or sign up button and we have an outside link. 115 00:07:10,230 --> 00:07:16,760 I'm not sure I'm going to be using outside links, but it definitely helps to have some variety and 116 00:07:16,760 --> 00:07:18,650 we can obviously create more of these. 117 00:07:18,650 --> 00:07:27,080 And if you option Command B, we will essentially detach that instance and we can recreate our own instance 118 00:07:27,080 --> 00:07:31,250 by going option command communicate and we can rename it to something else. 119 00:07:32,200 --> 00:07:38,770 OK, so let's just camenzind out of that and in here, this is just the container, so I kind of have 120 00:07:38,770 --> 00:07:43,750 it set up similar to what the original file had, which is this nice, cool little browser looking in 121 00:07:43,750 --> 00:07:49,420 window has a title and this is going to be the title of our page and we are going to name all these 122 00:07:49,420 --> 00:07:50,680 pieces based off of the content. 123 00:07:50,680 --> 00:07:56,470 So I will show you what that looks like right when we get into creating a sign up.