Hi there. The time has come to transition from wireframes to prototypes. We'll start with building paper prototypes. So let's get cooking. You might be wondering, why would I want to build a paper prototype? First, paper prototypes are inexpensive; all you need is a pen and paper. Second, paper prototypes allow for rapid iteration. Because you're only using pen and paper, you can whip up paper prototypes for lots of different ideas quickly. Third, building paper prototype is low commitment. Digital prototypes take a while to make, so it can be painful if you need to totally scrap them. But paper prototypes can be made quickly, so it doesn't burn so badly if they need to be trashed. Fourth, paper prototypes encourage honest feedback. Paper prototypes are less polished, which makes your teammates and users feel more comfortable criticizing them. Finally, building paper prototypes is a collaborative activity. There can never be too many cooks in the kitchen. For example, different members of your team could each quickly sketch their own prototype for a specific page of an app. There are, of course, some drawbacks to paper prototypes. It can be hard to interpret a paper prototype. It requires a lot of imagination for users who are testing a paper prototype to picture what the real product will actually look like. It's like a list of recipes without any images. In addition, paper prototypes can only be tested in person. You need to bring the paper prototype to the testing location, and a person has to act as a computer to manually change the design in real time. Think of it this way: You can't taste a cake over a computer. Lastly, paper prototypes are difficult to create with a remote team. Imagine trying to make a cake when the baker and the decorator are in different countries. Because paper prototyping is so hands on, collaboration is best for this activity when you're together in person. With all this in mind, when is building paper prototypes useful? Well, paper prototypes are great to make during brainstorming sessions. You can quickly draw multiple ideas and compare those ideas. You might also want to build a paper prototype to test your early product idea with users. One more thing. It's important to point out that designers can take a number of different paths when creating wireframes and prototypes. For example, once you've completed your paper wireframe, you might discover that going straight to a lo-fi digital prototype works best for you, or sometimes you might not use paper at all and build everything digitally, like if your app or website is already well established. It all depends on what type of project you're working on and what works best for you and your team. Alright, it's time to start cooking. Let's make our first paper prototype. For this example, we'll build a paper prototype for a dog walking app. Remember the wireframe for the homepage that I made earlier? While you were making your own wireframes, I also made wireframes for the rest of the dog walking app: the user profile page, the scheduling page, and the checkout. Let's test one of these wireframes out. Since we sketched a schedule button on the homepage, let's find out what happens when we give it a tap. Absolutely nothing. So how do we take this wireframe and turn it into an interactive, low-fidelity prototype? Well, it's time to get crafty. To make our prototype interactive, I'll grab a pair of scissors and cut out every screen like this. To save time, I'll borrow a trick from popular cooking shows. And voila! We have our cutouts. But wait there's more! We also need the outline of a mobile phone that the screens will fit inside of. Let me see if I have one in here. Oh, yes, here we go. Now that we have our screens and mobile phone outline, how do we make them interactive? First, think about the order that a user will experience each of the screens you've drawn. That's the order we should lay them out in. Let's start with the homepage, since that's where our users will enter the app. I'll place the screen with a homepage here. Next, I'll place the schedule screen to the right of the homepage, where users can select a date and time for the dog walker to visit. To the right of the schedule screen I'll place a screen with a list of available dog walkers on this date and time. To the right of this screen, I'll place the dog walker profile page with a book button. To the right of the profile page I'll place the booking confirmation page. We might also want to consider what happens when a user visits the app to edit their profile. They wouldn't go through the flow we just discussed. Instead, we'll place that screen to the left of the homepage. To make our prototype interactive, let's imagine a user wants to schedule a dog walker on the 11th of the month at 5:00 p.m. Let's use the mobile phone outline to simulate how the user moves through the app. This will require some imagination. The user opens the app and starts on the homepage. They tap the schedule button and are brought to the schedule screen where they can select a date and time for the dog walker to come to their home. Next, the user selects a date and a time and presses the Book button. They're brought to a screen with a list of available dog walkers on the date and time they selected. To select a dog walker, the user taps on the dog walker's profile. This takes the user to the dog walker profile screen. Here, we click book and we'll go to the checkout screen. Then the user clicks on the Confirm button. Whoops, it looks like I forgot to make a screen for the confirmation page. This happens all the time and is the reason why we make an interactive prototype. As I'm working with paper, it's super easy to create the missing screen. Let me grab my supplies. Give me a couple seconds to draw this. I'll start with a simple rectangle for the phone outline, and then I'll add a square with an X to represent an image of the selected dog walker and add a few lines below the image to indicate the confirmation text. Now let me quickly cut this out. There we go. I can now finish the user's journey through the app. And there you have it! A paper prototype. If you want to make your paper prototype a fancier dish, you can add a scrolling element to the mix. Let me see if I have one in my picnic basket that I can show you. Here we go. This paper is another version of the available dog walker screen that I made earlier. It's a long list of many dog walkers, which is what a user would likely experience in the real app. To simulate how a user scrolls, we place the mobile phone outline at the top of the screen. I'll hold down the mobile phone outline and slowly scroll through the long screen using my finger. There you go. You've just learned how to turn a paper wireframe into a lo-fi paper prototype. Awesome job. Before we come to a close, it's time for a little pop quiz. Why do you think we decided to design for mobile as a first step? Because it's the smallest space our designs might appear in. If our design works well on the limited screen of a mobile device, there's a good chance it'll fit on a larger interface like a computer monitor too. One other thing to keep in mind when deciding whether to design for mobile or desktop is what's best for the product and business. Either way, you can create paper prototypes like we did here. Coming up, we'll check out how the wireframe to prototype transition works on a digital level.
