Making a Paper Prototype for a Mobile App

1. Introduction: Hello. Welcome to my class in paper prototyping. My name is Maddie Rouna and I'm a freelance UX Design Consultant in Seattle, Washington. I found paper prototyping to be a really important step in the design process for me and I'm really excited to share my process to all of you. Sometimes it can feel a little bit silly to test your app idea by having people tap on a piece of paper. But paper prototyping is a lot quicker than mocking the fisher science and sketch or Figma. It can help you catch problems right from the start, before you've invested too much time working on your design. In this class we'll go over how to make a paper prototype step-by-step. Be sure to post your work in the gallery as we go so that you can get useful feedback from your peers. Early feedback can help you avoid making costly changes later on. I'm really excited to see what you'll make. 2. Getting Started: When should you make a paper prototype? There's no one firm design process that must be followed every time. But I like to use paper prototypes after I've come up with the idea, figured out the user flow, and sketched out my initial screen ideas. Paper prototyping here lets you get a quick pulse check on if the idea makes sense, and it can help you catch fundamental problems before you dive into wireframing and sketcher Adobe. Let's take a look at the sketches I made for our project. These are the rough sketches I made for this class. This just an app I really quickly made up. Again, this class is not about what makes a good app and how to design an app. We're not really thinking about that. We're just going to use these to base our prototypes on. This app is for basically reviewing and recommending shows and movies on different streaming services. It's pretty simple. It just has three tabs. The first one is browse, so it just shows different categories, things that are top-rated. You can filter and search whatever. These are all image tiles for the different shows similar to the Netflix app. If you tap on one, it would bring you to the details page where you can see things like name, general ratings. You could write your own review. If it's reviewed by any of the friends in your network, you can see that here. You can scroll through and read them and if you are interested, then you can save it for later. Browsing is just for browsing. This for you to have. The second one is things that you've saved for yourself, things that are recommended for you and things that you've recently watched or viewed. Then the social tab. That is just things that your friends have watched recently. You can see things that are popular among your social network, things that have been reviewed by people in your network. Then you can also filter abuse by specific friends. Say your best friend was watching a show that she was really, really into, but you didn't remember what it was. You could just find their name in here and tap on that and see different reviews that that person is written. Yeah, it's a pretty straightforward, just three tabs. Again, pretty similar to the Netflix app, whatever. Yeah, we will base our paper prototype on these initial rough sketches. 3. Set Up: This is what my finished prototype looks like. Yours might look like this, or it might look a little bit different. This class is a guide so if you have your own ideas along the way, i really encourage you to be creative and try them out. You can find images of my finished prototype in the class resources section, along with the rough sketches that you are going to need as you start making your paper prototype, you'll want to use these as a reference. You are also going to need a couple of materials of your own for making your paper prototype and I'll go through and show you what those are. You want to have paper, regular printer paper works great or you can use like graph paper. I personally like to use a dark graph. For pencils, I really like black wings because while they don't roll, but they also have replaceable erasers which is nice because I feel like I always use a thin eraser before the pencil is actually out. You also want to have a good pen. My favorite is the Pilot v-5, just because I feel like it writes really well it doesn't leave a smudge. Since we'll be adding color to the prototypes, you'll also need markers of colored pencils. Whatever you want to use is totally your preference either what I tend to use. You might want to have a sharpie on hand because that can be really handy also and then using a light gray marker to add background color can be a nice touch sometimes if you're trying to show depth, but totally not necessary. The last thing you'll want to have is definitely a pair of scissors and some tape because you'll definitely be cutting your prototypes out and if you want to make edit, you sometimes end up taping things on top. I want to make sure to have those as well and then once you've gathered all your materials, you'll be ready to start making a paper prototype. 4. Device Templates: When you make a paper prototype for an app, it's not terribly realistic, obviously you've drown it. I pretty much always do them within a device template just to give it a little bit more realistic look, which is silly because it's still obviously paper, but I feel like it just helps put the participant in a little bit more than the mindset of using an app rather than looking at a drawing. You can find device templates online that you can print out or you can make your own. If you're not going to print off your device templates, which is totally fine, then you're going to make your own, which is how I typically do it. I happen to have one of these iPhone stencils, which is really nice, but if you don't have one, that's totally fine, you can just trace your phone, but these are available on Amazon, I think I paid $9 for this, so they're pretty nice to have, but again, if you don't have it, you can go ahead and your set your phone down on the paper and trace around it, which is what I did before I got this, and it works just fine. Whether you're using your phone or the stencil, you just lay it right down and trace around it. One of the reasons I really like this stencil is that it has like the little notch and the buttons, so the scale on it looks really good, it looks pretty much like an iPhone, it has these little dots where you can indicate the edges of the screen, you can actually trace them through the stencil, but you can mark the corners, and then there's even a second set here for the top little bar where it has your battery and your cell coverage and the time and whatever else, so you can mark all of those, and then we're just going to connect the dots and get them all lined up. There you go. There's an iPhone device template. If you used an actual phone instead of one of these stencils, then you would just want to estimate this screen size inside, again, totally fine, and since we have four screens that we're going to be making, you'll want to make at least three more of these. I usually like to make just a couple extra just in case I make mistake, which totally happens. Go ahead and make a few more of these and then we can get started on drawing screens. 5. Draw Screens: Now that we've finished our device templates, we're going to go ahead and start drawing the screens, paying extra close attention to the interactive bits like buttons, tappable icons or slide out menus. Our screens are going to be a little bit more detailed than the really rough sketches. Actual texts will be written now rather than place folders like Lorem Ipsum, and you can gauge how specific to get. You basically just want your app to make sense as a standalone without you needing to explain what things are to the person you're testing with. We're also, instead of using these wireframe boxes, these don't really say anything about the app, so we're going to write in show or movie titles instead, to make clear that these are the tiles that you'd see on an app like Hulu or Netflix. All right. Let's go ahead and draw some screens. We're just going to start out with the browse tabs since that's the first one. I'm just going to go ahead and start with the tab bar along the bottom. We can estimate the sizes to split for three. That's close enough. Let's not worry about icons for now. We can add that in later, so we're just going to write in browse, for you and social. Add in the quick little battery there and cell coverage. Then next I'm going to put in a search bar, but I'm going to add a little button on the end to actually do the search. Let me just quickly do the Filter button. All right. Then we can move on to categories. We have top-rated, we have new, and we have dramas. Then we can go in and draw some of our boxes. That's another thing we're probably going to do differently is, we're going to write in actual titles of TV shows or movies. We won't have the cover image that Netflix and Hulu actually have, we won't go to that level of detail, but we do want to show that these are actually TV shows and movies. Top-rated, let's maybe say Stranger Things. How about Star Trek Next Generation? We'll do the same for new. Here let's write in, how about Queer Eye and Arrested Development? Because they just made a new season. I'm going to rewrite that just so that it fits in a little bit nicer. All right. Then we'll do the same for dramas. We'll just say Madman, and how about Grey's Anatomy? You can write in whatever shows you want, but there we have our first browse screen. You all can go ahead and do the same thing for the other coarse screens. We've got the Social tab, the For You tab, and the Show Our Movie Details page. Once you go ahead and sketch those out, we'll move on to the next step, which is adding color. 6. Add Color: Now we're going to add some color. Because we've drawn the App, everything looks flat and pretty similar. We want to highlight the things that the user can interact with during the test. We want to give them a hint about which things are tappable. I'm going to use blue and green to highlight that and you can use whatever color you want. Here things that would be tappable, would be this back arrow, this button to add Mad Men to your list, and this button to write a review, along with tapping for summaries, something that you can tap on. But it's not one of the primary things that we are looking to draw attention to. Let's go ahead and take this light blue color for these top two actionable items. I'm just going to write over it just a little bit. You're like, ''All right, that's highlighted blue.'' Same thing here. Yeah, that's not fancy at all. But now they stick out. Down here for this ''Write Review'' button, this is a pretty big call to action here on this page. This is what we probably want people to really interact with. I'm going to use this screen color and I'm just going to shade this button in, I'm going to make the whole thing green. Now, that's really clearly a button. Because this is tappable even better, but it's not a mean thing. I'm not going to color the whole thing. I'm just going to go ahead and underline it because it's secondary, but it draws attention to the fact that it's tappable. I think that's all I'm going to do here. Again, the point is not to make this a beautiful art piece. The point is to highlight things that someone can interact with. They can scroll through reviews, but we don't need to color that. We want them to tap on ''Write Review''. We want them to save it to their list or we want them to exit the screen. You can go ahead and do the same thing to your other screens. The one thing that I would maybe recommend doing that isn't included on here is on these pages that have tabs. You also want to highlight which tab the user is on, so that they don't get lost. I would recommend if you either want to underline, like we did for top for summary, that might work. But if you also have one of these gray markers, taking a really light gray and just shading that tab in, can just highlight that that's the way you are. The one thing you want to avoid is making this look like a button. To you, you might be like, ''Yeah, this is obviously just a tab,'' but if we were to color this green like I did here just as I was testing some other color [inaudible] , I realized I made it look like a button. Don't do that. Use either a really neutral color or just take and underlying like you did here. Yeah, go ahead and do to all the other screens and then we can move on. 7. Smaller Pieces: Sometimes during testing you run into things you want to change. For example, if you have a button and the label doesn't make sense to users, rather than redraw the entire screen with a different button, you can just draw a new button with different language, cut it out and tape or glue it on top. You can do a really similar thing for temporary changes. For example, if your design has toggles and in the test your user wants to change toggle from off to on. If you have extra toggles with different states, you can just lay an active toggle on top rather than redraw the entire screen with one little toggle different. You can also use that for things like slide-out menus, or pop-up messages. Basically small changes to an existing screen, you can just make the small piece rather than redrawing the entire screen and that'll save you a little bit of time. All right. Let's make some components. I've already done some. I made a component for the filters. From the browse tab, if the user tab's on filter, you've got a menu that you can overlay on top. Because I use toggles, I made some extra toggles and other states that you can sit on top if they were to tap on them to change them. I also made a text entry, part for writing a review. If you were to tap and write a review, they could write it and hit return and then when they're done, I made a success message that she says, "Thanks for your review. " That after they submit, they know that they've been successful. I think that's just about everything but I do want to make one more. Going through the pages of the interactive fits, go doesn't need anything. We're not going to make extra screens for any of the other shows. I'm not going to worry about the settings page right now because we're not using the settings for any of the tests that we're going to be doing with our users. We've already done one for filter so the last thing would be to save something to your list. We could also make one for summary. Let's actually start there. Let's make a box that's the same size and we're going to just go ahead and write mad men summary. All right. We can go ahead and cut that out. The user were to tap for summary. You could quickly overlay a little mad men summary, and if they tap it again, it would just rotate back. We could see if that made sense in the test, I'm not sure. Then the last thing, so we want to just write a quick success message for saving something to your list. Let's go ahead and put. It's just going to say, "Saved to your list." Just draw a little box around it, you could divide it and then because on iOS, when you close messages like this, it's usually in blue text. We're going to just use a blue colored pencil. Try it close and then you could cut that out and you've got your last components. As you can see, they're pretty simple. Whenever you want to add to make your test go more smoothly, go ahead and draw and cut it out until you're satisfied. Then once you're done making all the parts for your paper prototype, we're going to move on to practicing. 8. Practice!: Good job. You finished your paper prototype. Now it's just about ready for testing. You want to make the screen transitions really smooth so that the user can stay focused on what they're trying to do with your app rather than getting destructed while you hunt for the right piece. So you want to practice the transition of switching between screens at least a few times before you do your test. You should also be prepared for the user to make a mistake and not follow the exact flow that you think they might. So maybe think through what some of the common mistakes might be and also prepare to handle those quickly and smoothly without distracting the user. I'll show you really quickly how I might practice transition. Let's go ahead and practice. Here, my task is going to be for the user to write a review from admin. Whatever your task may be, you want to figure out what the flow of screens would be so that you can practice the transition and have everything ordered and ready to go so that you don't have lag in between your user tapping the screen and something happening. Let's say you're starting the test and you give them the phone and you tell them their task is to write a review for Mad Men. Your user might tap on Mad Men and then you want to be ready to go. With this transition, when they tap on ''Rater review'', you want to be totally ready with your Review page, then they write their review and hit ''Return'', and again, you want to be ready with your Success notification. Whatever your task might be, practice your flow until it's nice and smooth for you and it feels very natural, and then you are ready to do your very first test with your paper prototype for your app. 9. Wrap Up: In this class, we learned how to make a paper prototype for a mobile app. We learned when to use one, what it is and what you'll need, and how to use it. There's no specific time you must use a paper prototype, but I like using them after deciding what the app is, how the user is going to flow through the app to complete tasks, and I've sketched it out. Testing a paper prototype here will let you do a quick round of testing and iteration before you even start wire-framing with a digital tool. Because it's a paper prototype, you're going to need basic craft materials like paper, writing utensils, scissors, and tape. We also walked through all the steps of creating the prototype. We made templates, drew the screens, added color, made smaller components, and we practiced our test flow. Remember to share your work in the project gallery. Feedback from others might help you catch things that make total sense to you as the designer, but to someone who's looking at the app for the first time might be a little bit confusing. Once you've finished this app, go ahead and try making one of your own. I'm super excited to see what you-all create.