Solution

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