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.
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.
• Visual hierarchy and clarity to enhance readability
• Comfort and ease of getting translation and interacting with the app
• Consistency across all platforms, devices and orientations
My task was to translate the original web version of STORYWORLD’s interface into a mobile app design that is more simple, elegant and easy to use. To get a sense of what creative direction I should follow, I began by exploring the look and feel of the app on a large iPad screen. I avoided using a mobile template because I didn’t want to make early design decisions that could be based on assumptions and therefore limit creative possibilities.
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.
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-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.
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.
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.