What is this all about? This is my second quarter in the Master of Human Computer Interaction and Design program at the University of Washington, Seattle. I am writing this blog to keep record of what I have done in this program. In particular, what have I done in the Prototyping Studio class this quarter. We will go through many different kind of prototyping technique, one each week.
It is fast. It is fun. It is exciting!
First of all, even though you may see this blog is being post on the 14 of January … I had this awesome paper prototype studio class with my professor Andrew Davidson on Friday the 10th. That was the first class I ever had with Andrew! I was very excited and ready for whatever was given to me : D
Photo credit: http://getit.sk/wp-content/uploads/2014/01/gb.jpg
As you maybe able to guess …^^^… our task was to design a tablet application which would allow a person to order coffee from the MHCID Studio Cafe. Since this exercise was meant to be quick and dirty one, the coffee shop only offer 3 types of coffees … and they are:
1. Espresso ($1.50)
2. Macchiato ($1.75)
3. Cappuccino ($2.00)
Beyond the three coffees that the consumers are allow to order, there are 3 variety of sizes for each of the coffee:
1. Normale (base price)
2. Grande (add $1.00)
3. Gigante (add $5.00, this should be vietato)
Three awesome drinks and three different sizes?! shouldn’t that be enough for a good coffee ordering experience?! No no no. This tablet application will also need to allow customers to order multiple drinks, request confirmation for each drink before adding it to the current order, calculate and display the total amount of each drink and of the total order, and issue a confirmation of the total order before finally sending it to the barista. We assume that customers will pay at the counter.
After receiving the prompt, we were split into group of three. When my group mates and I got together, we had brief discussion about what we initially thought about this coffee ordering application should be. We then spend a few mins designing the application on our own. (Below is the image of my initial tablet application sketch)
When I was sketching the interface, I imagined myself trying to order a cup of coffee from an imaginary tablet application. “So if it was me … First, I would want to be able to select what kind of coffee I want and also how many cups I wanted to order. I would then decide on the size for each cup of coffee I order. At the same time of selecting sizes for my coffee, I want to be able to see prices for each one of them before I make my decision. If there is any changes, I need to be able do so … easily. After all this, I want to see total of my order and a confirmation page for my coffees!”
I found the experience of imitating myself as one of the customer who use this tablet application very helpful in this initial stage of designing the app. This give me very good idea of what this application should/could be. I can quickly sketch a rough interface and share my ideas with my peers.
Photo Credit: Professor Andrew Davidson
After a few minutes, my group mates and myself share what we had with each other. We critiqued each other works and gathered good/unique functions from each of our design in order to create a brand new tablet application together. I really like this approach because the technique got us on the same page and ready to produce a better app.
We then started with a base design where the app would allow customers to choose a kind of coffee that they like as well as the number of order they prefer for each of the coffee. The customer would click a “next” button which locate on the button right of the screen to choose sizes for the coffee and so on … The more we try to design this application, the more we felt that it became really redundant and take a very long time and go through so many different pages in order to order coffee …
Again, with our imagination, we went through the process of ordering coffee through this application together. And we finally found a much better solution.
Our application turned out to be a single page coffee ordering experience! You are able to see all the availability of coffees and sizes as well as prices on the same screen. You are able to select sizes and number of drinks that they want without having to go beyond what they see on this first page. Every time you select your drink, you will be able to see the total cost updated right away on the right column (under order summary). You can also change his order by simply push on the “+” or “-” sign which located next to each kind of the coffee directly. Once you finish with your order, just click “check out” and you will get a confirmation on your order. Then you can just sit back and wait for your coffee!
To check out the video demo: Please email me!
With minimum cost, this technique allow me to quickly prototype any user interface and test it with potential target audience. However, the down side of this kind of prototyping was that the fidelity will be relatively low. Therefore, the audience who tests the prototype can get confuse with some of the prominent/important functions, for example, what is clickable and what is not. Also, because this technique is base on paper, the tester need to pre-made most of the possible outcome in which they can smoothly use while testing it with the target audience. This cost a lot of time. Even so, it could be chaotic to switch small pieces of paper according to different scenarios.
Regardless, my experience with paper prototyping was great. I’m looking forward to the next week prototyping technique!