Demonstration of Wireframing on Paper11:25 with Hope Armstrong
Now that you know the basic components of wireframes, we'll show you how to apply that knowledge to a real world project.
- Persona: The user profile of a theoretical user who represents a larger group of potential users. These user profiles are helpful in putting a name and a face with decisions you make about your users.
- Empathy map: A tool used to consider the user’s perception of what happens as they use the product. This helps shape our insights into our users and lets us focus on what their thoughts and feelings may be.
- User flow: A document that outlines the progression of ideal user behavior through key moments in their interaction with a product
- Crazy Eights: A fast brainstorming exercise that challenges you to create eight different ideas, sometimes within a deadline of 8 minutes.
Now that you know the basic components of wireframes, 0:00 I'll show you how to apply that knowledge to real-world project. 0:03 At this point, you should already have personas, empathy maps, and the user flow. 0:07 I've included all of these in the project files. 0:12 It's a good idea to have this research done before you start to wireframe. 0:16 If you want more information about creating these pieces, 0:20 check the teacher's notes. 0:23 All used research artifacts to inform the wireframes we built in this course. 0:25 So please download those from the product files to follow along. 0:29 You don't need to understand how these documents were created right now, 0:33 but you will want to refer to the documents. 0:38 First, consult the user research. 0:41 It will guide you to discover the user's goals and emotional states. 0:43 A persona is a user profile of a theoretical user, 0:48 who represents a larger group of potential users. 0:52 Persona's help place a name and a face to decisions you make about your users. 0:56 Here's businessman Bryan, a sales manager who travels frequently for his work. 1:02 He's mainly concerned with getting to his destinations on time. 1:06 So he isn't late for important meetings. 1:10 The other persona we have research notes on is Social Sarah. 1:14 Here's her persona, she uses the app for very different reasons. 1:18 She's a full-time college student who needs safe transportation. 1:23 She primarily uses the app to go to late night parties during the weekend. 1:27 She travels with her friends, so 1:32 being able to easily split the fare is important. 1:34 The next set of user research is empathy maps. 1:38 They're used to consider the users perception 1:42 of what happens is to use the product. 1:44 This help shape our insights into our users and 1:47 let's us focus on other thoughts and feelings may be. 1:49 Let's look at Bryan and Sarah's empathy maps. 1:53 As you can see, there's a lot to learn about them. 1:57 So we'll be referring to these documents as we go along. 2:00 The final piece of user research we have is the user flow. 2:05 It's a document that outlines the progression of ideal user behavior 2:09 through key moments and their interaction with the product. 2:13 These two personas have slightly different objectives. 2:16 Bryan wants to book a ride in advance for just himself. 2:20 And Sarah wants to book a ride immediately to share with her friends. 2:24 Overall though, they have a lot in common. 2:29 They both want to easily get to their destinations. 2:31 So, we'll address both the general and specific user needs as we wireframe. 2:34 In addition to these personas, you may think of additional ones. 2:40 After all, lots of different people use ridesharing apps. 2:44 The point is many types of users will be using the app so 2:48 you'll want to identify and anticipate their needs. 2:52 This sets the app up to have a useful and frictionless user experience. 2:55 I'll start by drawing a wireframe for the homepage, this is a key screen in the app. 3:00 At later stages, I'll create wireframes for other screens. 3:06 Now, let's start sketching the homepage. 3:10 For these wireframes, we won't concern ourselves with whether it's an Android or 3:13 iOS app. 3:18 We'll just consider it a mobile app. 3:19 For starters, let's figure out what content we want on the screen. 3:22 I'll draw the individual components and then we'll put it all together later. 3:26 First, let's imagine the default experience for the vast majority of users. 3:31 Most users want to get a ride right away so perhaps, 3:37 we could show a map that shows available cars nearby 3:40 Great. 3:59 Now I want to know where the user wants to go, so I'll add in a destination input 4:01 Now the map can include the expected pick up time and the estimated time of arrival. 4:19 Transparency of information regarding timing 4:25 is key to making this a trustworthy experience. 4:28 Now, let's get in to the specifics of what would be useful for the personas. 4:32 What might Bryan want to see? 4:37 He's a busy guy that's trying to get to his important meetings on time. 4:39 Plus, he gets anxious about potentially missing his flight, so 4:43 he prefers to get to the airport two hours before the takeoff time. 4:48 Let's give him and option to schedule his rides in advance. 4:52 That way, he can rest assured his rides will arrive on time and he won't have 4:55 to nervously order a ride right as he's scrambling to get out the door. 5:00 He already knows his set schedule, so he wants to organize his trip in advance. 5:05 That way, all he has to do is wait for the notification that his ride is approaching, 5:10 and then off he goes. 5:15 Since the default experience assumes the user wants a ride right away, 5:17 let's add a button to schedule a ride later. 5:21 It'll take a few more screens to complete this flow. 5:25 But let's explore other features on the screen for now. 5:27 What other elements would be helpful to include? 5:32 Users will need an inout field to add their destination. 5:35 Perhaps, it would be helpful to show recently visited places to choose from for 5:38 quick access to common destinations. 5:43 For example, Bryan is from Denver, Colorado. 5:46 So he frequently travels to and from the Denver Internal Airport. 5:50 So let's make sure it's easy for him to select that 5:54 destination without typing it in every time. 6:00 We also want to be mindful of user's budgets. 6:04 Different customers will have different amounts of money that they'd like to pay 6:07 for different levels of service. 6:11 It's industry standard for 6:14 ridesharing apps to offer a selection of cars to choose from. 6:15 For someone like Bryan, who is concerned with the cleanliness of the car, 6:18 he may prefer to choose a car upgrade to impress a client. 6:22 So let's show the car options, too. 6:26 Maybe we want to include a toggle, so Bryan can easily sort through the choices. 6:29 For budget conscious users like social Sarah, 6:34 it would be helpful to include cost estimates before confirming the ride. 6:36 Essentially likes to split the fare with her friends, let's make it easy for 6:41 her to estimate that too. 6:45 Also, since she's in the group, 6:47 let's also show the number of seats available in the cars. 6:48 What other secondary types of content would be helpful for the user? 6:56 Plus include a navigation to other areas in the app, such as account settings or 7:00 payment information. 7:04 Businessman Bryan uses a company card so he may want to add his work credit 7:07 card upfront, so it's not accidentally charge as personal credit card. 7:12 Providing a clear link to that screen helps him find what he needs. 7:18 We could put in a menu icon in the top left of the screen. 7:22 This is often referred to as a hamburger icon. 7:26 So this sort of looks like a hamburger. 7:29 When clicked, it can slide up in a panel with the navigation links. 7:31 One of those links would be the payment screen, 7:36 where Bryan could enter his credit card. 7:38 One usability issue with this types of menus is that the navigation gets buried 7:41 away, and it's difficult to discover. 7:45 To solve this, we could go with the UI pattern originally seen in iOS apps, 7:48 a tab bar. 7:53 Due to their popularity, we see them in android apps too, 7:55 where they are commonly referred to as bottom navigation bars. 7:57 Their location and 8:02 persistent visibility across screens makes navigation easy for users. 8:03 Also consider, what might internal stakeholders want to see? 8:09 Perhaps, the marketing team wants to feature our promo. 8:13 How might we make that promotion available to the user? 8:16 Let's draw a banner. 8:20 Now, let's try a different take on it, and draw an icon button. 8:27 Unsure of what the icon should be? 8:31 Feel free to draw an excess of place holder otherwise, 8:34 look into the teacher's note for an icon inspiration website. 8:37 To show depth, darken the outline of the button. 8:47 Now that you have an idea of what content you like on the homepage, you can start 8:59 putting those elements together to form a wireframe of the full screen. 9:04 Get a piece of white paper and a pen, you could start drawing a single wireframe 9:08 on a whole sheet of paper, but I want to show you a technique called Crazy 8's. 9:13 In this exercise, you'll create eight small wireframes of a screen. 9:18 It's a fun exercise that forces you to think of several different ways 9:22 to design a screen. 9:26 The small scale of each wireframe reduces the pressure you might feel when creating 9:29 something larger and more detailed. 9:33 Start by folding the paper in half lengthwise. 9:36 Then fold it in half the other way. 9:46 Then fold it in half again. 10:01 Open the paper up, and you'll see there are now eight rectangles. 10:10 In each rectangle, I'll be drawing a single wireframe. 10:15 In each one will be for the same screen. 10:18 Here is a page I did earlier. 10:21 These quick sketches are helpful because you may start out with one idea, 10:26 do the exercise and realize there are many alternative ways to lay out the page. 10:30 Wireframe number five may have been your best idea, but you would have never 10:35 discovered it without forcing yourself to iterate through multiple ideas. 10:39 Give yourself permission to be messy with these wireframes. 10:44 Drawing neatly is not the goal. 10:48 You want to be drawing neatly enough so you can understand what's going on, but 10:50 these won't be shown to stakeholders. 10:54 So they don't need to be presentation worthy. 10:56 There's so many different possibilities. 11:00 Keep sketching and iterating. 11:02 You never know when your best idea may appear. 11:04 So keep drawing different variations. 11:07 I suggest taking eight minutes to draw your own set of crazy 8 wireframes. 11:10 Time boxing it to only one minute to drawing 11:15 allows you to try out ideas with minimal self editing. 11:18 Eight variations is a decent number of designs to work with. 11:22
You need to sign up for Treehouse in order to download course files.Sign up