May 03, 2013
Cartoon Network Mobile
Fun and quirky mobile site for browsing shows and watching videos
ClientCartoon Network
GoalTo create a fun mobile-centric website
RoleInformation architecture, interaction design
AgencyMoxie

Cartoon Network wanted a mobile site that exuded the fun and quirkiness of their new site.

They wanted a playful, mobile-app version of their desktop site that focused on getting show information and watching clips. They also wanted the mobile site to drive more app downloads.

I began concepting by sketching many different conceptual homepages and basic navigatoinal interactions, ranging from more traditional layouts to other more app-like layouts. I iterated some of the more interesting concepts, using paper cut-outs and tape to simulate some of the interaction, and eventually landed on two designs that I liked and worked well. The final sketches were presented to the client, who chose the final design presented here.

Once the paper prototype was approved, I transferred the sketches into wireframes in Adobe InDesign. Once the main pages were wireframed, I wanted some buy-in from the rest of the design and technical team to support the concept, and prove the concept would work, so I created a quick proof of concept prototype using the wireframes and Raphael JS, to both show how it would work, and to demonstrate that my idea was technically possible. Since we did not have a budget for user-testing, the prototype was informally tested with mentoring students at the office.

After the prototypes were built and I received buy-in, more details and screens, including a flat non-Javascript, Blackberry-friendly version, were fleshed out with input from our clients, culminating into an approved wireframe document. I then helped guide a graphic designer and a developer to translate the wireframes into a final product.

Summary of work

  • Conceptualized, translated site requirements into a final design
  • Sketched, and iterated various layouts
  • Created a proof of concept prototype for team buy-in
  • Created core interaction concept for the user experience
  • Produced several rounds of iterative wireframe designs
  • Collaborated with designers and developers to finalize the site