The Little Bug is an interactive storybook app for ages 3 and up, created by Jackie Littman.

In this project, I combined narrative with digital interactivity to create a more meaningful learning experience. I established and applied best practices for children’s app design throughout the entire process: writing the story, creating an original typeface, animating hand-painted illustrations, designing the interface, and coding the app.

The Little Bug is currently in development and will be coming to the App Store soon. Follow the progress at:

Research

When planning the project, I read articles about designing apps for children, researched game theory, and surveyed existing children’s apps on the market. The market for interactive apps for kids has exploded in recent years along with the popularity of mobile devices like iPads and iPhones. Portable devices like tablets have emerged as sought-after teaching tools in schools, with many school systems investing in truckloads of iPads for their classrooms.

Despite the enthusiasm and demand for educational app content, there are a lot of mediocre apps on the market for kids. Observations about interface design and game theory guided my design decisions throughout the entire process of creating my own digital storybook app. I used my research to define a set of best practices in children’s app design.

BEST PRACTICE #1

Clearly identify interactive items using
minimal instructions.

Items on screen should be given a distinct visual quality that signifies that they are touchable. This can be indicated through an animation, like a wiggle or sparkle, line weight, color, or illustration style. If an interactive item is hard to find, animations or auditory suggestions can be timed to activate after a few seconds of inactivity to guide the user. This allows the designer to cut down on extra instructions, and encourages the child to interact with similar items.

A Dad’s Plea To Developers Of iPad Apps For Children by Rian Van der Merwe. Smashing Magazine.

BEST PRACTICE #2

Provide encouragement and feedback even if there are no right or wrong answers.

When actionable items are activated on the screen, something should happen that makes sense—usually a visual or audible response. Visual and auditory feedback should teach patterns of interaction and encourage exploration within the app. When completing tasks, kids respond well to praise, reward, and positive encouragement.

Designing iPad Apps for Preschoolers by Alex Morris. Net Magazine.

BEST PRACTICE #3

Build from easy tasks to more challenging ones.

A scaffolded structure teaches users the patterns of interaction early on in the app, and more challenging tasks build on the experiences that have occurred previously. The Sesame Workshop, producers of Sesame Street’s series of apps, recommends establishing structure by clearly stating the objective—as well as how to accomplish the objective—with minimal and precise instructional audio. Though it is important to make objectives clear to kids, there is also value in discovery and exploration. As Karina Ibarra observes, the sudden discovery of hidden features “enhances the joy that preschooler kids need once in a while to delight their curiosity in fun ways and make them notice that there still some hidden areas waiting for be discovered.”

Best Practices: Designing Touch Tablet Experiences for Preschoolers by Sesame Workshop.

Designing Apps for Kids by Karina Ibarra. UX Magazine.

BEST PRACTICE #4

The navigation of a children’s book app should be kept simple, especially on the menu page.

Within the book, clear and simple directional navigation should be situated toward the top of the screen. This helps prevent accidental advancement from wayward tapping or holding the device. In addition, the app should require confirmation when a major program consequence will result, like returning to the beginning or shutting off audio. Most of these decisions are made by parents, so including an intermediary confirmation tap should limit the amount of accidental activation.

A Dad’s Plea To Developers Of iPad Apps For Children by Rian Van der Merwe. Smashing Magazine.

BEST PRACTICE #5

Certain gestures are more difficult for little ones with undeveloped motor skills.

Sesame Workshop, the nonprofit organization behind Sesame Street, determines that the most intuitive touch gestures for kids are tapping, swiping, dragging, sliding, or drawing with the finger. The least intuitive gestures include pinch, title or shake (large devices are unwieldy and breakable), multi-touch, flick, and double-tap.

Best Practices: Designing Touch Tablet Experiences for Preschoolers by Sesame Workshop.

BEST PRACTICE #6

It’s a mistake to treat kids like they are dumb grown-ups.

Today’s kids grow up with technology constantly at their fingertips and should not be underestimated. Kids’ products need kid testers, and they need to be tested early and often. Developers need to make adjustments based on the way kids actually behave with the app, and test with young people of different ages. As a general rule, the smaller the kid, the bigger the button.

12 Golden Rules to Design Awesome Apps for Children by and Daniel Kondo and Francesca Cavil. 500 Startups.

BEST PRACTICE #7

Children’s apps should be accessible and relatable to kids of diverse backgrounds.

Children’s content makers face a challenge in creating characters that are relatable to children of all backgrounds. Unlike books, apps can allow for the customizations of characters or avatars. The Pop-It app by Indian artist K.K. Raghava presents the user with a series of tableaux of parent/child interactions. The user can shake the iPad to randomize the gender and race of the parents, celebrating the diversity of types of families and giving children and parents a tool for discussing these ideas with their kids. The industry has pushed away from the kinds of characters that perpetuate gender stereotypes—highly successful apps by Toca Boca have unbeautiful and oddball human avatars that are sometimes androgynous or animal-like.

BEST PRACTICE #8

Every word is important.

Whether presenting educational or entertainment content to children, the words you choose are building their vocabulary. Proper grammar and spelling are essential to the integrity of the app, and mommy bloggers are quick to decry apps with careless mistakes. Even the typeface chosen can effect the way a child learns to read letters. Type size, leading, and line length contribute to readability, and poor typography can potentially cause frustration and impede use of the app.

BEST PRACTICE #9

Create quality content that parents want to engage with just as much as their children do.

One of my major concerns in producing digital content for little ones is contributing to a reliance on virtual environments and lack of interpersonal skills. I counter that we can create entertaining and educational content for virtual devices that requires active engagement, instead of the passive observation that sucks kids into a virtual vacuum. Children and parents can use an app together, just as they read a book together or play a game together.

BEST PRACTICE #10

Respect the sanctity of childhood and play.

Ethics in app development is becoming a hot topic as more and more little ones get their little hands get on shiny new devices. The Children’s App Manifesto was circulated online in 2011 to address topics of ethics in kid’s app development. In an era where a game that sells in the store for $19.99 is expected to sell for $0.99 in digital form, children’s app creators are faced with a dilemma: undersell content or become more profitable by putting less time and resources into the content and development of an app. The manifesto calls for developers to “respect the sanctity of childhood and play,” by not disguising extra costs in in-app purchases and not manipulating kids into buying things.

The Children’s App Manifesto by Andy Russell
and Daniel Donahoo.

Story

The Little Bug tells the story of an inquisitive little insect’s journey to find his special talent. Early one morning, the little bug hears a curious sound in the distance. He sets off on an adventure through the garden to find out what is making the sound.

As the little bug meets other insects along the way, he realizes that each insect has a special talent. The grasshopper makes music by rubbing its wings; the ant digs tunnels; the bee makes honey; the katydid hides. But what wonderful thing can the little bug do?

Illustration

I hand-painted textures and swatches of color for the illustrations. I needed to find an illustration style that would be easy to break into layers to animate. I painted and scanned watercolor swatches and manipulated them in Photoshop to create layered images. By using separate layers, the parts of the bugs were simple to animate.

Each illustration is made of many layers of digital “paper,” given depth through the judicious use of drop-shadows. I usually would not touch a drop-shadow filter, but it just seemed natural for this project, and blended nicely with the paper textures. The layered, cut-paper look of the final illustrations is whimsical, yet rooted in insect anatomy.

Digital play spaces should inspire and enable children to do what they do best: be children ... with touchscreens at their fingertips and mud between their toes.

Andy russell & daniel donahoo

The Children’s App Manifesto

Typeface

I designed the Katydid typeface in bold and medium weights to complement the illustration style in the app. Katydid has an organic, hand-drawn feel, but each letter’s structure is rooted in typographic anatomy. The typeface was designed with especially for children learning to read.

A high x-height makes the text look larger, even at small point sizes, and enhances readability. The letterforms have generous, rounded counters. A full analysis of the features of Katydid follows. I designed the typeface under the instruction of Tal Leming.

  • FRIENDLY AND QUIRKY
    Playful details like the open bowl of the lowercase ‘g’.
  • OPTIONAL LIGATURES
    Ligatures available in OpenType, but not suitable for very young readers.
  • BOUNCING BASELINE
    Slightly varied baseline adds to the casual, hand-made feel.
  • HIGH X-HEIGHT
    Enhances readability.
  • BIG & SMALL
    Looks great at big display sizes and sets evenly at small text sizes.
  • SLAB SERIFS
    Organic, tapered serifs are inspired by insect antennae.

Development

I developed the app using Adobe’s Flash Pro. I found Flash to be a great solution for a designer to create an interactive storybook app without needing to hire a developer or learn Xcode. Actionscript, the coding language used in the software, was fairly easy for me to learn due to its similarities with Javascript.

All the animation, sound effects, and coding were done in Flash and it was easy to test on-screen and on the iPad. I collaborated with composer Joshua Cipolla, who provided music and sound effects, and voice actor Mike Boland, who recorded the narration.

Essay

At the bus stop in the springtime, I could likely be found squatting low in the grass, eyes fixed on the undulating movement of a furry, striped caterpillar. These creatures crawled and wiggled their way over grass and leaves, up tree trunks, and across the suburban streets of Owings Mills, MD. Their slow and steady lurching made them easy targets for a 7-year-old. I would gently scoop them up and let them crawl around my fingers, enjoying the light tickle of their tiny, suction-cup feet.


I once found a particularly large one in the front yard. He had a mottled pattern of blue and orange and black, a white stripe extending all the way down his back, and tufts of soft rust-colored fur that poked out every which way. He was mine.

I had one of those clear plastic terrariums with a carrying handle. About the size of a lunch-box, it featured a purple lid with a little door that hinged open like a tiny sunroof. There were slits in the plastic for ventilation. Too many kids unknowingly fashioned suffocation chambers for their firefly pets when they forgot to punch holes in the lids of the glass jars. I was no rookie, though, and my caterpillar was going to live in style.

I lined the bottom of the terrarium with mulch and leaves and twigs. I brought him new leaves every day or two, taking notice of the kinds he liked to eat. After about a week I noticed a few silk threads entangling my little buddy, so I helped him out by brushing away the cobwebs.

A few days later, more invasive threads appeared. I turned over every leaf to look for the pesky spider that was trying to entangle my friend, but I couldn’t find anything in the plastic box except my chubby caterpillar and leaves pocked with round, chewed holes.

I had begun to pay less attention to the whole situation, as I was a busy kid, and my failure to find the offending spider was making me feel like a bad caretaker. The next time I looked in the box, maybe a few days later, my caterpillar was gone. In his place was a neat little caterpillar-sized package wrapped in layers of fine threads, adhered to the face of a leaf, inert. I was a failure. A spider must have snuck into the cage. Afraid to touch the mass attached to the leaf, I left the whole box outside with the roof hinged open. I hoped the situation would just resolve itself as nature tends to do.

After recounting the sad tale to my parents a few weeks later, I finally realized what had happened. I slid open the screen door to the porch and raced over to the box. It held only the discarded remains of the cocoon; the butterfly was nowhere to be found.

I had known that caterpillars turned into butterflies. I had learned it in school. But somehow, in real life, I wasn’t able to reconcile the two distinct images of the insects as being one and the same, two parts in a progression. A transformation so complete—from a fuzzy, clumsy, lumbering little worm to a graceful winged flier—was pure magic.

Almost twenty years later, I am pursuing an MFA in Graphic Design at the Maryland Institute College of Art.

When choosing a topic for my thesis project, I thought about my childhood experience with the caterpillar. I decided to design an app that would teach children about processes in nature while preserving the wonder I had felt about nature as a kid. For my thesis project, I created The Little Bug, a children’s book app that tells the story of the transformation of a little caterpillar.

The Little Bug, developed for the iPad, combines an original narrative with lots of interactivity to let the user play out the story as it is read. In the story, a little caterpillar sets off on a journey through his garden when he hears a mysterious sound. The caterpillar meets the other insects that live in the garden and realizes that they all have special talents that make them unique. The grasshopper makes music by rubbing its wings; the ant digs tunnels; the bee makes honey; the katydid hides. But the little caterpillar struggles to find something he is good at doing. He can’t see a path he can take to get there. The caterpillar finally realizes that his special talent is spinning thread, and he is so excited by the discovery that he tangles himself up into a cocoon, leading to his physical transformation into a butterfly.

I initially struggled with the characterization of the little bug. Does he try to be like the other bugs, becoming more and more desperate with each mounting failure? Is he jealous and lazy or curious and persistent? I thought the latter set a better example for little ones, so I tried to present the story in an optimistic way, where the caterpillar is eager to explore the world around him and to try new things.

I thought it would be easy to write a kids’ book. The reality was much more complex. How can you tell a story rooted in science and nature in the simplest words with the shortest sentences and still retain the right mood and message? With concepts like “metamorphosis,” “bioluminescence” and “camouflage,” the odds were stacked against me. Fortunately, I had the support of talented writers (thanks David Barringer, Ellen Lupton, Cindy Kane and Robyn Littman) to help me craft a simplified manuscript that retained a positive message.

By presenting the factual information about bugs through the format of a narrative, I dramatized the science behind insects and nature.

The dramatization of the caterpillar’s metamorphosis will fill in the blanks that kids like me had when connecting textbook facts to real-life processes. My illustrations support the scientific foundations of the story as well. I watched footage of each moving insect to make the animations as true to nature as possible. The structure and shape of the bug and plant illustrations are based on photos, with elements of whimsy injected into the textures and patterns.

In addition to teaching through narrative, I hope to evoke a sense of childlike wonder and exploration by allowing readers of all ages to play out the story as it happens. The iPad is a perfect platform for this type of highly interactive storytelling. The reader can make things happen by touching images with a finger, wielding the power to move the story along or to stop and explore.

I surveyed existing children’s apps and researched interaction design for children while planning the project. I used the research to establish a list of best practices for children’s interface design, including:

  • The smaller the kid, the bigger the button should be.
  • Kids often tap the bottom area of the screen by accident. Controls and navigation should be placed at the top of the screen.
  • The most intuitive gestures are tap, draw or move finger, swipe, drag, and slide.
  • Interactive elements should be visually distinct and can be differentiated through line weight, color, illustration style and animations.
  • Freeze animations until after the story has been read on the page.
  • Kids usually use landscape view.
  • Children expect immediate feedback from their touch, either visual or auditory.
  • Input registration should occur on touch rather than on lift.
  • Require confirmation when a major program consequence will result, like returning to the beginning or shutting off audio.

I made careful decisions about each interactive moment in the app to ensure that the interaction helps enforce the information introduced in the text.

The idea for the interaction on the katydid page came easily. In the story, the katydid can camouflage himself because of the leaf-like appearance of his wings. So, for the katydid activity, the user searches for the hidden katydid in a page full of flowers and leaves.

One of the more challenging activities was the snail activity. The text originally described the snail’s ability to stick to any surface with his slime. I was finding it difficult to animate and code this concept. I thought about making a maze in which the child could guide the snail or allowing the user to draw slimy trails by dragging the snail, but both were beyond my coding capability. I watched some videos of snails for inspiration, and I was amused by their ability to retract their entire bodies into their shells. So I animated the snail slowly climbing upside-down on the branch and programmed the page so that the reader could poke at the snail with a finger. This caused the snail to stop momentarily and retract into his shell, all the while sticking to the branch with his slime. I adjusted the text to reflect the snail’s ability to climb upside-down.

An amazing luxury of this project was that I could work on all pieces of the app-making process simultaneously and make changes at any point if something wasn’t working harmoniously.

I was initially drawn to the idea of writing and designing a storybook app because it would allow me to craft all parts of the experience to take full advantage of the tablet. I chose characters that would animate well and that had distinct abilities rooted in nature. This was why I cut the ladybug from the cast of main characters. Looking cute and wearing polka dots were passive qualities that did not relate to the activities of the other insects in the story.

After surveying current children’s apps, I chose to create a custom typeface to complement the illustrations. I also chose the technologies to code the app based on the types of interactive moments I wanted to create. I had originally planned to develop the app using Adobe Digital Publishing Suite, but I quickly realized that it was too limited to handle the amount of rich animations and diversity of interactions I was designing. I landed on using Adobe Flash Pro to animate and code the app. Flash was a great option for front-end app coding; the interface was similar to other graphic-design software, and the coding language, Actionscript, was similar to coding for the web in Javascript. Sound design was also a key component of the app experience, from sound effects to background music to voiceover narration. I commissioned the sound design from a childhood friend, Joshua Cipolla, who created multiple background music tracks that follow the arc of the story. Together, all of these deliberate decisions made my story into a more seamless and immersive experience.

In many ways, the story of the little bug reflects my own experiences these past two years in graduate school. Upon entering the Graphic Design MFA program at MICA with a background in theatre and little coursework in graphic design, I was overwhelmed by the skill and experience of my peers. I’ve met so many talented designers, screenprinters, letterpressers, coders and illustrators. I spent plenty of time thinking that my work wasn’t interesting enough, academic enough, or beautiful enough. Graduate school helped me focus on my personal growth as a designer while challenging and inspiring me to learn more. I hope my app inspires kids to stay curious about their environment and look forward to a lifetime of learning and growing.

Read More

Exhibition

The Little Bug was exhibited at the Maryland Institute of Art from March 28 to April 6, 2014.

The exhibition design featured a station for demoing the app on the iPad, a type specimen of the custom typeface Katydid, huge vinyl decals of the bug illustrations, and a video walk-through of the app that played on the big screen.