Coffee Ordering
Paper Prototype, HCID 521 Prototyping Studio
Background
Prototype is a hypothesis we created for the product or service we gonna to design or provide. It is such a fantastic learning and refinement tool that we can learn a lot; can prove the assumptions; can help the communication within the team or between the designer and developer; we will explore more and deeper through the iterative user testing and will inspire our designs.
Fortunately, last quarter, I took the HCDE 518 course, and my team designed an app for connecting the dog owners and dog walkers, thanks to which, I had the opportunity to create the paper prototype as the lo-fi prototype for the app product (show in the following) at the first time:
Though it seemed that the quality of this prototype is not very high, I have learned a lot from the process, for example, it is important to create the prototype quick enough, and to iterate and refine based on each user testing etc.
Now, I got another chance to practice paper prototype in my course — HCID 521 Prototyping Studio: a paper prototype for Charrette — a tablet app for coffee ordering. My other two team members are Alex and Alma.
Design Process
First of all, unlike other teams who created the information flow using sentences or keywords and arrows, we talked about the fundamental steps first and then drew images to think about and present the flow. “a picture is worth 10,000 words” Bartfett quoted. Thinking about the flow visually really did a lot of help to our design. We saved amounts of time to make the paper prototype and operate the user testing and refined our design and prototype iteratively.
Prototype
Step 1: Choose a kind of drink
We are assuming that the user has already logged in, so that the user’s name will be shown after the “welcome”. There was not any change at this screen during our user testing process.
Step 2: Choose the size
We used a small popup and zoom-out screen to present all sizes to the user. The user could stay on the same screen and see what he/she has ordered. The design of the small screen was appreciated by many users.
Step 3: Check, change and confirm the order
The drink summary will show you each drink you ordered by sequence. You could delete your drink just press the “X” button. Press the “confirm and send” button, the user can easily confirm and send the order to the coffee shop at the same time.
If you want 2 more of the same drink, you can stroll the item number and choose “3″.
Step 4: Order confirmation
Show the order again so that the user can check if he/she wants. It also will tell user the number of customers waiting in front of him/her, which could help the user to estimate and arrange their time. The user also can start new order at this final screen.
Particularly for the user testing, we created many materials.
Refinement
Though we tried our best to think of almost all the possibilities that the users will be face with during the order process, there are also some situations we found out from the user testing, which helped a lot.
1. Add the “Delete” button
At first, we only have the “Change” button, and we assumed that the user want to change their order (i.e. the size or the type), but, one user could not find out how she can delete the drink. It seems that she wanted to delete the drink and choose another new one instead of “change”. It is true that the word “change” was a bit confusing. Thus, we deleted the “Change” button, and only add the “Delete” button.
2. How to reduce the steps of adding more same drinks
We had been thinking about this question during the whole process. Though came out some solutions (for example, add a “+” plus button), none of these was effective enough. Actually, we were stuck with the “Change” button at first. If there are many same items, it would be a bit hard for the user to change one of them. Replace the “Change” with “Delete” helped us come up with the “stroll” — user can choose the number of items they want just press the number and then stroll.
3. The characteristics of tablet UI
There is one point that we would like to improve. It is better to include all the information, actions and functions on the same screen. Unlike the webpage, users are accustomed to staying on the same and only screen and to finish all the actions. Despite the main screen, other interfaces can be presented as popups, zoom-out windows, and swap-out windows. Users could be able to see all the possibilities, all the activities and actions on the same screen. The UI principles are very different among different platforms — smartphone, tablet, and PC. It is of great importance to consider the best UI for a certain platform before thinking about the structure and interaction of a product.
Reflection
1. Try to think visually.
2. Do not hesitate too much, just make the decision and try out the prototype a bit fast.
3. Assuming you are the user, and try to think about all the possibilities you will face during the interaction with the application/product.
4. Test with the users, ask them about their experience, consider all the information you get from the observation and users’ feedback.
5. KISS — Keep it simple stupid. Fewer screen, fewer clicks, less information presented at the same time.
6. Highlight the information you want to show and hide the one the user does not need temporarily while they are on the same screen at the same time.
7. Design fluency and understandable interaction firstly, and then try to think about interesting, creative while still effective interactions.
8. Iterate, iterate, iterate…
Love prototyping! Fun paper prototype experience!
