STORYWORLD

Redesigning STORYWORLD digital reading and learning user interfaces





OVERVIEW

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


Key Considerations

CHALLENGES AND GOALS

  • 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

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. The interactive prototype below show the portrait and landscape mode of my bilingual storybook design. Learners can tap any word to listen and tap again to get a translation which will appear on the rounded-corner box. My visual design goal was to make the reader easy, comfortable and enjoyable to read and interact with.

Ideas Exploration

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.

ideas

Visual Design

Sketches

sketches

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. Assuming that the user holds the phone vertically with one hand and horizontally with two-hands, green indicates the area a user can reach easily; yellow, an area that requires a stretch; and colourless, an area that requires users to shift the way in which they’re holding a device (www.uxmatters.com). 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

Font

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 however 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.

font

Visual Flow

Our blue, orange and grey brand colours were used consistently and minimally to keep the design interesting but simple enough to let the colourful illustrations shine. 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.

ui

UI Refinements

I used a lot of boxes to encapsulate vocabulary and learning items that give an important edge to the STORYWORLD reading experience. This presented a challenge of how to make each type of boxes stylistically distinct. On the Game pages, I added drop shadow to the answer buttons to promote tap action. At the same time, 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.

img