1 00:00:00,000 --> 00:00:04,681 [MUSIC] 2 00:00:04,681 --> 00:00:07,285 Based on everything you know from your research, 3 00:00:07,285 --> 00:00:10,020 it's time to start ideating potential solutions. 4 00:00:11,270 --> 00:00:15,450 Using the problem statement worksheet and your user journey map as your guide, 5 00:00:15,450 --> 00:00:18,980 begin to brainstorm some ideas by hand sketching. 6 00:00:18,980 --> 00:00:21,570 This can be an individual exercise, or 7 00:00:21,570 --> 00:00:25,930 you can also facilitate group sketching sessions with your product team. 8 00:00:25,930 --> 00:00:30,180 All you need is some pen and paper, or any other medium you'd like to use. 9 00:00:30,180 --> 00:00:32,940 When you're exploring solutions, try to go broad and 10 00:00:32,940 --> 00:00:36,420 brainstorm a lot of solutions before narrowing them down. 11 00:00:36,420 --> 00:00:41,010 The goal of this exercise is to explore as many ideas as possible. 12 00:00:41,010 --> 00:00:44,240 Don't feel intimidated or shy about your drawing skills. 13 00:00:44,240 --> 00:00:46,810 These sketches aren't meant to be really refined. 14 00:00:46,810 --> 00:00:48,390 But they're meant to be quick drawings so 15 00:00:48,390 --> 00:00:51,810 that you can get as many ideas as you can on paper. 16 00:00:51,810 --> 00:00:56,640 Think about the UX flow, what screens you'll need, the flow of these screens and 17 00:00:56,640 --> 00:01:01,380 how users are interacting with the app as you're creating these wireframes. 18 00:01:01,380 --> 00:01:03,740 After going through a few rounds of sketching and 19 00:01:03,740 --> 00:01:07,800 putting your ideas on paper, try to narrow down some options. 20 00:01:07,800 --> 00:01:10,500 Some things that will help to narrow solution ideas 21 00:01:10,500 --> 00:01:13,850 is considering technical limitations or feasibility. 22 00:01:13,850 --> 00:01:17,150 This is where communicating with engineers is important. 23 00:01:17,150 --> 00:01:20,870 You can also use a dot voting method, where each person on your team 24 00:01:20,870 --> 00:01:24,940 votes on the ideas that they like most by putting dots or stickers on them. 25 00:01:26,560 --> 00:01:28,550 Once you've narrowed down your ideas, 26 00:01:28,550 --> 00:01:31,770 it's good to have two very different solution ideas, so 27 00:01:31,770 --> 00:01:36,650 that you can test both of them and find out which is more successful with users. 28 00:01:36,650 --> 00:01:38,490 In order to test these ideas, 29 00:01:38,490 --> 00:01:41,890 we'll need to create higher fidelity mockups of our sketches. 30 00:01:41,890 --> 00:01:44,470 We'll be using a software tool called Sketch. 31 00:01:44,470 --> 00:01:49,450 Which you can also use by downloading a free trial version from sketchapp.com. 32 00:01:49,450 --> 00:01:51,090 If you're not working on a Mac, 33 00:01:51,090 --> 00:01:56,350 you can also use tools like Figma which we'll be using in our prototype later on. 34 00:01:56,350 --> 00:02:00,010 Once you've downloaded Sketch, open a file called Craigslist, 35 00:02:00,010 --> 00:02:02,620 which is provided in the project files. 36 00:02:02,620 --> 00:02:07,360 If you're using Figma, you can simply import the Sketch file and it should work. 37 00:02:07,360 --> 00:02:11,600 In the Sketch file, there will be a page in the left side bar called Assets. 38 00:02:11,600 --> 00:02:12,750 These are some brand and 39 00:02:12,750 --> 00:02:16,570 UI elements provided to help you get started with your mockups. 40 00:02:16,570 --> 00:02:17,980 Under the Template page, 41 00:02:17,980 --> 00:02:21,180 you'll see a template that you can use to help you get started. 42 00:02:21,180 --> 00:02:22,790 When you're starting a new project, 43 00:02:22,790 --> 00:02:26,250 it's helpful to start by setting up a grid or a layout. 44 00:02:26,250 --> 00:02:30,540 Go to the View menu and under Canvas select Layout Settings. 45 00:02:30,540 --> 00:02:34,556 You can set the number of columns and rows, as well as the gutters, 46 00:02:34,556 --> 00:02:36,435 which is the space in between. 47 00:02:39,140 --> 00:02:42,369 Once you've set up your grid, you can turn the grid on or 48 00:02:42,369 --> 00:02:45,990 off at any time by pressing the Ctrl key and L. 49 00:02:45,990 --> 00:02:47,810 Now let's' take your hand sketches and 50 00:02:47,810 --> 00:02:51,060 begin creating a mockup, one screen at a time. 51 00:02:51,060 --> 00:02:54,300 Don't worry too much about getting everything right the first time, 52 00:02:54,300 --> 00:02:57,200 in terms of the UI elements and visual design. 53 00:02:57,200 --> 00:03:01,160 Sketch provides standard iOS elements under the Insert menu, 54 00:03:01,160 --> 00:03:03,350 which you can use instead of creating them yourself. 55 00:03:11,670 --> 00:03:15,830 Then start thinking about the UI elements for this screen, by referring back to your 56 00:03:15,830 --> 00:03:19,940 hand sketches and start creating those elements on the screen. 57 00:03:19,940 --> 00:03:24,120 You can use the UI elements provided in the file or feel free to create your own. 58 00:03:25,450 --> 00:03:28,670 Drag and drop icons, whether they're SVGs, PNGs, or 59 00:03:28,670 --> 00:03:31,170 Illustrator files, into your art board. 60 00:03:31,170 --> 00:03:35,370 You can also add text and use the inspector on the right to change size, 61 00:03:35,370 --> 00:03:38,040 color, justification, fonts and so on. 62 00:03:39,260 --> 00:03:43,290 Think about how to translate Craigslist brand to the app interface. 63 00:03:43,290 --> 00:03:48,620 What are some colors, shapes, imagery, or illustrations you can use? 64 00:03:48,620 --> 00:03:52,520 How can typography, space and layouts enhance the usability and 65 00:03:52,520 --> 00:03:53,960 the aesthetic appeal of the app? 66 00:03:55,160 --> 00:03:57,450 One of the things from talking to users, 67 00:03:57,450 --> 00:04:01,920 was that while Craigslist users want a more visually appealing UI, they also like 68 00:04:01,920 --> 00:04:06,800 the familiarity of the Craigslist brand, which hasn't changed for so many years. 69 00:04:06,800 --> 00:04:09,048 And there's a sense of charm that shouldn't be lost by 70 00:04:09,048 --> 00:04:10,130 over-designing the app. 71 00:04:12,016 --> 00:04:15,950 For this mockup, I tried to make the home screen more visually appealing while 72 00:04:15,950 --> 00:04:21,040 using Craigslist brand colors and making sure that it still feels like Craigslist. 73 00:04:21,040 --> 00:04:24,907 As I was thinking about how to increase the feeling of trust and safety for 74 00:04:24,907 --> 00:04:29,570 users, one idea was to bring the existing safety tips that are currently buried on 75 00:04:29,570 --> 00:04:33,620 the website, more to the forefront, while the user experiences the app. 76 00:04:33,620 --> 00:04:36,890 What if users saw these safety tips at the beginning of the app, 77 00:04:36,890 --> 00:04:39,030 before they start using the app? 78 00:04:39,030 --> 00:04:42,050 On the categories page, I wanted to see what it would look 79 00:04:42,050 --> 00:04:45,730 like if we added icons to represent all the categories. 80 00:04:45,730 --> 00:04:47,830 Does it enhance the browsing experience for 81 00:04:47,830 --> 00:04:53,090 users, does it bring more pleasure to users, or is it more confusing? 82 00:04:53,090 --> 00:04:55,790 Does it still feel simple and straight forward? 83 00:04:55,790 --> 00:04:59,760 And lastly, on the search results page, I was thinking of some ways to make it 84 00:04:59,760 --> 00:05:04,050 easy and less overwhelming for users to discover and browse the post. 85 00:05:04,050 --> 00:05:08,730 Perhaps by having larger images and more space between the thumbnails. 86 00:05:08,730 --> 00:05:11,560 Especially considering the size of the mobile screen. 87 00:05:11,560 --> 00:05:15,600 You don't wanna cramp any small thumbnails and make it feel overwhelming to users.