Web/Mobile Wireframe

Wireframe is a useful way to show the overall design of the website or application before implementation. Since there is no color or real image, it allows reviewer to focus on only the layout and the UI flow.

Pet Time is a mobile application for pet owners to share photo records, discuss relevant topics, and keep track of the pet's exercise records.

See interactive prototype (Mobile)

See interactive prototype (Desktop)


Model Prototype

The model prototype shows the possible size, weight, and the interaction model. It is extremely useful for testing how the model will fit into he environmental context.

I created the shower controller prototypes to research on different interaction models.

See how it works (video demo)









Video Prototype

Video prototype is an extension of the storyboard. By filming how the product/service could affect the user, it helps people to understand the core value of the design.

The short video clip shows how the mobile application "OneBusAway" could help user arrive at their destination on time.







Behavioral Prototype

Behavioral prototype, or Wizard of Oz, is an excellent way to test the interaction model. Although it takes the time to practice, the behavioral prototype could observe user's behavior in a real-world context.

We used the Wizard of Oz technique to test the gesture control we designed for Netflix. The test was conducted with Kiyana Salkeld and Catherine Jou.





Physical Prototype

The physical prototype allows user and designer to interact with the idea. It is an excellent way to test the physical product design and understand how it fit into the surrounding environment.

The doorbell was built with Arduino, which provides two different melodies and with LEDs to represent different tones.