App for App: Prototyping With iStopMotion

by Megan -

Every now and then we come across truly unique ways of using iStopMotion. Case in point: using iStopMotion for iPad to prototype another app. Think about it – you have a really awesome idea for an app, but where do you begin? You need to communicate that idea to others who can help you develop it, but as our friend Jenni Leder puts it, “Sometimes just verbally explaining animations with various swooshing noises and crazy hand gestures receives an audience of blank stares.” That’s where iStopMotion for iPad comes in.

Jenni is an art director for Bottle Rocket Apps, a mobile app company responsible for a seriously impressive collection of apps. A big part of her job is conceptualizing app ideas then presenting them to clients. So rather than playing out a frustrating (and mortifying) game of charades, Jenni creates prototypes. In stage one of the prototyping process, she and her “partner in crime” Alli Dryer dumped out the elementary school art sets of yesteryear to create some paper mockups. She says, “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.

Once they nailed down a few solid ideas, Jenni and Alli moved on to phase two: testing out various interactions. Here they used iStopMotion for iPad, which allowed them to quickly create stop motion animations mimicking the actual interactions between app elements. A natural progression from their paper prototypes, Jenni and Alli were excited to be able to use iStopMotion for iPad in their creative process, as it essentially filled the gap between paper prototype and design phase, allowing Jenni “to test out how an animation or transition might work in an app before bothering a developer to see if it's even right to use for the project. Now it’s the first thing Alli and I turn to when we're starting to work out an idea.

She adds, “iStopMotion has been a really great tool for communicating animations and transitions when we’re planning and building apps. Sometimes it’s hard for my co-workers and I to verbally explain to the developers or clients exactly what we’re thinking. It's easier to just show them what we're talking about visually. iStopMotion is great because I can just build something with paper (or other materials) really quick and easy to show exactly what I was thinking. I'm not an expert at any movie making software – I generally stick to iMovie when the need arises – so I was really thankful at how intuitive and easy iStopMotion is.”

As for their prototyping animations (like this, and this), Jenni says, “These are not perfect, but the idea of prototyping is that it's not a finished product. It's merely a tool for getting your idea across quickly. Sometimes you find out that the idea just doesn't work for the project. It's so much better to test your idea out this way, rather than wasting the developer's time coding the project, tweaking the animations, and then finding out that it doesn't feel right. When the idea does work though, you can show it to the developer and they can code the animation off that, rather than making various swooshing noises, crazy hand gestures and getting raised eyebrows from the person you're explaining it to.”

Read more about Jenni and her team’s prototyping process here and follow her on Twitter!