Handy Manny Flash Cards

An Educational iPhone App for Disney Channel

Handy Manny Flash Cards was an educational mobile game I designed as a spec project for Disney Channel, encouraging children to learn Spanish using themes and characters from the popular cartoon show “Handy Manny”.

The Challenge

One of True North’s creative directors came to me with a general concept for an iPhone game to pitch to Disney Channel to promote their Spanish-language-infused TV show Handy Manny. The idea was to create an app that used flash cards to help children learn Spanish while getting to know more about the show and its characters. It was up to me to take it from there.

My Role

I was the sole designer on this project, and took on every relevant function through mockup delivery, including:

  • Content & Experience Strategy. I researched the target audience for the show (4-9 year-olds) and studied the show and its brand. I used this information to plan relevant content for the app and to shape an engaging audio-visual experience for its users.
  • Interaction Design. I planned how users would step through the app and interact with it on every level by devising wireframes that annotated various layers of visual and audio components, including character voice-overs, help dialogue, and sound effects.
  • UI Design. I designed the look and feel of the app interface based on the show’s branding and visual style.

Content Research

Before jumping into any designing, I spent time studying the show itself, getting to know the Handy Manny themes, characters, and storylines by watching several episodes. I also researched the target audience (toddlers and their parents) in order to develop an age-appropriate and community-driven experience.

Handy Manny content research

Experience Strategy

At this stage, I began to envision the kind of experience I thought would fulfill the dual objectives — to help fans of the show learn a new language and to further their interest in the show. In this project, I saw content being an integral part of that experience, and I decided that a Categories screen would be a good way of allowing children to gear their learning toward specific areas of interest. (Using theme or subject selection is a common didactic tool used to make comprehending a new language more fun, and I chose the themes based on what I deemed to be important in the show). I also ascertained that some of the children watching the show might come from bilingual families, so I decided that the app would work in two ways – to learn Spanish or to learn English.

It was common knowledge to me that learning a foreign language should not just involve reading words and seeing images, so I came up with ways for the app’s users to hear how the words should be spoken. I included a pronounce button and designated that voice clips from the show would be played at the same time that cards are displayed. I provisioned tooltips and voice dialogue to help users along. And for convenience, I designed a settings screen that would allow parents or kids to control how and when sound is used.

Wireframes

Using Omnigraffle, I created a series of wireframes to plan the overall architecture and to document the user flow and various non-visual extras in the app. 

Mockups

After studying and collecting various graphics and branding elements to serve as inspiration for the interface design, I created high-fidelity mockups of each frame of the app in Photoshop. The following are a selection.

Handy Manny mockups 1 Handy Manny mockups 2 Handy Manny mockups 3

Retrospective

The designs I arrived at encapsulate how I effectively translated content, linguistics, and brand research into a compelling user experience.

Handy Manny iPhone app promo

This was one of my favorite projects as it allowed me to delve deeply into content and to take on the mindset of the user, almost becoming a fan myself. The research inspired a design that feels true and appropriate for the audience. I find that taking a “content-first” approach, in which story elements help shape the experience strategy as well as the visual design, ultimately results in the best outcome.

Future Steps

If this project were cleared to continue, my next step would be putting together a clickable prototype to test with real users. I would make adjustments based on my observations and then progressively enhance the prototype with audio elements.