Objective / Goal: make a paper prototype of two different apps to help test which is better and explore the potential of each.
Its time to get into the real meat of the design process – paper prototyping! A paper prototype serves many purposes. It makes sure we have thought out all the necessary pages / views of an app, forces us to consider the spatial layout of elements within the page, gets us thinking about how the different pages are linked together, and lets us do ‘wizard of oz’ testing. You’ll take one of your storyboards to move forward with and make two different prototypes of the app it depicts. Depending on your app design path and approach there may be some great variety among the prototypes, but they will all also have several things in common.
- Make a wireframe template first. Several of your pages may share a similar layout – you can draw this once and make copies of it for additional views.
- Do hand draw these prototypes. They are meant to be fast. They should be clear enough to communicate your ideas, but we are not looking for photorealism or super straight lines.
- Its up to you if you want each page to be on a separate sheet of paper, if you want a phone / tablet overlay that you move around between frames, or if you’ll have cut out elements that you push around on a backing template. What am I talking about? Here’s one example (Links to an external site.) of a paper prototype made for this class in the past, and here’s another (Links to an external site.). Note that both prototypes are for the decision makers path (though their assignment was different), and each video shows 3 different prototypes.
Here are some other development requirements to keep in mind:
- You need to make 2 different paper prototypes
- Each prototype should have at least 7 unique pages / views
- You’ll need some kind of global navigation – typically found a the top or bottom of the page. While this navigation may be visible on all pages, there are circumstances where it may not be practical on some views.
- You’ll need to make a single video walk through of both your prototype
- This video must not exceed 3 minutes in total duration (roughly 1.5 min per prototype)
- The video should include audio narrations explaining the functionality of the app and who it is for (see second example)
- At the end of your video include a question about your work that you would like specific feedback on. This is your opportunity to steer your critique!
When thinking about how to make your prototypes different, consider different aesthetics, different layouts, different navigation structures, even differences in functionality, all while remaining in the space of your one storyboard. At this stage, you can use thumbnail sketches to indicate images and place holder text, however the more you think about these elements now the less you’ll have to think about them later. As we have discussed, interaction design is an iterative process. At this time you may feel the need to revise parts of your concept or change parts of your structural mapping. That is fine, please do so. However, now is not a good time to start with a completely different idea – stick to one of your three storyboards.