1 00:00:00,680 --> 00:00:02,120 Hello and welcome back. 2 00:00:02,420 --> 00:00:08,210 I'm going to be sketching some photos you can sell them on a tablet here because I just want to demonstrate 3 00:00:08,210 --> 00:00:12,260 how we can Sketchers flows without using paper like people like to use tablets. 4 00:00:12,260 --> 00:00:14,540 I'm using an application called Concepts. 5 00:00:14,780 --> 00:00:16,010 It's a free application. 6 00:00:16,280 --> 00:00:21,290 You can pay for some additional features, but I'm not paying right now and know I can just like draw 7 00:00:21,620 --> 00:00:26,370 I can export this as a jpeg and send it to myself. 8 00:00:26,420 --> 00:00:26,760 I need it. 9 00:00:26,780 --> 00:00:28,530 That's all we really need for sketching. 10 00:00:29,150 --> 00:00:33,290 So I totally recommend if you want to go the digital route, you can even do it in Sigma. 11 00:00:34,070 --> 00:00:34,730 And yeah. 12 00:00:34,760 --> 00:00:40,520 So I mean, you just grab your pen, you can even change the size of it. 13 00:00:41,540 --> 00:00:46,190 If you want to get a little more thick there, if you double tap with two fingers, we'll just go back. 14 00:00:46,220 --> 00:00:47,160 This is your eraser. 15 00:00:47,330 --> 00:00:51,130 So for the sake of this video, I'm going to keep it pretty. 16 00:00:51,590 --> 00:00:52,760 I think that's good. 17 00:00:53,300 --> 00:00:56,030 Also, you can select different types of pens. 18 00:00:57,040 --> 00:00:58,330 So what we'll do is. 19 00:01:00,200 --> 00:01:04,580 Right now, we're using the regular pen, there's the fixed with pen, that's something that I rather 20 00:01:04,580 --> 00:01:08,540 use just for actually drawing the wire frames. 21 00:01:09,910 --> 00:01:11,370 So let's bring that down. 22 00:01:16,570 --> 00:01:19,390 I think that's a little too thick. 23 00:01:20,610 --> 00:01:21,480 OK, perfect. 24 00:01:22,080 --> 00:01:23,930 Now we're ready to go here. 25 00:01:24,030 --> 00:01:29,250 We're going to be focusing on a user's experience through certain journeys, both big and small, before 26 00:01:29,250 --> 00:01:33,660 we even jump into those types of journeys, just want to give you a little understanding of what I'm 27 00:01:33,780 --> 00:01:36,640 asking myself every time I approach something like this. 28 00:01:37,290 --> 00:01:40,240 Step one, I want to understand what I need to draw. 29 00:01:40,830 --> 00:01:44,100 So I've got to figure out exactly what I'm thinking of sketching. 30 00:01:44,490 --> 00:01:48,240 Do I want to sketch a large journey or am I thinking about a small interaction? 31 00:01:48,720 --> 00:01:51,320 Step two is defining some sort of starting point. 32 00:01:51,600 --> 00:01:56,400 You can start at the beginning of a journey or in the middle or at the end you choose what you think 33 00:01:56,400 --> 00:01:56,940 is best. 34 00:01:57,360 --> 00:02:01,540 Typically, I like to start thinking about the most difficult or riskiest parts of the product. 35 00:02:01,560 --> 00:02:06,420 First, some people actually like to start at the end and work their way backwards to figure out how 36 00:02:06,420 --> 00:02:07,680 users get to a certain point. 37 00:02:08,460 --> 00:02:10,580 Like I said, it's whatever works for you. 38 00:02:11,190 --> 00:02:13,800 Step three, decide your next steps. 39 00:02:13,800 --> 00:02:18,090 After you define that first starting point within your flow, you need to know where to go. 40 00:02:18,240 --> 00:02:19,260 Well, that is up to you. 41 00:02:19,260 --> 00:02:21,720 And you need to ask yourself some important questions. 42 00:02:22,020 --> 00:02:24,290 Which way this step lead our users. 43 00:02:24,840 --> 00:02:26,330 Where do you want them to go? 44 00:02:26,910 --> 00:02:29,430 What does the user need to do to get there? 45 00:02:30,090 --> 00:02:36,000 In the end, when I'm thinking about alternate scenarios or alternate flows, them trying to sketch, 46 00:02:36,510 --> 00:02:42,510 I think about all the different questions in terms of alternative ways that a person can go through 47 00:02:42,510 --> 00:02:43,380 a certain route. 48 00:02:43,860 --> 00:02:45,500 So what options do they have? 49 00:02:45,720 --> 00:02:48,450 What happens if the user closes the app at this point? 50 00:02:48,810 --> 00:02:49,960 Where will they resume? 51 00:02:50,190 --> 00:02:55,400 So these are the types of questions I'm always asking myself every time I approach a sketch. 52 00:02:55,650 --> 00:03:00,180 So let's start with our very first sketch. 53 00:03:00,810 --> 00:03:05,580 We're going to talk about mapping overall flow, think about a user's journey through the product. 54 00:03:06,780 --> 00:03:13,470 That's like from point A all the way to point B. We want to understand when they come in and when they 55 00:03:13,470 --> 00:03:18,440 leave and what that experience is like, it's like creating some sort of customer journey. 56 00:03:18,450 --> 00:03:23,820 And here we can really outline different types of pain points when they're feeling happy through this 57 00:03:23,820 --> 00:03:30,210 journey, when they're feeling sad and, you know, pick out different types of opportunities where 58 00:03:30,210 --> 00:03:36,000 we can really improve that experience for them and also understand where exactly we can branch out and 59 00:03:36,000 --> 00:03:37,410 focus on different types of flows. 60 00:03:37,950 --> 00:03:40,000 Let's start sketching a general journey. 61 00:03:40,140 --> 00:03:41,890 It doesn't need to be neat. 62 00:03:42,480 --> 00:03:45,870 It needs to be just a little you need to be able to understand it. 63 00:03:46,340 --> 00:03:48,410 We're going to start sketching a flow here. 64 00:03:49,050 --> 00:03:53,140 The first one I'm thinking about is mapping the overall journey for our client habitual. 65 00:03:53,610 --> 00:03:56,790 So if I think about step one, I'm just going to put one. 66 00:03:56,790 --> 00:03:57,870 I'm going to draw a frame. 67 00:03:59,150 --> 00:04:03,650 And we're not really focusing on UI elements here or anything like that, I just want to think about 68 00:04:03,650 --> 00:04:12,050 what the user is possibly seeing, what screens they may be they possibly are going to and what they're 69 00:04:12,050 --> 00:04:12,580 expecting. 70 00:04:12,590 --> 00:04:16,550 So when they come to our application, you know, they may see a welcome screen. 71 00:04:18,720 --> 00:04:23,340 And like some sort of button, maybe it's an onboarding process, we can figure that out later, but 72 00:04:23,340 --> 00:04:25,230 now, like, we've kind of established that. 73 00:04:27,040 --> 00:04:27,880 Step two. 74 00:04:29,530 --> 00:04:33,340 Let's create another frame, you know, maybe the user when they come here, they're thinking about 75 00:04:33,340 --> 00:04:36,220 searching right away, they want to find a product. 76 00:04:36,220 --> 00:04:38,020 That's why they would use something like a visual. 77 00:04:38,050 --> 00:04:43,500 So what I'm going to do is I'm going to just draw maybe homescreen that looks like a cube. 78 00:04:44,200 --> 00:04:45,850 This just looks like a cube. 79 00:04:45,850 --> 00:04:46,360 That's fine. 80 00:04:47,050 --> 00:04:49,840 We're going to just draw, like, some boxes. 81 00:04:52,820 --> 00:04:59,150 OK, so they come to this home screen and what they're going to do is they're going to search for a 82 00:04:59,150 --> 00:04:59,690 product. 83 00:05:01,310 --> 00:05:07,730 And the next step is that they're going to actually find that product, so they find their product and 84 00:05:07,730 --> 00:05:09,980 they go and research those details. 85 00:05:12,840 --> 00:05:19,560 And from here, after they've done that, they're interested in actually purchasing it, but right now 86 00:05:19,560 --> 00:05:21,580 you'll notice that this is a very happy flow. 87 00:05:21,600 --> 00:05:26,870 This is like what we really want our users to do every single time they come into our product. 88 00:05:27,790 --> 00:05:34,420 And that's not always the case, so I'll probably see like a card with a little X, maybe there's a 89 00:05:34,420 --> 00:05:41,140 check up, but and there are details of whatever they're purchasing, whatever product they want to 90 00:05:41,140 --> 00:05:43,510 buy and move that over. 91 00:05:44,940 --> 00:05:49,740 It came a little messy, but that's OK, I mean, we're getting a general sense of what this journey 92 00:05:49,740 --> 00:05:56,400 is looking like and they get some sort of confirmation that the package has shipped, that you bought 93 00:05:56,400 --> 00:05:57,630 it and it's right out the door. 94 00:05:58,080 --> 00:06:00,860 And then I don't think the journey really ends there. 95 00:06:02,020 --> 00:06:08,590 We need to think about what happens after it's shipped in this scenario, it's delivered and the user 96 00:06:08,590 --> 00:06:09,130 is happy. 97 00:06:09,670 --> 00:06:11,800 So this is what our whole flow starts to look like. 98 00:06:12,280 --> 00:06:14,730 User comes in and is welcomed by us. 99 00:06:15,190 --> 00:06:20,980 The search for a product, they find that product and review it, add it to their car and check out 100 00:06:21,730 --> 00:06:25,950 the package chips and it is delivered to them and everyone is happy. 101 00:06:26,590 --> 00:06:28,540 Now, that always doesn't happen. 102 00:06:28,540 --> 00:06:33,730 And this is where I'm asking myself, well, you know, we asked herself the question of what the goal 103 00:06:33,730 --> 00:06:33,940 was. 104 00:06:33,940 --> 00:06:35,540 The goal was to sketch the whole journey. 105 00:06:36,010 --> 00:06:40,630 We thought about what steps come next, but we didn't really think of alternate scenarios. 106 00:06:40,810 --> 00:06:45,430 So what happens if they can't find their product is a scenario there. 107 00:06:46,210 --> 00:06:51,100 If they can't find their product, maybe they have to go through some category searches. 108 00:06:51,430 --> 00:06:53,710 So they start searching based off of categories. 109 00:06:54,710 --> 00:06:57,170 Or they start maybe reading reviews. 110 00:06:58,310 --> 00:07:01,550 There's different things that we need to always take into account. 111 00:07:02,820 --> 00:07:06,690 Not very rarely, and this is an assumption, and we always try to validate our assumption, but my 112 00:07:06,690 --> 00:07:10,800 assumption is that very rarely that everyone goes to the same exact flow. 113 00:07:11,580 --> 00:07:12,870 Maybe they want to read reviews. 114 00:07:13,060 --> 00:07:19,200 So we're starting to think about all the different types of scenarios that a user may experience in 115 00:07:19,200 --> 00:07:19,770 their journey. 116 00:07:20,940 --> 00:07:25,980 Maybe over here they're happy so we can give them a good onboarding. 117 00:07:26,950 --> 00:07:31,570 Experience and over here, when they're searching, you know, maybe they're a little confused and maybe 118 00:07:31,570 --> 00:07:36,280 this is a great way to implement a really easy search experience that makes them happy. 119 00:07:39,000 --> 00:07:39,350 Oops. 120 00:07:40,140 --> 00:07:44,910 So maybe we can really capitalize on that opportunity when you really need to think about who our users 121 00:07:44,910 --> 00:07:48,780 are and what they really want to experience when they're moving through our app. 122 00:07:49,620 --> 00:07:52,880 So that's how you map an overall flow using sketching. 123 00:07:53,700 --> 00:07:54,750 And if you wanted to. 124 00:07:54,780 --> 00:07:59,460 Like I said before, you can just export this, bring it into Fatemah, clean it up a bit and start 125 00:07:59,460 --> 00:08:01,050 thinking about it there if you want to. 126 00:08:01,890 --> 00:08:04,170 But that's how you map an overall flow.