STORYWORLD

Designing STORYWORLD Digital Reading Experience





OVERVIEW

STORYWORLD is an interactive learning-through-stories language tool for children two years old and up. Kids can read and listen to the story in each language, click any word they don’t understand, and then listen to the definition in context.

As a Product Designer, I redesigned STORYWORLD's reading and learning user interfaces, so that they are easy, comfortable, and enjoyable to read and interact with.

TAKEAWAY

Designing UI with purpose. Consider the different ways in which we interact with stories and how technology can enhance or affect them.


Challenges and Goals

Designing a mobile reading experience is a quest for balance between the simple look and feel of traditional books and the sophisticated functionality of new technology. Design principles include:

  • • Consistency across all platforms, devices and orientations
  • • Comfort and ease of getting translation and interacting with the app
  • • Visual hierarchy and clarity to enhance readability

The Process

Consistency across platforms and orientations

My task was to translate the original web version of STORYWORLD’s interface into a mobile app design that is more easy to use, elegant and consistent across platforms. To get a sense of what creative direction I should follow, I began by exploring the look and feel of the app across different tablet and mobile platforms, vertical and horizontal orientations to ensure consistency.

ideas

sketches

Comfort and Ease of Interactions

A good interaction design gives users the comfort they need to focus on the learning experience. I applied my understanding of eye-scanning patterns and finger scrolling to the design of the storybook. The illustration below shows how my design attempted to accommodate the limited reach of fingers or thumbs. Using this model, I decided to bring the Audio button from its usual position closer to the center where the learner’s thumb can reach without covering the screen.

zones

Visual Heirarchy and Clarity

I selected “Avenir Book” as our default English typeface because of its optimal height and width. “Valera Round” has the friendly feel that I wanted but the wide letters took up too much space. “Source Sans Pro” regular is more narrow and lightweight and has that professional cleanness. Avenir is a perfect balance of these two styles of font.

font

Font-size optimisation was the biggest challenge in designing for mobile reading. The length of the text varied not only with phone screen sizes but also with the word counts on individual pages. To make the reading experience consistent across all technical variations, I had to work with engineering to define a font size relative to screen resolution for each mobile device.

img

I used boxes to encapsulate vocabulary and learning items. This presented a challenge of how to make each type of boxes stylistically distinct. The translation box is kept minimalist but not too flat with a subtle use of light shadow. This helps to highlight the translated words without distracting the user’s attention from the reading passage.

ui

With a few colour options, I was careful to keep the colour representations straightforward. For example, blue is used for highlighting words in native language and orange for translations. Gradients of grey are used tactically to catch the users’ eyes with the elements’ hierarchy and clarity.