Discovery Lab

In Class

Design Doing

Introduction

Now that you have a crew, a few ideas, and a bit more background on why you’re all motivated to work in a particular area, it’s time to create some physical manifestations of these ideas together, as a group, and begin to form a vision of what’s possible together.

Our products are interfaces between humans and computers, and as such we need a process that can help us as developers to create meaningful interfaces. Paper prototyping is extremely helpful during the early stages of conceptualizing and exploring approaches and concepts.

In this exercise, you’ll be asked to create one or more paper prototypes to aid you in communicating and testing your application ideas. Your focus shouldn’t be on creating good looking prototypes, but rather on creating thoughtful interfaces that will elicit useful feedback from people that could benefit from the realization of your idea.

Instructions

• You’re goal is to design a number of interfaces and interactions for a single-page web application based on the assumptions you wrote in your ideation workshop.
• Grab some paper, pens and some scissors and cut out many 138.3mm x 67.1mm rectangles (get as close to that measurement as you can). These represent potential screens. This also happens to be the size of an iPhone 7.
• DO NOT DRAW ON THE PAPER! Cut out all of your UI components and arrange them as discrete UI components that your user can interact with
• You can label and draw on these components, but only after you have exhausted all opportunities to cut. Your goal is to not only capture the components you’ll need to create for your UI, but also to understand how they all fit together on a screen and the ways in which their state can change (for example, you might have a text box that displays an error message if the wrong type of data is entered, or it’s not formatted correctly).
• Create a list of all of the UI components you have in your application, note their size, and the function that they will perform and how they relate to one another.
• Prepare these screens for presentation and user testing during the next class session. The user testing sessions will involve a typical user sitting down and manually engaging with your application’s paper screens as you observe and perform the role of the computer (switching component states, changing views, etc…)

Important!

• Before you begin — Set a clear goal that you would like to achieve with the prototype. For example, you might have uncovered a problem where an existing solution required two hands to operate, and you’d like to develop a one-handed interface (or perhaps even gesture-based). Make that the singular goal of your prototype. You can and should make more than one prototype for multiple goals.
• Do not polish your prototypes — This is not about perfecting your arts & craft skills, it’s about finding a potential solution to a problem as quickly as possible. The faster you complete a prototype and move on the better at this stage.
• Document your prototypes — Once you are done, put everything in a place, take a photo and digitally document how your prototype functions. You can also take photographs of each sketch or state of your prototype, and combine them in Photoshop to create an animated GIF. Post this documentation to your team’s Slack channel.