What gets you excited about reading? Perhaps it’s the idea of being transported to another time period. Maybe a friend recommended an interesting book, or you decided you’d like to go on an adventure.

I worked with a team of kids ages 7 to 11 to develop a prototype for Storytime, an interactive storybook app. My prototype serves as a testbed for a future digital collection of free children’s stories. I used Lewis Carroll’s Alice’s Adventures in Wonderland as my sample story, turning it into an immersive experience that allowed readers to engage with colorful animations, learn vocabulary words, develop a greater understanding of the characters and quiz their knowledge of the book. As a result of this project, I’ve created a set of recommendations that others can use when designing digital stories.

The goal

Why this project matters

More people than ever before have access to digital books, but the rate of children and teenagers who read for leisure has sharply declined in recent years. Nearly a quarter of 13-year-olds say they “never” or “hardly ever” read for fun, compared to 8 percent of 13-year-olds three decades ago, according to a report by children’s advocacy group Common Sense Media.

By studying kids’ reading habits and learning what interests them, I hoped to develop a strategy for making digital books for young readers more engaging. American kids are exposed to technology at such young ages, and many studies show they tend to have such positive attitudes toward their devices. I decided to find a way to harness this enthusiasm and find a way to engage kids in reading through digital means.

Roles

  • UX researcher
  • UI designer
  • Illustrator
  • Animator
  • Copywriter

Timeline

November 2016 — April 2017

Project partner

Kidsteam in UMD’s Human-Computer Interaction Lab

Recommendations for creating engaging stories

In my first meeting with Kidsteam, I wanted to give my design partners an opportunity to dream big and imagine the ideal digital reading experience without restrictions. The only requirement I gave them was that it had to be accessible from a mobile device or computer. From there, my design partners took oversized sheets of paper and began sketching. Over the course of several design and review sessions, I developed five key recommendations for creating an engaging digital story:

  1. Balance text with colorful animations
  2. Let interactive elements carry readers through the chapters.
  3. Choose a new favorite book with personalized picks.
  4. Provide additional content so readers can dive deeper into a story.
  5. Give readers platform freedom and flexibility.

Recommendation 1: Balance text with colorful animations.

From the start, every co-designer requested animations related to on-screen text throughout the story. For most members of the group, there was no such thing as too many animations. In our first session together, Kidsteam designers used Harry Potter and the Sorcerer’s Stone as inspiration. They drew images of characters that appeared when their names appeared on-screen, owls flying by and dementors popping out of the pages.

I took these ideas and spent my winter break trying to apply them to Alice’s Adventures in Wonderland. Nearly every page of my prototype had some kind of animation on it to go along with the text on the page.

This slideshow requires JavaScript.

When I brought the high-fidelity prototype to Kidsteam, my co-designers largely liked the look and feel of the illustrations. However, one designer brought up the point that such large animations could distract some readers. I went back to the drawing board to explore options for adding a pause/play button.

Ultimately, I settled on making “pause” more of a discovery feature — something readers would figure out by tapping on an animation to pause or restart an animation.

Recommendation 2: Let interactive elements carry readers through the chapters.

In our first session, each group of co-designers created ways to interact with visual elements. Co-designers requested quizzes, short video clips and game-like features. Using our Harry Potter example, one group created a Buzzfeed-style quiz that readers could take to find out which Hogwarts house the Sorting Hat would choose for them.

In the Alice high-fidelity prototype, I included in-chapter quizzes and a reading check quiz readers could access from the table of contents area. Two designers said the in-chapter quizzes made them want to continue to the next chapter and see if their answers were correct. After exploring the prototype, some co-designers asked for a more “gamified” experience, which could require an additional layer of thought when creating a digital story. In the case of Alice, one designer suggested turning the part where Alice fell down the rabbit hole into a game where readers had to catch items falling alongside her. While a game might not be suitable for every story, allowing readers to interact with the animations in some fashion — such as tapping Harry Potter’s wand to cast a spell or clicking a piece of cake for Alice to eat — makes stories all the more compelling.

Recommendation 3: Provide additional content so readers can dive deeper into a story.

Throughout our sessions, Kidsteam members created systems that enabled them to access additional information about the story for one of two purposes: assistance and additional context. For assistance, one co-designer suggested adding a feature that let readers tap a word to hear a pronunciation and see a definition. Children also wanted to see additional details about the storyline, such as character maps that appeared when the reader taps a character’s name, flashbacks to previous scenes as they’re referenced and extra information that might otherwise be found in a book’s appendix. In Harry Potter, for instance, there could be a list of spells and what they mean or a map of the Hogwarts grounds.

My high-fidelity prototype included character information boxes that popped up when readers tapped their names and examples of vocabulary word banks that included a definition, part of speech and pronunciation. The character information box included an overview of his or her personality, their goals or motivations, their friends and their foes. A “more about…” button would take readers to a separate page that provided a more in-depth analysis of the character. Readers could also access a character list from the table of contents button on the top left of the app.

My test users found the character information boxes particularly helpful. One user said she liked the inclusion of a large illustration of the character and links to related characters. She added that she’d like the illustration to be animated like the rest of the images in the story. Other designers recommended I change the information box from a popup window to a slide-out window that pushed story text to one side of the page instead of covering up the text. I also explored adding an icon next to characters’ names to remind readers that they could click the text for more information, but this idea didn’t sit well with my test users. They said readers of their age would likely discover this feature quickly on their own or that it might be beneficial to add a “how to use this app” feature for first-time readers. In-text icons, they said, would distract from the story.

Recommendation 4: Offer ways to adjust reading levels.

After reviewing the high-fidelity prototype in our final session together, some Kidsteam co-designers said they wanted to make sure the app would be accessible to children of various backgrounds and needs. They wanted the app to be platform agnostic so they could access a story across laptops, tablets and smartphones and keep their place if they switched to a different device. They also emphasized adjustable reading levels and reading options. One co-designer recommended making each story within the app available to young and experienced readers alike; clicking a button would adjust the difficulty of words, but the plot would stay the same. Other co-designers suggested adding features to turn on text highlighting and narration.

Initial concepts for adding a reading level feature.

Recommendation 5: Choose a new favorite book with personalized picks.

In addition to exploring ways of adding “magical moments” that enhanced a story, my co-designers also emphasized a need for interesting ways of selecting a book. I initially created a bookshelf-like view, where readers could swipe through book covers sorted by title or author. I also showed the Kidsteam designers a list-like view that they could scroll through, but they largely preferred being able to see a greater number of books at once with the bookshelf view.

When I started designing the high-fidelity prototype,  I stuck with the bookshelf view, since most Kidsteam designers preferred this view. To please the two designers who weren’t fully satisfied with this view, I added some additional search features based on ideas my co-designers suggested at various points of the design process. Most of them agreed that a Netflix-like feel would be valuable. They liked the idea of personalized recommendations based on past books they read and to be able to search by themes and collections instead of just by genre or author. Between our wireframe-testing session and the high-fidelity prototype review, I added a number of features to the bookshelf: a “rate it” section that would appear on the main library page after a reader finished a book; featured collections (“take an adventure” and “solve a mystery”); a “new to the library” section and a reviews tab on the book preview page. Readers could also use a search bar, instead of having to just swipe through the bookshelf until they found the book they were looking for.

Storytime bookshelf view

The Kidsteam designers were generally satisfied with these changes, at least for an initial release of the app. Down the road, a few said, they’d like to see the addition of a social features such as viewing friends’ reading lists and recommending books to each other.

Discussion and next steps

This project provides storytellers with a base set of recommendations for creating stories that engage young children in reading. While my research primarily focused on fiction reading, the concepts could be applicable to nonfiction books as well.

In future studies, it would be valuable to further explore social networking features and gamification of reading. My Kidsteam co-designers expressed interest in sharing book ideas with friends and reading for some sort of reward.

One area that my project did not explore was the curation of books. Should the app be free, but users have to pay to download books? Should it be a subscription service? Can you add books and curate lists, or is there just one collection of books? My capstone project focused on the “magical moments” of reading and some in-app features, but further research could involve parents, guardians or teachers. Questions would surround the download and purchasing aspects of the app.

For my next steps, I’m planning to develop a website version of Alice’s Adventures in Wonderland, which incorporates my animations in a responsive, interactive story format. It’s been a personal goal of mine to build a complete website from scratch. I’d also like to expand upon the animations I designed for this project and to turn the classic children’s book into an interactive experience anyone can access.

Want more Storytime?