CNN ELECTION CENTER
FOR iPAD & iPHONE

UI DESIGNER for BOTTLE ROCKET APPS - 2012

AN ELECTIONS CENTER FOR A NEWS APP.

Co-created with Alli Dryer, we worked closely together to design the Election Center experience. We used a combination of sketches and wireframes along with a series of rapidly produced, iterative, lo-fi (then increasingly hi-fi) prototypes. The prototypes allowed us to quickly communicate ideas and transitions to the client. They also made it easy for the client to present the project to stakeholders and to perform structured user testing to gather feedback on the app. I also wrote a blog post detailing my prototyping experience on this project.

Featured in the iPhone 5 Apple Keynote presentation.

LOW-FI INTERACTIVE SKETCHING

With limited access to CNN's in-house developers, we used with what I call interactive sketching. A mix of paper, crayons, and a few printed mockups were placed 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 us to quickly eliminate layouts that didn’t feel right and hone in on the best solution. 

STOP-MOTION PAPER PROTOTYPING

Created with the app iStopMotion, which uses a combination of both the iPhone and iPad. The iPhone is placed on a tripod using a Glif mount, which becomes the stop-motion camera. The iPad is used as a base station, providing the ability to play with the exposure, focus and actual photography.

ANIMATED PROTOTYPES

I really wanted to create an animated transition when the user swipes up to read the rest of an article. I had to get the animation right to show the developers and make them understand the details of the transition. I prototyped this article animation in Flash to illustrate how the transition should work between the pages of an article.