Build Your Own World By Paper: Paper Prototyping

HCID 521 Prototyping Studio | Week 1 | In-Class Activity

Chase Wu
Prototyping Chronicle

--

After our ideation studio class at last quarter, we proceeded to our prototyping quarter. The studio class at this quarter is all about prototyping. Each week we will be introduced to different set of techniques. Here, is where our prototyping journey begins.

PAPER PROTOTYPING

Our first week was about paper prototyping. Instead of lecture, we started directly from hands-on teamwork. Our assigned theme was to design an tablet application for Charrette experience. Types of drinks and sizes were limited, and we were also assigned several service related constraints. The purpose was to provide a quick and easy ordering experience for customers. By afternoon we must complete the entire paper prototype which would be ready for testing.

My teammates in this class were Carolyn Chu Wong and Unnati Dani. As soon as we received the list of design guideline and constraints, we started our individual sketching for 10 minutes right away.

Flow chart of our prototype

During individual skethcing, I came up with a possible flow chart or ordering experience and a brief visual layout of each stage. When I designed the flow chart, my main purpose is to reduce the amount of states and keep consumers’ tasks quick and easy. Started from 5 states, I reduced it to 3 states before we came together again. Carolyn and Unnati both brought out more detailed visual layouts. We soon went into discussion and combining some great ideas of ours. Above shows a flow chart of our prototype, and we decided to apply only 3 stages. We all agreed that we wanted this experience to be really quick and concise.

Also, we all agreed we wanted to limited the scenario further: the tablet would be installed at the table. Our application is simply for customers ordering coffee for-here.

State 1: Order
State 2: Confirm

Since we were designing for tablet application, we decided to fully use the size of tablet and reduce the steps of switching stages and bring all the options in a single page, which it turned out to be really efficient layout.

State 3.1: Waiting for drinks

If customer sit at the table, we didn’t want them to go back an forward between table and counter. That was why we also focused on the customers’ waiting time, making them actually understand the process of their orders. Instead of actually showing them exact minutes and seconds, we decided to show them the order(s) in front of theirs. In that way it would also be better for barista to control the administrative panel rather than actually inputting exact time which could sometimes be hard to estimate.

State 3.2: Order is ready

By providing customers this information, they would know exactly the timing for them to go to the counter and grab their drink. This state of flow closed up the entire customer ordering experience between grabbing a seat and grabbing their drinks.

USER TESTING

After this whole process of creating paper prototyping, we went into user testing. During testing we found out some pros and cons in both our prototype and the process of paper prototyping. For our prototype, below lists out the advantages and disadvantages comparing to other prototypes in class:

  • Advantages of our content: quickest ordering experience among all the prototypes in class, clearest layout, ability to handle most of the operations, and complete experience from finishing ordering to thattheir drinks are ready.
  • Disadvantages of our content: lack of detailed information of each type of drinks.
  • Advantages of our prototype form: lots of easy-to-replace post-its that allowed us to switch response based on operations faster, and well-done demonstration of every function required.
  • Disadvantages of our prototype form: not aesthetically well-polished, without creating an actual tablet case might lack of some understanding and feedback by customers actually holding the device.

LEARNING

Paper prototyping is a quick way to present and test an idea whether is well incubated or not. From this time-tensed hands-on session, I learned and observed several things from my own team and other teams’ works:

  • The primary consideration of creating paper prototype should be decided right before starting to create prototype. I could tell some of other teams consciously or unconsioucly considered visual layout more important than actual work flow and functionality. Different from our purpose, which is to test the work flow and functionality, their main purpose might be how visual layout helps users to complete their tasks in an oriented way. It all depends on the structure of team members, and these teams usually had majority of designers instead of other backgrounds.
  • The advantage of prototyping is to quickly demonstrate an idea and learn flaws from the idea during user testing, which leads to rapid revision of ideas. These techniques of roughest but most rapid prototype will help gathering and synthesizing as many ideas at once as possible without doing a lot of secondary research. However, if you want to express the integrity of a basic idea, paper prototype with rough buildups might not be a good idea.

Next week we are going to proceed from paper prototyping to 3-D prototyping.

--

--

Chase Wu
Prototyping Chronicle

Digital Product Management @ Apple | User Experience Design | Prototyping | Information & Data Visualization | UW MHCI+D