Rapid Prototyping



This page features the prototyping skills and tools I've picked up. Prototypes are great for thinking and communicating about design. The prototype's purpose and intended audience are key. There's not a one-size-fits-all to prototyping — each tool has its pros and cons.

I enjoy prototyping because it's design by making. Whether it's digital or creating something physical, it's applicable to all parts of a product's development cycle. Problems with your design can be uncovered as you create the prototype. Prototyping also invites different types of feedback (dev team, stakeholders, end users). Developing your prototyping skills give you the flexibility to make prototypes that drive the design forward.

Behavioral Prototyping (Wizard of Oz)


The Wizard of Oz technique is effective in testing a design concept when the actual technology does not exist or is too expensive to develop during the design phase. Instead, someone plays the role of the technology that the user unknowingly interacts with. 

In this prototype, we were evaluating a set of hand gestures that would control an Apple TV and basic TV functions. We connected a GoPro to an Arduino kit that acted as the sensor to recognize gestures. I was the wizard and was executing the participant's gesture commands. We setup a FaceTime call between two laptops so that I could have visibility on the participant without revealing my role. 

Takeaways: We were successful in our emulation of a gesture recognition platform. It drove the point home: you don't need expensive or fancy prototypes to get valuable feedback. Our participant gave valuable feedback on scenarios he would use gestures versus controlling everything by the physical remotes. We also noticed our participant fully extending his arms out while gesturing. My hunch is that this wouldn't be comfortable for a longer period of time. We never indicated that this was necessary, so it would be something to observe in future tests.



Prototyping in After Effects


I wanted to expand my prototyping toolset by creating different mobile animations in Adobe After Affects. This is a versatile rapid prototyping option to provide stakeholders, developers, or clients a quick visual of a particular interaction.



Slide-out rotating hamburger menu for my theoretical native portfolio app. The rotation of the hamburger stack draws attention downward to focus on menu items. 

What's good: Standard convention, simple animation translates into developer code

What's not so good: Out of sight and out of mind, less efficient 



Beginning in Photoshop, I created a simple UI for a daily coffee app. Using a vector mask in photoshop allowed me to create a reveal that pushes the other two clickable items away. When the user clicks on "What beans today?" the recommended bean is shown.  

What's good: This type of animation acts as a gateway that draws the user in, saves on real-estate space when scrolling (e.g. gallery or menu of items), simple animation translates into developer code, 

What's not so good: Non-standard convention, users must learn by doing (lower discoverability)

Paper Prototype


There are many benefits to paper prototyping. It costs little to none to make, you can incorporate feedback quickly into another iteration, and no software or coding is required.

One bus away (OBA) is a useful smartphone app that provides real time transit information (e.g. arrival times, delays, service issues). It’s not as useful on a rainy day because your phone ends up getting a good soak on your way to the bus stop. Instead, if you have an Apple Watch you can set alerts on your watch to let you know that your bus is arriving.

Need to find the nearest bus with a specific route? No problem, ask Siri and Siri will help you find the nearest stop. On top of that, Siri provides turn-by-turn directions so you don’t have to pull out your phone in the rain.

Using this prototype for a quick usability test allowed me to determine if the companion watch app would be useful to someone who uses OBA and refine the user flow. 


Takeaways: If I were to iterate upon this concept and prototype, I’d look into displaying bus schedules on the watch. I understand that the watch primarily displays notifications given the limited real estate and is still heavily dependent on the smartphone. However, it could be possible to allow a person to cycle through different stops to see arrival times and other statuses.

I'd also look more into the interaction with Siri via the watch. For turn-by-turn directions, Siri has to recognize quickly to use OBA as opposed to other means to re-route a person to a different stop. Siri or an equivalent become a crucial part of the experience because of the constraints that arise from the form factor and limited real estate for smart watches. 

Lastly, using a strip of paper to be the watch screens is efficient for the tester. However it leads to usability testing issues because the participant is able to see what comes next. One solution would be to enlarge the watch prototype rather than match a watch's true size.

Video Prototype


This type of prototype is useful in showing what the designer envisions the product or service to be. They are communication tools to show context and some specific use cases. This aligns not only the design team, but also those working on your cross-disciplinary team. It's portable and easily shown to investors, end users, or executives. Lastly, they're fun to make and another outlet to visualize the interaction experience.

The idea of the video was to show the high cost of owning a car. Costs rack up quickly due to car and insurance payments, along with regular car maintenance (oil changes, etc.). Another pain point is that gas isn’t getting any cheaper so the dollars rack up there. Lastly, parking is generally a pain because you are limited in spots if you have a economy sized car or larger, and the hourly rates are quite high in some areas. Sometimes it’s not clear if you can park in a certain area and you end up getting a parking ticket which is yet another cost. 

The video then transitions into life with car2go. No more stressing over monthly payments of any type or car maintenance. You don’t need to worry about gas and parking is stress-free. The value proposition of car2go is that it’s easier to rent car2gos as you need it versus owning your own car. There’s plenty of them around so you never have to worry about finding one. 


Takeaways: This was my first time creating a video prototype. It was thrilling to run around U District to capture footage and a overall fun experience. It is also a challenge to create a video in six days. I learned a lot (mainly what not to do) while filming and would gladly do a version two.

The most important thing I learned from this assignment is that storyboarding is key, and then figuring out what footage you want is a close second. Storyboard, plan, and then plan some more. Next time, I'll list out the different scenes I want to capture. The storyboard definitely helped with this as provided a visual roadmap. Having a nice itemized list would’ve been nice to check off as I went. 

On the other hand, you can't plan for everything. The day I had to record, it was raining. It wasn't the usual Seattle mist but the kind of rain where my camera was getting soaked. I thought that my video was going to turn out poorly because of the weather conditions and lighting. Although rain isn't ideal filming conditions, it isn't a deal breaker.