Skip to content

Video Prototyping

What is Video Prototyping?

Video Prototyping is a tool Interaction Designers can use to tell a story about a design. It allows for the showing of an entire experience through a narrative. Video prototypes can be used to help better show a design in use in a way that many people connect with emotionally and aesthetically.

My Goals

Video Prototyping can be a very powerful tool to communicate a design. However, it can also be expensive and time consuming in order to produce. While some industry players are starting to use video prototyping more, many do not because of the costs involved. With this in mind, I decided to create a video prototype with very little cost in as little time as possible while still providing quality when narrating the experience of my design.

My Process

My overall process for creating a video prototype was to choose/create a design, ideate on how to tell the story of that design, create a storyboard, shoot the video, and then edit and upload that video.

I decided to use a design that I had worked on in the previous (spring 2010) semester entitled GroupView (research overview, design document). This design allowed multiple photographs to come together and learn from and teach each other. It connects their various cameras to an iPad application and allows for on-the-fly editing. As this design never previously made it to a full prototyping stage before, I had to iterate briefly on the design itself before bringing it into a video prototype.


After iterating on the design, I came up with some basic ideas on how to tell a story about the design. I quickly sketched out a basic narrative using 6 post-it notes and asked my colleagues for feedback. With this feedback I created a storyboard of my video prototype, using post-it notes on a sheet of foamcore so that I could rearrange and iterate quickly as needed.


Shooting and Editing

With the storyboard in tow, I gathered a couple of students and starting shooting the video. I had quickly scouted out a place to shoot and informed my ‘actors’ of their roles as we walked to the location. From there I directed my actors and shoot several takes of most of the scenes. I quickly learned here that having my shoot broken up into scenes greatly speed up the process of shooting. I was able to shoot the entire video in about 25 minutes.

In keeping with my goals I decided that the quickest way to edit this video was to use iMovie. iMovie provides a good quick interface for putting together a decently polished video. Spending just 4 hours total, including make a couple of graphics in Photoshop, I was able to create my video prototype from raw video footage.


I’ve found through this project that video prototyping can be a very compelling way in which to show a design. It allows stakeholders, users, developers and others to quickly understand the experience of a design. Some major drawbacks are that it costs (time and resources) a bit more than other forms of prototyping. However, by being mindful of these costs I think a video prototype can be created fairly easily. In the future I would be more mindful of my lighting sources, as there are several annoying reflections within my video. Scouting multiple locations could also help to provide backup plans for when a primary location doesn’t work out (as in it’s too sunny outside to see a screen, etc). Furthermore, storyboarding should absolutely be done prior to shooting as it cuts down video production (shooting and editing) time by a large factor. Without having properly storyboarded my design I would have spent much more time shoot and editing the video. Overall, I am happy with my process and have proved to myself that compelling video prototypes can be made with little resources and time.

Final Video

Below is the video prototype for GroupView. I would love any comments and critique on the video itself, as well as my process.

Give A Crit – Sketch

I’ve been sketching and thinking deeply about my capstone project lately. I’ve done close readings of web based critique systems like Flickr, Deviant Art, Dribbble, etc. I’ve also been talking recently about the value of quickly prototyping a design. So tonight, I took a recent sketch of my capstone project, Give A Crit, and created a quick (non-interactive) prototype. This took me about 40 minutes using Keynote templates by Keynotopia, just one of many providers of keynote templates for prototyping. So, I present here, for your critique, a quick prototype sketch of Give a Crit, specifically of the critique functionality.

One main thought behind this sketch is to provide some ambiguity of the design so that photographers giving critique can provide meaning as they see fit. Furthermore, this sketch is totally lacking in the photograph’s technical details, which I believe will add value when giving a critique. These technical details could live below the photograph’s description, but I haven’t put much thought into that feature yet. Click on the image below for a full size version.

sketch prototype of Give A Crit

This project is ongoing and will change by leaps and bounds. I’ve conducted very little primary research at this point. Most of my thoughts have centered around a formal analysis of flickr, facebook, deviant art, smug mug, dribbble, and others. Formalist theories (Bell, Wolfman), Structuralist theories (Hebdish, Polhemus), and Use Quality theories (Lowgren) have also provided some grounding to my work, but will be further expanded upon in the future.

Reflection on Prototyping with Foam

Over the last week and a half in our prototyping class we learned about and started working with foam. We learned about the many different types of foam, their uses, and how people have used foam before. After conducting research on foam with my presenting partner Wes, I started thinking about what design I might want to prototype. I began by sketching out some basic ideas in a very rough format. I then decided that I would prototype an interactive iPad dock that would be used with Adobe software and could double as a tablet with a pressure sensitive pen. I selected this concept because it would force me to use foam in ways that I haven’t before, as well as integrate different materials into the foam.

Continue Reading →