Prototyping is used as a quick and dirty way to flesh out an idea or test out an issue that you don’t know the answer to. There’s lots of different ways you can prototype ranging from stop motion animations using paper to flash animations to actual prototyping software.

I first started with paper prototyping on a new project with my co-worker & UX Strategist, Alli Dryer. We wanted to find a good layout for existing content for an iPad app. We used a mix of paper, crayons and a few printed out mockups and placed them in an iPad sized paper frame. This allowed us to quickly play with different layout options and get a feel for how each section could move. This helped rule out layouts that didn’t feel right in the device pretty quick and hone in on a few that we could play with further. It was a time saver for us and the developer.


You have to keep in mind to NOT spend your precious time making this thing. Your inner OCD will appear as you’re cutting out pieces of paper as you realize they don’t equally match. Don’t worry about this! Remind yourself that these are never works of art, they are merely to get the idea out there and once the idea is established, it WILL be thrown away as new ideas are branched off from this one.

The next iteration was testing out various interactions; this is just playing around to see how things work. It’s fast paced; you get a quick confirm (this totally works!) or deny (oh god, don’t ever do this again!). We really didn’t want to involve the developers in the testing phase of this cause it would really be wasting their time. It was best for us to just figure out what we could on our own, and then talk to them to test out our findings.

For this we used the app iStopMotion, it uses a combination of both the iPhone and iPad. I set up a tripod and positioned the iPhone using a Glif mount. This is what we used for the camera. The iPad was used as a base station, allowing us to play with the exposure, focus and taking the actual shots. The result was a quick stop motion video that mimics actual interaction enough to tell if it was something we wanted to move forward with or try something else.

Once the app was in the design phase, we started putting the comps in Field Test. This tool allows you to upload comps, apply tappable hotspots that animate with touches and gestures. You can share this project via mobile friendly link, where you could present the prototype on an actual device. This gave the client a sense of the look and feel of the app, so they weren’t just looking at flat comps. Although there were some limitations to animations, this became our living spec document.

Sometimes just verbally explaining animations with various swooshing noises and crazy hand gestures receives an audience of blank stares. Flash or any other animation software is really handy when you’re trying to explain how screens should transition between each other. This is also something that you REALLY have to get right or it’s just a completely wrong and horrible experience. With this knowledge on my shoulders, I had to get the animation right (or pretty dang close) to show the developer. There was a ‘No Jankyness Allowed’ standard that we wanted to live up to. You can see below one of these animations:

Prototyping is great for design iterations, but it also a great tool to help others understand your idea concretely. Prototyping allowed us brainstorm many options until we were ready to plunge ourselves in the app process. It also allowed us to fail without going in too deep and wasting time. Prototyping gave us something to show the client so they could see how things were going to function in the app, before the app was built. This also gave the client something to show to their team internally, making approvals to go by a little smoother on both sides.

This is also cross posted to my company’s blog

(originally published on thoughtbrain)