1 00:00:00,330 --> 00:00:00,830 Welcome back. 2 00:00:00,870 --> 00:00:06,250 We're going to jump right into sketching more flows this time we're going to focus on screen flows. 3 00:00:06,810 --> 00:00:11,410 Now, here you should really focus on a user's actions through a specific flow. 4 00:00:11,850 --> 00:00:17,190 It could be a small sequence, a sequence of screens, or it could be a journey that branches. 5 00:00:18,000 --> 00:00:19,340 So let's think about our client again. 6 00:00:20,340 --> 00:00:23,130 This could be a user who actually searches for a product. 7 00:00:23,760 --> 00:00:24,680 So let's get in there. 8 00:00:25,320 --> 00:00:27,360 So I'm just going to just title this. 9 00:00:27,370 --> 00:00:32,250 I mean, it's really hard to kind of drawing this tablet, but I'm not going to really title everything 10 00:00:32,250 --> 00:00:33,210 we can just say, like. 11 00:00:36,640 --> 00:00:42,850 Zoom out and we're going to do is going to just draw a frame here, perfect, once again, not really 12 00:00:42,850 --> 00:00:48,460 worrying about the details here, but we're going to just focus on how does a user complete this flow 13 00:00:48,700 --> 00:00:49,320 properly? 14 00:00:49,750 --> 00:00:52,030 How do they achieve their goal of finding a product? 15 00:00:52,650 --> 00:00:58,800 We're going to do is I think they'll come to the home page and they may access our search bar. 16 00:00:59,350 --> 00:01:00,760 You know, there may be a navigation. 17 00:01:00,760 --> 00:01:06,970 I'm not sure what those navigation items are just yet, but this is what the makeup of the page is thus 18 00:01:06,970 --> 00:01:10,600 far after they interact with that. 19 00:01:11,750 --> 00:01:16,160 The next sequence is a user sees results, so. 20 00:01:18,330 --> 00:01:26,310 Pardon my messiness, but that's OK, so they'll see some results and over here we'll have some images. 21 00:01:26,580 --> 00:01:30,390 I know that there's going to be some sort of content here, and this is going to really help me start 22 00:01:30,390 --> 00:01:34,650 building some sort of requirements that I need to account for when I'm designing elements. 23 00:01:34,980 --> 00:01:40,470 So like, I know that there's these cards that have an image, they have some text. 24 00:01:40,470 --> 00:01:41,670 I'm not sure what that text is. 25 00:01:41,670 --> 00:01:42,840 It could be a product name. 26 00:01:42,840 --> 00:01:47,220 It could be a combination of that plus price plus other elements. 27 00:01:47,670 --> 00:01:51,060 But I do know that when they do click over here in this area. 28 00:01:52,600 --> 00:01:53,680 We're going to move over. 29 00:01:59,240 --> 00:02:05,180 Step three would probably be something like a product description, so we'll just write item. 30 00:02:07,620 --> 00:02:12,000 So, I mean, you don't need to copy exactly what I'm doing, I really urge you to think outside the 31 00:02:12,000 --> 00:02:14,390 box, take some time to just sketch out. 32 00:02:14,400 --> 00:02:16,800 I mean, you can use a tablet, whatever really works for you. 33 00:02:18,250 --> 00:02:22,030 The item description I'm starting to really think about some of the content that's going there, it 34 00:02:22,030 --> 00:02:27,240 could be like a name, let's get in there and start writing a little bit of content. 35 00:02:28,090 --> 00:02:30,190 Price could be over here. 36 00:02:30,430 --> 00:02:32,710 There could be like options to change color. 37 00:02:32,720 --> 00:02:42,130 I'm not sure exactly, but there's some text and then maybe there's like a button sticking to the bottom. 38 00:02:42,340 --> 00:02:43,660 That's just like add to cart. 39 00:02:46,730 --> 00:02:51,130 Just double tap or two fingers in concept, and you'll be able to actually just go back. 40 00:02:51,140 --> 00:02:53,210 So if I go this double tap. 41 00:02:54,040 --> 00:02:58,780 Perfect next step, the click that button, they've added that to their cart. 42 00:03:00,810 --> 00:03:05,700 Step four, actually, you know what, if they add that to the car, they found the item, I'll probably 43 00:03:05,700 --> 00:03:08,000 just go to the car and we'll end the flow right here. 44 00:03:08,010 --> 00:03:11,130 I think we can actually start thinking about alternate scenarios. 45 00:03:11,310 --> 00:03:12,950 So they've added their item to a cart. 46 00:03:13,710 --> 00:03:14,430 Perfect. 47 00:03:15,530 --> 00:03:17,570 And maybe there's a check out, but in. 48 00:03:18,720 --> 00:03:24,230 Over there, another interesting thing is we start thinking about different things like hierarchy, 49 00:03:24,240 --> 00:03:30,720 so if navigations it to the bottom, maybe we start using it for primary buttons and start sticking 50 00:03:30,990 --> 00:03:35,420 other things to the top, which are a little bit more harder to access on mobile. 51 00:03:35,880 --> 00:03:39,150 Just different things we start to think about in terms of like page hierarchy. 52 00:03:39,390 --> 00:03:44,430 It's really going to help us influence like ways we start building site maps and actually start building 53 00:03:44,430 --> 00:03:45,180 that page hierarchy. 54 00:03:45,870 --> 00:03:48,000 Let's think about different Ultranet flow. 55 00:03:48,750 --> 00:03:53,610 What we know here is that we made the assumption that they're going to come in and they're going to 56 00:03:53,610 --> 00:03:54,510 click that search bar. 57 00:03:55,080 --> 00:03:56,990 But there's other ways to actually find a product. 58 00:03:57,750 --> 00:04:02,170 And this is where we can start thinking about other ways to make this process a little bit easier. 59 00:04:02,490 --> 00:04:05,490 So we'll label this one and we'll just call this home. 60 00:04:06,580 --> 00:04:10,630 But what happens if we really think about, like, placing product strategically there? 61 00:04:12,000 --> 00:04:17,760 Products for a user, so we do know that the application that we are building is for personalized shopping 62 00:04:17,760 --> 00:04:22,680 experience, like a really personalized shopping experience based off of their habits, based off of 63 00:04:22,680 --> 00:04:24,060 their interests. 64 00:04:24,360 --> 00:04:32,010 And we can really push items at the front and really hope that these users will go down that funnel 65 00:04:32,010 --> 00:04:33,410 instead of actually just searching. 66 00:04:33,420 --> 00:04:39,030 We want to make this experience much more enjoyable and more catered to them so we could really, like, 67 00:04:39,060 --> 00:04:41,150 take advantage of that. 68 00:04:41,190 --> 00:04:45,240 So start thinking about, you know, maybe there are images here. 69 00:04:46,700 --> 00:04:54,020 Of products that they could like or products based off of their interest, products that maybe they're 70 00:04:54,020 --> 00:04:56,640 in their wish list and are on sale. 71 00:04:56,870 --> 00:04:59,210 So we started thinking about these different types of scenarios. 72 00:05:00,110 --> 00:05:07,520 If I just fix that so that if they do come to the home screen, they could actually tap on one of these 73 00:05:07,520 --> 00:05:08,300 products here. 74 00:05:09,960 --> 00:05:10,920 And if they do. 75 00:05:12,540 --> 00:05:19,140 The next step in their flow would be to actually go for the item description page that we actually built 76 00:05:19,140 --> 00:05:19,620 over here. 77 00:05:20,650 --> 00:05:24,100 So we start thinking about all those different scenarios and look at that, we already kind of came 78 00:05:24,100 --> 00:05:27,520 up with a little user flow and an optional user flow. 79 00:05:28,120 --> 00:05:33,460 We should always think about more than one scenario when we're building something like this, because 80 00:05:33,460 --> 00:05:40,270 there always is more than one scenario and one route to get to a certain page or reach a certain goal. 81 00:05:40,810 --> 00:05:45,320 This is really going to help influence our page, like I mentioned before, and site maps. 82 00:05:46,000 --> 00:05:47,740 That's how you draw a screen for those.