Uncategorized

Website Prototype

I was prompted to re-design the existing “Dub” website as well as conducting some initial user testing to evaluate the design. The newly design web page include the following basic functionality:

a. Events: calendar like system which include information about Dub events and weekly seminar series (schedule, presenters, abstracts, etc.).
b. Research: faculty research areas, projects, publications, collaborators, etc.
c. Blogs: listing of news and announcements of interest to the community.
d. People: listing of faculty, students, affiliates, etc. who are members of the dub community.
e. Login: a members section for dub members (login required) to edit own information on the site (profile, research, etc.).

Beyond the basic functionality, the homepage is meant for audience to quickly have an overview of highlighted information include Current Events, Highlighted Research, Latest Blog Post, and People in Dub Community.

Please check out my prototype via Axure share:

http://iwes1n.axshare.com/home.html

Existing Design Analysis

Before creating a prototype, I first explored and identify problematic areas in the existing Dub website.

Untitled-3

Untitled-4

Untitled-5

Untitled-6

Information Architecture and Layout Template

After identifying problematic areas, I reorganize information architecture for the Dub website and group information with similar content under the same categories. For example, I grouped publication and project under research category and I grouped news, calendar and weekly Dub seminar under events.

IMAG1547-Recovered

Grouping information with similar content helps me great deal to design a new layout for the website. Since the old Dub website overloads its front page with a lot of unnecessary  information, I decided to use the front page to only show the most important from each of the high level content: Events, Researches, Blogs and People.

IMAG1543-Recovered

Interactive Wire frame
After sketching out a rough layout template and reorganizing the information architecture of the Dub website, I used Axure to execute the interactive wire frame prototype.

Untitled-7

Here are screen shots of the new Dub website.

Untitled-8

Untitled-9

Untitled-10

Untitled-11

 

Design Evaluation

I have conducted user research with a few participants. All of them stated that the overall aesthetic of the new Dub website was very well done. The layout is clean and they appreciate the amount of relevant information which were presented to them on the first page. One area of improvement for the new design is the “People” section of the website. Participants stated that the list of people’s name can be better presented. With the new design, it is still very difficult for audiences to look through lists of countless names.

Axure is definitely one of a better tool to prototype websites today. However, it still has a lot of constraint and limitation. For example, it is very difficult, sometimes not possible, to prototype different kind of animation or transition elements which I know exist on the web in Axure. I also found myself doing a repetitive action in order to get the same task done in different places. Furthermore, the html file output from Axure is not maintainable. Therefore, it is not usable in a long run. That is because the html code is not outputted in a way we could easily understand. If these issues can be resolved in the new version, then Axure would be a great tool for website prototyping.

Please check out my prototype via Axure share:

http://iwes1n.axshare.com/home.html

 

 

Standard
Uncategorized

Behavioral Prototype

Have you ever heard of the Wizard of Oz? Yes, you read it right. We were task to perform behavioral prototype or Wizard of Oz to test gestural interface for apple TV.

Design Prompt:

Build and test a behavior prototype for the following scenario:

Gesture recognition platform: a gestural user interface for an Apple TV system that allows basic video function controls (play, pause, stop, fast forward, rewind, etc.). The gestural UI can be via a 2D (tablet touch) or a 3D (camera sensor, like Kinect) system.
Your prototype should be designed to explore the following design research and usability questions:

• How can the user effectively control video playback using hand gestures?
• What are the most intuitive gestures for this application?
• What level of accuracy is required in this gesture recognition technology?

Design Consideration:

In considering the design prompt provided for this assignment, we decided on the following parameters for our behavior prototype:

1. Our prototype will demonstrate a 3D gestural UI for an Apple TV system.
2. Our behavior prototype and user testing will focus on the following 7 functionality of the Apple TV:

Task icon list_800px

3. We will establish a unique gesture for each of the above 7 functionality and an initiate gesture ahead of the user testing.

Gesture_1-4_800px

Gesture_5-8_800px

4. Our user testing will examine and validate the following four areas:
a. Users’ ability to command the Apple TV through gestures without instructions or training on the actual available gestures.
b. Users’ ability to command the Apple TV through gesture after some explicit in structions/training on the actual available gestures.
c. Different range of motions (to determine the ideal range for the users) for the gesture UI.
d. The need for a trigger/initiating motion/gesture to activate the gesture UI.

5. The user scenario is one where the user is standing in front of his large screen TV and casually browsing and sampling through different channels and shows as he is not sure what he would like to watch at the moment.

Prototype Setup:

1. We used a 15-inch Macbook Pro situated on a moving cart (to elevate the screen level) to micmic a large screen TV.
2. We considered the embedded camera on the Macbook Pro to be the gesture sensor that takes in user input.
3. Since we don’t possess an actual Apple TV, we used the iTune player to micmic the Apple TV interface.
4. We placed the user 5-10 feet in front of the Macbook Pro.

00002_adjust_800px

5. One of our team members was situated a distance behind the user/tester with a Apple remote to control the UI behavior in response to the user/tester’s gestures.

6. We set up two cameras (one on a tripod and another one on a high desk) to capture the videos of the user testing from two different angles/perspectives.

VIDEO00223_adjust_800px

7. We also recorded the actual screen on the Macbook Pro (we actually did not have enough room to splice the screen recording into our prototype video. Instead, we used visual indicators in our final edited video to show whether a gesture from the tester resulted in a desired action on the Apple TV).
8. We asked the user/tester to think out loud and speak the actions/commands that he was gesturing (even though this is not a voice activated system) so that we can follow the tester’s intention.

Discovery & Learning from the Evaluation Session:

1. Without any instructions or training, majority of the gestures that the user/tester attempt ed during our first evaluation session actually matched closely to the gestures we designed/decided on with the exceptions of play, pause, and stop. The user had a hard time guessing what the gestures should be for those three features.
2. The gestures we designed for the play, pause, and stop were not distinguished enough from each other. This caused some confusion on the user’s part.
3. We found that having a trigger/initiation gesture to activate the gesture UI was important to avoid segmentation ambiguity (where the system confuses intended gestures from unintended gestures.)
4. Our user preferred a range of gesture motion to be approximately within the width of his body. Larger gestures motion not only causes strain on the users but also (as the user insightfully pointed out) can create confusion on the system’s part (e.g. it would be harder to tell where a gesture begins or ends when motion for fast forwarding or rewinding.)
5. With a very low cost setup, we were able to observe the user behavior and validate (or in some cases, invalidate) our assumptions going into the the evaluation session.

Standard
Uncategorized

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.

Sequence 02_adjust

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!

IMAG1425_800px

IMAG1432_800px

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.

 

Standard
Uncategorized

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.

Two Screen Blenders

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.

IMAG1324adjust

IMAG1325_adjust

IMAG1322_adjust

IMAG1333_adjust

IMAG1337_adjust

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!
Sangnil_Punchet_Model Prototype Video_800px

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.

Sangnil_Punchet_Hand Blender Report-3_1_800px

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.

Sangnil_Punchet_Hand Blender Report-4_2_800px

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.

Sangnil_Punchet_Hand Blender Report-5_3_800px

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.

Standard
Uncategorized

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.  

maxresdefault_800px

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.

mpc24_800px_crop

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.     

10_800px

mpc17_800px

14_800px

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!

IMAG1269_800px

IMAG1264_800px

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.

Standard
Uncategorized

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”.

Paper Prototype 20140113_0117_800px_new

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.

SONY DSC

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.

VIDEO0014_800pxTo 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.

VIDEO0014-6_800 px_adjust

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.

VIDEO0014-7_800px_adjust

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?”

VIDEO0014-8_800px

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.

VIDEO0014-2_800px

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

VIDEO0014-3_800px

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.

VIDEO0014-9_800px

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

VIDEO0014-10_800px

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

VIDEO0014-11_800px

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

VIDEO0014-12_800px

VIDEO0014-13_800px

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.

Standard
Non-Electronic

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!

800px_DSC_1119Photo 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

800px_gbPhoto 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)

Initial Tablet App 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.

800px_DSC_1144Photo 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.

800px_IMAG1226

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!

800px_IMAG1228

To check out the video demo: Please email me!

800px_DSC_1152 (1)-2Video Credit: Professor Andrew Davidson

800px_IMAG1229

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!

Standard