1 00:00:00,330 --> 00:00:01,430 Everyone, welcome back. 2 00:00:01,710 --> 00:00:06,960 So we're going to be talking about wireframe, so we're really going to get into designing very soon, 3 00:00:06,960 --> 00:00:11,430 but you know, we're done or Simchat, we're done. 4 00:00:11,430 --> 00:00:16,080 User flows, you know, we've done a lot of sketching and, you know, we have a good understanding 5 00:00:16,080 --> 00:00:19,020 of the content and the structure that is going into our product. 6 00:00:19,680 --> 00:00:22,350 So now I think wireframe is pretty much the next step. 7 00:00:22,680 --> 00:00:26,580 But the big question is, well, what is a wireframe? 8 00:00:27,360 --> 00:00:33,450 Now, you may have seen images like this when we were sketching and wireframe is a low fidelity layout 9 00:00:33,450 --> 00:00:35,940 that serves three simple purposes. 10 00:00:36,210 --> 00:00:41,190 It presents the information that will be displayed on the page in a little more detail than our sketches 11 00:00:41,190 --> 00:00:42,180 and our user flows. 12 00:00:42,820 --> 00:00:49,620 It gives an outline of structure and layout of the page, and it conveys the overall direction and description 13 00:00:49,620 --> 00:00:51,000 of your user interface. 14 00:00:51,330 --> 00:00:56,820 It's basically, as you can see here, it's just like a blueprint of a building. 15 00:00:56,820 --> 00:01:01,350 But instead of a building, it describes the details clearly and specifically while giving everyone 16 00:01:01,350 --> 00:01:03,330 involved a good overview of the product. 17 00:01:04,230 --> 00:01:09,450 It's kind of like that middle ground between your sketches and higher fidelity designs and prototypes. 18 00:01:09,840 --> 00:01:16,020 They help you really plan layout interaction patterns for your users without worrying about distracting 19 00:01:16,020 --> 00:01:21,330 details like colors or copy or, you know, typography and all those things can really bog down your 20 00:01:21,330 --> 00:01:22,290 design process. 21 00:01:23,550 --> 00:01:29,400 Another thing to really know is that they are really heavily influenced from your prior work. 22 00:01:29,410 --> 00:01:32,700 So if you've done story mapping, you have user stories. 23 00:01:33,060 --> 00:01:39,150 If you've done things like user flows or site maps, I mean, all these different artifacts should really 24 00:01:39,150 --> 00:01:41,070 influence the way you create your wire frames. 25 00:01:41,340 --> 00:01:46,020 So just keep that in mind that you shouldn't just be like jumping in and creating a whole bunch of wire 26 00:01:46,020 --> 00:01:51,480 frames and not necessarily really understanding the type of content that needs to be there in the requirements 27 00:01:51,480 --> 00:01:52,020 that need to be there. 28 00:01:52,030 --> 00:01:55,170 So really consult all those artifacts that you have. 29 00:01:55,170 --> 00:01:58,950 And if you don't have them, you know, talk to the right people that can get you that information, 30 00:01:58,950 --> 00:02:03,660 whether that be product managers, client stakeholders, internal stakeholders, you know, use your 31 00:02:03,660 --> 00:02:06,330 voice if you need those requirements to even start. 32 00:02:06,840 --> 00:02:08,670 So why do we use them? 33 00:02:09,540 --> 00:02:10,380 Two big reasons. 34 00:02:11,130 --> 00:02:15,180 I like using them because they really helped to test your concepts in your structure. 35 00:02:15,180 --> 00:02:19,140 So they really help you to understand how users will navigate your product. 36 00:02:19,440 --> 00:02:24,210 Sometimes you can use your wire frames to highlight certain areas that you think need to have prominence 37 00:02:24,210 --> 00:02:29,130 on a page to test if that piece of content is actually working and if the user flow makes sense. 38 00:02:29,370 --> 00:02:33,600 So this is one of the big reasons I use that so that it could be like user flows again. 39 00:02:33,600 --> 00:02:34,800 But in much more detail. 40 00:02:35,010 --> 00:02:39,260 Understanding the different types of interactions and putting it into a wireframe makes it a little 41 00:02:39,270 --> 00:02:42,660 more easier to test with users to get, I guess, better results. 42 00:02:43,350 --> 00:02:49,830 The next best thing, actually, I think this is the number one thing actually you need to use them 43 00:02:49,830 --> 00:02:50,430 to learn. 44 00:02:50,790 --> 00:02:53,760 They are fast, cheap and impermanent. 45 00:02:53,910 --> 00:02:55,410 Don't get attached to wire frames. 46 00:02:55,620 --> 00:02:56,670 They're meant to change. 47 00:02:56,670 --> 00:03:02,730 As you gather more information through research and feedback from your clients and from your users. 48 00:03:03,330 --> 00:03:04,740 They're a great place to fail. 49 00:03:04,740 --> 00:03:09,570 And I don't mean that negatively on a project, you want to feel as quickly as possible, and that means 50 00:03:09,570 --> 00:03:15,270 you want to test your assumptions as quick as possible before it gets to high fidelity designs or even 51 00:03:15,270 --> 00:03:15,840 development. 52 00:03:16,230 --> 00:03:19,140 You know, they serve as a common language for your team as well. 53 00:03:19,140 --> 00:03:24,030 They're complex enough to inform everyone, but simple enough to not get bogged down by too much detail. 54 00:03:24,330 --> 00:03:28,860 Now, the little kind of graph I have here is the build measure, learn graph. 55 00:03:28,860 --> 00:03:34,110 And if anyone's read lean startup, I think that's amazing because it's an amazing book. 56 00:03:34,380 --> 00:03:36,870 But if you haven't, you should definitely read Lean Startup. 57 00:03:37,200 --> 00:03:40,650 It talks a lot about building, measuring and learning. 58 00:03:41,220 --> 00:03:44,880 So what that essentially means as you build and that could be a wireframe. 59 00:03:44,880 --> 00:03:45,750 That could be a sketch. 60 00:03:46,110 --> 00:03:47,640 You measure it against something. 61 00:03:47,640 --> 00:03:49,180 What metric you're testing against. 62 00:03:49,180 --> 00:03:51,750 It could be like, I want to know if this interaction works. 63 00:03:51,750 --> 00:03:54,780 I want to know if users actually are interested in my product. 64 00:03:55,170 --> 00:03:57,960 You learn from those results and then you build again. 65 00:03:58,530 --> 00:04:03,090 So wireframe is really help you to kind of implement that build measure, learn cycle. 66 00:04:03,390 --> 00:04:09,180 So I want you always to think about that whenever you're kind of testing with users or just talking 67 00:04:09,180 --> 00:04:11,130 to other clients or stakeholders. 68 00:04:11,610 --> 00:04:14,940 Keep that in the back of your mind, because the design process isn't linear. 69 00:04:14,940 --> 00:04:16,050 It's very iterative. 70 00:04:16,770 --> 00:04:18,900 So how can we use them? 71 00:04:19,080 --> 00:04:21,240 Very useful for three big reasons right now. 72 00:04:21,840 --> 00:04:26,790 You know, they help your team estimate the type of work they're going to complete clarity and common 73 00:04:26,790 --> 00:04:28,800 understanding across the team. 74 00:04:29,340 --> 00:04:31,110 They help your team understand what is going to be built. 75 00:04:31,260 --> 00:04:32,430 I mentioned this a little bit earlier. 76 00:04:32,730 --> 00:04:36,000 It gives them an opportunity to chime in as well if you're presenting to them. 77 00:04:36,000 --> 00:04:41,100 And you should always be presenting to them, even if it's just like ad hoc, you know, talk to your 78 00:04:41,100 --> 00:04:42,150 peer really quickly. 79 00:04:42,540 --> 00:04:47,640 Specs are kind of dated and wire frames can be really much more collaborative than that. 80 00:04:47,940 --> 00:04:50,340 So get your team involved as much as possible. 81 00:04:51,150 --> 00:04:52,860 The next thing is user testing. 82 00:04:53,430 --> 00:04:55,020 We use them a lot for user testing. 83 00:04:55,470 --> 00:04:56,850 The sooner you test, the better. 84 00:04:56,850 --> 00:04:57,960 And that's the big thing. 85 00:04:57,960 --> 00:04:59,850 You know, like I said before, fail fast. 86 00:05:00,150 --> 00:05:05,700 So you can get quick feedback without necessarily developing complex prototypes with all those different 87 00:05:05,700 --> 00:05:11,860 types of visual things like typography, color and all the different types of details like that. 88 00:05:12,240 --> 00:05:16,470 So testing with users really uncover like the different types of pain points and opportunities. 89 00:05:16,500 --> 00:05:18,390 So this is a little customer journey map. 90 00:05:18,870 --> 00:05:22,650 You know, if you've created one at this point, that's great as well, because it'll really help you 91 00:05:22,650 --> 00:05:26,750 understand how the user moves throughout your product and other products. 92 00:05:27,240 --> 00:05:33,480 So really document how you user can move through your wire frames, understand like what their pain 93 00:05:33,480 --> 00:05:34,100 points are. 94 00:05:34,140 --> 00:05:39,330 And usually they're you'll understand that there are certain opportunities that you can really benefit 95 00:05:39,330 --> 00:05:39,630 from. 96 00:05:40,900 --> 00:05:43,880 And I also like to I think this is kind of inevitable. 97 00:05:43,940 --> 00:05:49,990 I really like to use these to, you know, demo to clients to go away to get really quick feedback instead 98 00:05:49,990 --> 00:05:54,070 of, like, going all the way and sprinting towards, like, that beautiful design or that beautiful, 99 00:05:54,070 --> 00:05:55,120 complex prototype. 100 00:05:55,480 --> 00:06:00,340 I mean, you got to remind them they is into the final design because, you know, you may have a client 101 00:06:00,340 --> 00:06:06,850 that is just like this has no color or this has no typographic elements, like what is this? 102 00:06:06,910 --> 00:06:09,930 It doesn't look good and it's not necessarily meant to look good. 103 00:06:09,940 --> 00:06:14,380 So you need to explain that to them just so they can give you some quick feedback on certain things 104 00:06:14,380 --> 00:06:19,450 like interactions and, you know, flows and just placement and layout and hierarchy. 105 00:06:20,170 --> 00:06:25,180 Another thing about getting quick feedback is that, you know, making changes to high fidelity designs 106 00:06:25,180 --> 00:06:27,310 is like really time intensive. 107 00:06:27,550 --> 00:06:32,020 And you don't want to be making bigger changes when you're nearly done the product. 108 00:06:32,260 --> 00:06:36,430 You want to be making those changes as you go along and the earlier the better. 109 00:06:37,090 --> 00:06:39,240 So that's how we can use wire frames. 110 00:06:39,250 --> 00:06:41,890 We can definitely use them to like test. 111 00:06:41,890 --> 00:06:47,950 And I think that is the biggest thing is testing early and testing often and not worrying about the 112 00:06:47,950 --> 00:06:48,490 details. 113 00:06:48,910 --> 00:06:50,520 So I'll teach you next how to create them.