Curious George Multi-Touch Series
-

He’s a monkey that needs no introduction, especially when seen with his best friend The Man With the Yellow Hat. George has been monkeying around since 1941, and his brand and stories have remained with publishing house Houghton Mifflin Harcourt (HMH). The publishing industry has seen a rapid shift in the way people consume content. The shift from print to digital, and the seemingly infinite supply of interactive content, has contributed to a drop in parents reading to their children.

THE PROBLEM:

with the mainstay of technology in the publishing industry, curious george needed an interactive option to “traditional” reading.

The role of tech is not the only reason for the steady decline in parents reading to their children. The downturn may be a result of parents lacking access to new books. Also, parents are finding it harder than ever to find time to read to their kids, often struggling to have the energy to sit down and read, and getting home late when children are asleep. Books come in print, ebook and audiobook formats; however, most parents find time to play with an app or a toy instead of sitting down and reading. So, for this project, since I had the flexibility of experimentation, I enacted one of my favorite UX mottos: “If you build it, they will come.”

Bite-sized
summary
-

The Curious George Multi-Touch 14 book series took one year and six months to complete, and even though I’ve gotten to work on huge projects with clients like Chase and KFC, this is still one of the projects I’m most proud of. The goal was to design a fun, educational and immersive reading experience that brought parents and children together to read, and it absolutely succeeded. Seven years later, I feel so proud, impressed and accomplished when I interact with these books that are still featured in the Apple Book Store:

• 14 Books

• 50+ Animations

• 100+ interactive mini-games designed and developed

• Apple Editors’ Choice - Curious George's Dinosaur Discovery

• Apple Editors’ Choice - Curious George Says Thank You

• Top 5 iTunes Paid Books Charts

• iBookstore - BEST OF 2012 - Curious George in the Big City Multi-Touch Edition

Objectives
-

Books should be divided into two sections: an interactive reading section and a themed activities section

Each book should contain mini-games, animations, audio and interactive layouts for mutual adult and child enjoyment

Utilize the new Apple iBooks Author software

All components should be bite-sized for short attention spans

Books should be priced at an appropriate and accessible price point

The Curious George brand should not be distorted in any way (e.g. George never uses technology)

Challenges
-

Constant bugs in software and hardware compatibility

Creating animations out of flat illustrations

Developing and packaging custom buggy widgets

Project Manager having improper expectations and understanding of the development and design cycles

Modifying a square format book and its assets into the 1024x768 iPad spec

from print to digital to interactive

Innovate Always, in All Ways
In various roles throughout my career, I’ve always been driven by a desire to innovate and push design. Such was the case in my role as Digital Designer at HMH. While I worked on visual design projects for literary champions like C.S. Lewis and J.R.R. Tolkien, I really wanted to carve out an experimental space, to push the boundaries of print and e-books.

Supported Efforts
Conveniently, my goals to submerge myself in new softwares (iBooks Author, Hype, and Audacity) and to evolve the traditional e-book aligned with the decline of parents reading to their children. HMH took interest in the project and supported my experimental efforts.

I researched publishing sales data and anecdotes from teachers, parents, and psychologists that pointed to the issue of language development and the decline of quality family time outside of TV, movies and the like:

”Parents don't read at home. They buy the kids iPods, expensive phones, and all kinds of electronic gadgets, but few parents are modeling reading. Even the kids on free lunch somehow find the money for a three hundred dollar iPhone, but not a free library card or an eReader.” - J. Richard Gentry Ph.D. Psychology Today 2011

With flexibility to experiment and access to specialists in learning design, I delved into the world of Curious George.

new territory and its challenges

iBooks Author
The new publishing software was less than a year old (launched January 2012) when I began this project, and it was seldom being used despite its uncomplicated UI. I quickly learned how to layout text and images, and use their built-in widgets.

Using iBooks Author (iBA) presented an obvious opportunity for promotion in the Apple Book Store. Apple wanted publishers to use their software, so any iBA book that excelled in its use would likely be highlighted. Though, there were challenges with using this new software like the lack of supporting custom HTML code, black-listing video formats, and the sheer fact that no one had really used it!

Hype, Widgets and Custom Code
After researching prototyping tools that could export HTML, I stumbled upon Tumult’s Hype which specifically exported iBA widgets! I utilized the timeline feature to create animations and rapidly prototype various screens for mini-games/activities. The most exciting piece was embedding my custom javascript and HTML to allow for tracing letters, digitally painting within the lines and more.

Brand Limitations and Creating Digital Assets
With George on my side, I knew these books would likely float to the top of children’s book searches. He’s a character who is greatly loved and well known. However, with George came a very strict brand guideline that presented issues - for example: iBooks Author had typeface limitations, so the custom Curious George headline font and the ubiquitous use of OptiMajer presented challenges. All custom typography had to be imported as images with alternate text to support accessibility. In addition, George had no UI assets for such projects, and I had to create an approved library of buttons, icons and more.

I created animations out of flat illustrations, so if ducklings waddled across the street in the story, I had to extract each duckling from the background. The problem? The background was never illustrated without the ducklings, so I had to recreate and photoshop hundreds of illustrations. It was this kind of thought and detail that went into each component of these books.

process

Choosing a Book
Curious George currently has over 100 books in his repertoire that span multiple languages. Fortunately, HMH houses all of these titles in an in-house library. After reviewing sales and title popularity, my Project Manager and I went through the library and selected an initial five books, including Curious George Says Thank You. We specifically chose the aforementioned book due to its back cover that translated how to say “thank you” in a many languages; the message of diversity and learning was a clear representation of the brand, so that was our first selection. Going forward, we chose titles that touched on fun topics or were appropriate for the time of year.

Brainstorming and Annotating
Each book was post-it-noted to annotate potential:

1. layout modifications

2. illustrations that would lend themselves well to animations

3. moments of interactivity (mini-game or inserted audio)

4. ideas for the activities section

Each book often included an activity on its back cover, which was usually our starting point of inspiration. We studied learning theories (keeping interactions short, using lots of tappable elements and embracing color) to create our catalog of widgets, and narrowed down our final layout changes, interactions, animations and activities.

Making Something out of Nothing
I created animations out of flat illustrations, so if ducklings waddled across the street in the story, I had to extract each duckling from the background. The problem? The background was never illustrated without the ducklings, so I had to recreate and photoshop hundreds of illustrations. It was this kind of thought and detail that went into each component of these books.

Layout and Storyboarding
After re-laying out the square-format text and illustrations to the ipad spec, I had to identify the user experience of each of these widgets, annotating the journey, and carefully storyboarding. After I reviewed the UX with my project manager, I started cropping, photoshopping, designing, developing and building the book’s components:

Dynamic Layouts
-

Images and text were exported from the epub
-

Images and text were edited to fit the rectangular ipad spec, and pages that had consecutive similar layouts were consolidated using the iBooks Author’s slideshow tool

Tools

epub Extractor

iBooks Author

Photoshop

Short
Animations
-

Selected illustration was dissected into object and background components

Components were brought into flash and individually animated along the timeline

Flash animation was exported into images, seamed together, and then converted to the m4v format

Audio files were chosen and layered onto the video file

Animation was dropped into iBooks Author

Tools

Photoshop

Flash

TimeLapse

Quicktime

Audacity

Educational Interactions
-

Mid-story concept was approved and storyboarded

Book’s illustrations and stock illustrations were selected and edited

Components and instructional text were laid out in illustrator

Exported illustrator screens were storyboarded in Hype

Audio files were chosen and imported into Hype

Widget was exported from hype and imported into iBooks Author

Tools

Learning Theory

Storyboarding

Photoshop

Illustrator

HTML

Javascript

Audacity

Hype

iBooks Author

Activity
Widgets
-

Book’s widgets were brainstormed and designed with learning theory

Book’s illustrations and stock illustrations were selected and edited

Components and instructional text were laid out in illustrator

Exported illustrator screens were storyboarded in Hype

Developed custom code for widgets involving drawing

Audio files were chosen and imported into Hype

Widget was exported from hype and imported into iBooks Author

Tools

Learning Theory

Storyboarding

Photoshop

Illustrator

HTML

Sublime Text

Javascript

Audacity

Hype

iBooks Author

success, awards and longevity challenges

Top Three
Within hours of submitting Curious Georges Says Thank You - the Multi-Touch Edition, it rose to the number three spot behind Diary of a Wimpy Kid and The Hobbit. It felt surreal to see the response. Book after book, my designs and hard work were ranked in the book store and were given awards such as:

• Best of 2012

• Apple Editor’s Choice

• Top 5 Sales

Inspiration to create a new and interactive CuriousGeorge.com
When starting this project, I really had no resources to understand how to design or build this type of immersive experience. It was a combination of strategy, learning theory and instinct that propelled this project forward. The accolades and sales provided me with reassurance that I had done a great job with the 14 book series, but after recognizing the interest in more interactive content, HMH decided to invest in creating a brand new curiousgeorge.com! HMH’s business decision and investment confirmed to me that parents will find time to read with their children, if the content lends itself to an immersive and enjoyable reading experience!

Dedicated Curious George Multi-Touch Room and Promotions
As the books continued to gain popularity, Apple gave George and his Multi-Touch books their own space in the iBook Store, and Apple selected many titles for promotion.

Hardware, Software, Time and Bugs
iBooks Author was less than a year old when I took full advantage of its capabilities. Like almost all softwares, iBA changed over the years. It dropped support for video types, deprecated certain audio formats and developed bugs with many devices. When I left HMH, the books were never maintained, resulting in minor issues with some widgets and animations. Nevertheless, I’m still very proud of the work.