KINECT x THREE LITTLE PIGS

Reading Like It Was Meant To Be
Sharing a storybook with a child can be one of the most rewarding experiences a parent can have. When an adult reads with a young child, they provide a host of well documented benefits that support a lifetime of good reading habits. We asked ourselves how we could take advantage of the functionality of the Kinect to enhance the reading experience between a parent and child.
The result is The Kinect × Three Little Pigs, an interactive storybook that explores new ways young readers can enjoy a shared reading experience. Our interactive book is designed to captivate young readers through graphically enhanced narratives and engaging interactions that is reminiscent of reading with an adult. 


TEAMMATES

Aaron Calzado, Daphne Hsu, Kim Lewis, Jillian Moses 

MY CONTRIBUTION

RESEARCH: secondary research, environmental scans, task analysis
INTERACTION DESIGN: concept development, gesture development, storyboarding, user flow
VISUAL DESIGN AND PRODUCTION: color design, inking & coloring, sound recording

DESIGN CONCEPT
We crafted a version of The Three Little Pigs designed to engage early readers in an interactive experience while maintaining the familiar structure and flow of a traditional narrative. Unlike other interactive experiences, our book maintains the linear structure of conventional storytelling but affords the child an opportunity to immerse themselves in the narrative.
RESEARCH & DESIGN OBJECTIVES
As with any good design project, we began with the research. Taking a deep dive into the academic literature on early childhood reading, we identified key factors that produce good early readers and makes the experience of reading with an adult so special. Based on our findings, we decided to design around the following features:

ENGAGING VISUALS

We made an early decision not to create another animated game; instead we wanted to keep the look and feel of a traditional storybook but with a twist. We discreetly added dynamic content to specific elements in the storybook to enhance the storytelling experience without dampening the reader’s imagination.

Dynamic visuals connect text with the story.


READ AT YOUR OWN PACE

Paired with the Kinect’s capabilities, our interactive storybook adapts to the level of involvement exhibited by the reader. By standing up, the reader has the ability to take control of the story, exploring words and objects. This engagement allows them to truly immerse themselves in the interactive reading experience. Alternatively, should the reader desire a more passive experience and simply wishes to be read to, the Kinect can sense the lower activity level and continue the story without additional prompts.

Active State


Rest State


GESTURE GUIDANCE

An important component of our interactive storybook is the visual cues that prompt our readers to perform specific functions. One method we use to achieve this is a small pig avatar in the lower left corner.

DO YOU HAVE A QUESTION?

Children learn by asking questions. Incorporating behavior children will be learning in the classroom, the child is able to initiate a question by raising their hand. The screen will gray out, except for the content with definitions in the system. For example, they can highlight a portion of the text in order to have it read to them or select an object to hear its name and receive a definition.

Just like reading with an adult, the child can interrupt to ask a question.


BREAKING THE FOURTH WALL

Manipulation of the ‘fourth wall’ though the characters’ interactions with typographic elements highlights the relationship between the written word, the images and ideas they relate to, and the narrative structure. This has been shown to enhance word/object correlation and is an integral part of the experience a child has while reading with an adult.

Breaking the ‘fourth wall’ emphasizes story progression.


DESIGN PROCESS
Developing a gestural language: we explored an array of possible gestures we could use in our interactive storybook and decided to make the gestural inputs a supplementary feature that give children the option to either read passively or actively interact with the storybook.
Ultimately, not every gesture shown in this section made it to our final design. We narrowed our selection down by removing gestures like “Hug” and “Hold (Items from Falling)” since these gestures were being occupied by more important functions that played a more significant role in progressing the story.

INITIAL CONCEPT

We explored key interactions through storyboarding and then produced lo-fi video mock-ups to visualize and critique our ideas.

INTERACTION FLOWCHART

I created a task flow based off of our group meetings and discussions. This flowchart formed a rough outline to plan out the different interactions we thought about including into our interactive story book.

CONCEPT DEVELOPMENT AND VIDEO PROTOTYPING

During the early stages of concept development, we drafted storyboards and produced rough video cuts to quickly present our design ideas. Instead of illustrating diagrams, we found that filming ourselves was a great way to prototype gestures.

An animated storyboard depicting the user asking the system a question and reading text word-for-word. 

DEVELOPING A VISUAL STYLE

Our graphic style was inspired by our favorite storybooks while embracing the new visual capabilities of the Xbox 360 and Kinect. We wanted young readers to feel connected to the characters and experience the sensation of reading while interacting with our book. To create a storybook feel for our target audience, we analyzed visuals and illustration styles found in popular children’s entertainment.

Visual style mood board


DEVELOPING A TYPOGRAPHIC STYLE

Some of the main elements of our graphic style include breaking the fourth wall, dynamic and interesting perspectives, playing with typography, and maintaining a simple sketch-like quality to our illustrations. We felt that this style was appropriate as it would maintain the interest of our young readers and emphasize the importance of the printed word. We focused in on these techniques by examining several popular children’s books and television shows.

Typography mood board


TRANSLATING THE STORYBOOK EXPERIENCE FOR THE DIGITAL AGE

Children’s storybooks are built on rich visuals that reach out and engage young viewers. In our storybook, we intended to create rich visual landscapes that children can explore. In any given scene, children will be able to pan through the spread and examine the page and its objects in detail.

Storybook mood board


SETTING THE MOOD WITH COLOR

We chose a few simple, cohesive color palettes for our story. The general background contains a muted texture to imitate the feeling of a storybook and keep an analogous appearance across scenes.

Color palette design by Dave Opincarne


SYSTEM TYPEFACES AND TYPOGRAPHY GUIDELINES

For the typography in our interactive story we chose several different typefaces that would work well together, yet provide enough contrast for the reader to recognize shifts in dialogue. We chose to display body copy in Archer since it is a friendly slab serif that matches the visual style of a traditional storybook and fit well with our visual objectives.

System typeface – Archer


LITTLE PIG TYPEFACE

For the dialogue of the pigs, Gotham Rounded was selected. We felt that it reflected their cheeky personalities, and the roundness was reminiscent of a pig.

Little Pig typeface – Gotham Rounded


BIG BAD WOLF TYPEFACE

And finally, for the wolf’s dialogue, we chose Tungsten Medium because it reflects his tough exterior and cunning demeanor.

Big Bad Wolf typeface – Tungsten Medium


ADDITIONAL USES OF TYPE

In order to keep the child interested in the content of the story and focused on reading, we added many playful elements to the type. For example, when the wolf comes to blow down the pig’s house, the reader is prompted to repeat the sentence, “Then I’ll huff, and I’ll puff, and I’ll blow your house in.” The type grows larger as the child’s volume increases, adding to the playfulness.

 

Dynamic use of type adds inflection

Occasionally, words and type become an informative tool for learning about peripheral objects within a scene. For example, when young readers pull a turnip out of the ground, the bottom half of the vegetable reads “turnip” – creating word-to-object association.

Creating word-object association with text


PUTTING IT ALL TOGETHER
In order to demonstrate our design in context and to showcase the value of our interactive storybook, we chose to produce a concept video.

FINALIZED VISUAL STYLE

Sample still of our proposed visual style


CREATING A VISUAL PROTOTYPE

Video prototype storyboard by Kim Lewis


The final video prototype