Video Prototype

We finally got exposed to how to properly make a video prototype! Our lecture last Friday was super informational … we watched couple of movie clips from Sergei Eisenstien and Alfred Hitch Cock. It was old but still very good to see movies which were produced by these two producers.

What we need to do this week is to create a video prototype that demonstrate functionality and experience using a product. We can either video our prototype from the last couple of weeks or we can come up with a new product all together. I chose to make my video prototype on “CLIP”, automatic action camera (a made up product). The idea was that this small hand free camera which would automatically capture your moment no matter where you are.

To complete the video prototype, I reuse my own footage from a road trip I had couple months ago. I want to show how little camera can capture such an amazing experience. Beyond that, I also staged an interview of myself in order for me to show the CLIP prototype. I had couple of friends help me set up the stage and interview me about my experience using CLIP!

Video prototype is a great way to show experience of using a product. Motion picture can capture so much of what’s going on in an environment. Adobe After Effect and Premiere Pro are two very handy tools to edit videos. Anyway, using these editing programs for the first time can be intimidating. Another down fall of video prototype is setting up time could take a very long time.

 

Hand Blender Prototype

For model prototype exercise this week, we had options of either making prototype for handheld blender or stud finder. Below are lists of specification:

1. A handheld immersion blender with a variable speed control and digital display that senses when the contents have achieved a specific consistency. Features include:
   • variable speed control – you decide the mechanism/interaction and whether it is fluid or distinct settings
   • digital readout of speed and content viscosity (monochromatic, non-touch sensitive)
   • can be used right or left-handed
   • product dimensions minimum of 12 inches long and 2.5 inches in diameter for motor compartment
   • product weight is between 2–3 pounds
2. A handheld stud-finder that incorporates digital display (monochromatic, not touch sensitive) and led indicatory light. Features include:
   • product dimensions approximately 6 x 3 x 2 in volume
   • product weight is approximately 1 pound
   • Indicator light shines an arrow-shaped light on the wall to mark the stud location
   • Ergonomic design can be comfortably held in either hand at any angle
   • digital display communicates:
     • Edges of wood or metal studs up to 3/4 in. deep
     • Tool calibration and reset
     • Over-the-stud indicator

I chose to design handheld immersion blender  because I always want to try one of those! I mainly focus on comfortable grip, works well for blending, as well as decorative when it is not in used. Even though OXO is interested in incorporating digital UI into a new hand blender product line, I found that there are many other ways of showing accurate viscosity and speed without using any digital readout. This will potentially reduce overall cost of the production and eliminate unnecessary digital components on hand blenders.

Since I have never used a handheld blender, I did my initial research by going to a cooking ware store and checked out a few different models of handheld blender. I also borrowed a friend’s hand blender in order for me to use and gain firsthand experience.

The good part about hand blander is that it can be used to quickly blend soups, sauces, vegetable, etc. in various kinds of container. However, there were a few problems I found while using it. Firstly, I didn’t know which way I should correctly grip the hand blender. Secondly, freely moving the hand blender up and down was very intimidating. Thirdly, there was no easy way to store the hand blender.
After analyzing the pros and cons of the handheld blender, I sketched out 3 different handheld blenders design which explore solutions to these problems and built prototypes accordingly.

After building prototypes, I did user testing to see if there are any problem with my design. If you would like to see the video, please contact me!

Prototype #1
The design was intended to address the problem of gripping, indicate speed and viscosity without using digital call out, and should be decorative when not in use.

Feedback After User Testing
The user like the overall design and found that the cylinder shape is easy to grip. The bigger button clearly communicate bigger speed. She also understood that small button is for smaller speed. However, the user assumed that the red light indicate power (on/off). It wasn’t at all clear that the light suppose to indicate viscosity.

Prototype #2
The design was intended to explore the idea of simultaneous blending experience. Both ends can be used as blender. The blender itself can be separate into two parts which would beautifully stand on kitchen counter top.

Feedback After User Testing
User liked overall design of the blender. She also really enjoy the fact that it can be placed on countertop easily and beautifully. Even though the two sided blender was an interesting idea, it may not work mechanically. The cone shape makes it harder to grip and she did not notice any light.

Prototype #3
The design was intended to address the problem of gripping, bigger button, visual indicator for speed and viscosity.

Feedback After User Testing
The design provide the most comfortable grip out of all three prototypes. Buttons were very easy to push. The user is able to indicate the speed and viscosity indicator on the back of the blender. However, she had no idea what Liquid Volume Indicator bar was.

Analysis
Prototype number 3 delivers the most comfortable grip. It also successfully communicates speed and viscosity using minimal light indicator. I would recommend OXO to keep exploring this design.

Building model prototype is a very good way to quickly test product idea in 3 dimensions. When conduct user testing, user can give accurate feedback. He can physically feel the object and try out the concept design in real time. However, building model can be intimidating, familiarity with different tools is required.

Model Prototype

Second week of the quarter came around … another exciting Friday! We spent the first half of our class reviewing videos from the paper prototype of everyone in our class, yepp … all 30 videos. It was really cool to be able to see my classmates videos. Some of them were really good and I wanted to make my video better next time!

After watching all the videos, we were introduced to the Model Prototype. It was about prototype things in 3D. For example, you can use card board to make a really quick prototype of microwave, music instrument or anything that you conceptualize in 2D environment. In fact, cardboard is only one of the countless materials that can be used to make model prototype. You can use foam, paper, glass, plastic, and etc to make 3d prototype. It is a really good/cheap way to quickly evaluate your 3d design. Back in my undergraduate, while I was studying industrial design, I did a lot of this kind of prototyping so it wasn’t a new concept to me. I am very familiar with model prototype. However, I was very excited to get my hand dirty!

Our task of the day was to redesign “Eco ATM”. At the time it was introduced, I had no idea what it was. In case you have never about it, below is a description from their website:

ecoATM is the world’s first automated eWaste recycling station. That’s a fancy way of saying that we’re a friendly green machine looking to pay cash for the responsible recycling of your old cell phones, MP3 players and tablets. Sell your phone or other device by placing it in the ecoATM kiosk, and we’ll tell you how much it’s worth. What happens next? You get instant cash. With ecoATM kiosks all over the country, and with your help, we’re working hard to solve the eWaste problem facing our planet.  

We were divided into a group of 4. At the end of the day, our professor expected us to came up with a prototype of a newly design eco ATM that suppose to be better than the current one. When our group first sat down together, we list out all requirements that eco ATM has to have. It needs to have touch screen where users can input their info, compartment where users can insert their electronic devices, ID scanner, and receipt printer.

After then, we started to brainstorm and sketched out some ideas. With the time constraint, we had to decide very quickly of what we wanted to make. Our big idea was that the machine should be able to scan multiple devices at the same time as well as the user ID. This would happen within a compartment inside the eco ATM machine. Since my background was in the industrial design, I was able to quickly sketch out what our ATM would look like on the paper. It gave us a better idea of what we are going to make.

But wait … after all the brainstorm and sketches, there was only about 1 and a half hour left until the class end! We had to quickly, according to the design sketches, figured out all necessary part to built our eco ATM prototype. Nonetheless, we had an argument whether we wanted to make a scale prototype of the whole machine or only the top part of the machine where most of the interaction occur. In the end, we decided that we wanted to make to the top part of the machine with a scale of 1:1. That was mainly because the limited time and material that available to us.     

Our prototype making went very well. We put together all the parts according our initial design. We also successfully made a prototype of the compartment which was used to scan multiple electronic devices!

Even though this was not the first time I made prototype in 3-dimension, it was still an exciting experience! You can quickly and cheaply create a concept model which is able to communicate your big idea. Also, the model prototype does not need to be perfect, as long as it can communicate the idea then you have successfully create your prototype.

Nonetheless, if this was your first time with this technique, making prototype in 3d can be intimidating. You may need to get familiar with different tools such as knives and glue gun etc.

Testing Amigo

Follow the paper prototype exercise, we were tasked to come up with an application with would  combine the the use of smart watch and smart phone. It should involve synchronization of data between the two devices.

I did my paper prototype testing on “Amigo”.

Amigo is an application that combine smart phone and smart watch technology in order to help children (ideally in the age between 10-12 years old) manage their anxiety. It uses sensing technology in smart watch to sense a child anxiety on daily basis. The watch will prompt the child with various techniques in order for him to reduce his anxiety. It will also automatically send the child’s anxiety data to his paired smart phone. At the end of the day, the child can check his anxiety management activity via his smart phone. He can also see his weekly/monthly/yearly anxiety management trend with Amigo application on the smart phone.

Please note that: Amigo was derived from a group project I work on last quarter. My group member were Gwenyth Stokeley, Alma Emadi, Jun Bum Kim and David Yang.

Sketching the interface
I first sketched all interface that would appear in the application. I decided that there should be at least 3 main tasks that I want to test the user: syncing the smart phone with smart watch, respond to the watch notification, and review data on the smart phone.

The Testing
With time constraint, I weren’t able to find any children to test out Amigo. Instead, I decided to test out the paper prototype with a few of my classmates in order for me to get some initial feedback.

To check out video Prototype, please contact me!

First Task: Set up
When a child is using the Amigo application for the first time, he will be prompted with a set up screen on his smart phone. He can input his name, birth date and email address.

Afterward, by placing his smart watch next to his smart phone, the two devices will be sync automatically. Now, the child is ready to use Amigo.

Second Task: The smart watch notification
Notify a child when he feel anxious as well as providing techniques to help the child to reduce anxiety. In the background, the watch will also send all information to his smart phone where the child can view later.

During the day, when the watch detects the child anxiety, it will buzz and prompt the child with a question “Feeling Anxious?”

If the child feel anxious and click on “Yes”, then watch would provide the child with a few anxiety management options. The child can choose one of these options and try to manage his anxiety with the technique he chose.

The watch will then show an animation which illustrate the anxiety management technique. It will turn back to default after a few seconds.

Third Task: Review anxiety management activity on the smart phone
Provides the child’s anxiety management information. The child can see exactly the time that he experienced anxiety. He can also see monthly trend and yearly trend if he has improved on his anxiety management.

At the default screen, by clicking on a teardrop-like button, the child is able to review his anxiety management technique he used through out the day.

Icon on the top right corner represents the average mood of particular day!

By clicking on the leftmost icon on the navigation bar, user can access setting page.

By clicking on the rightmost icon on the navigation bar, user can review monthly/yearly anxiety management graph.

Analysis

With time constraint, I weren’t able to find any children to test out Amigo. Instead, I decided to test out the paper prototype with a few of my classmates in order for me to get some initial feedback. There were three main parts of Amigo application I asked all participants to try out: syncing smart phone and smart watch, respond to the push notification on the watch when he has anxiety and to review anxiety management data on the smart phone.

In the first round of testing, the participant point out that the process of syncing the phone and the watch can be done simpler. He suggested that instead of having to run through three different screen … since the setting up step 2of3 and 3of3 were very similar, I should be able to merge the two screen into one. He also suggested that user may not need to tap on “sync” button, when the user put the smart watch next to his smart phone, it should automatically sync.

The part that got really good feedback on and worked out the best was the push notification of the watch. All participants went through the smart watch interfaces without any problem. Buttons were very clear. They thought that the animation screen which happen after clicking one of the anxiety management technique was very well implemented. The interface was simple and straight forward.

For reviewing Anxiety Management data, one of the participant had hard time finding the page. During the testing, it was evident that he was surprised when clicking on the right most icon on the navigation bar and the application transition into a page with monthly graph. He thought that the button would bring him back to the previous page. He suggested that icons I chose to represent different tasks were confusing and should be improve.

Over all, participants had no problem navigate through Amigo application with both the smart watch and the smart phone. As the first time users, they could easily figure out how the sync the phone and the watch, successfully using the smart watch to help manage their anxiety, and able to review their anxiety management data. Besides a few minor suggestions for improvement such as changing some icons and reduce a step for syncing the phone and the watch, I would consider Amigo application very effective.

Paper Prototype

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!

Photo Credit: Professor Andrew Davidson. 

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!

Video Credit: Professor Andrew Davidson

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!