STORYWORLD

Designing a mobile platform for story-based language learning





OVERVIEW

The STORYWORLD mobile app allows learners to select, read, write, and share bilingual stories, supporting language learning at any age.

As a Product Designer, I was responsible for the design of the STORYWORLD mobile app from concept ideation to validation. The main purpose of this project was to convey our product strategy and design concepts to partners and potential investors. We worked with students and our partner schools to test and develop this platform.

TAKEAWAY

Approach designing a mobile app as a dynamic system of different users, user goals and journeys. Take into account how different motivations and behaviors shape different ways of interacting with a product; and create a visual language that unites these differences.

View Prototype


Challenges and Goals

As an educational product, STORYWORLD targets the intersection of young students, parents and teachers. This means making STORYWORLD clean and intellligible without sacrificing the playfulness and friendliness of a child-oriented design.

Key Considerations

  • • Balance between youthful and professional
  • • Seamless navigation flow throughout usage
  • • Vibrant and cohesive visual experience

The Process

process

Defining

In laying out the structure of the app, I must keep in mind how our business context and strategic goals can shape user interaction and accessibility. For example, this means thinking about different user experience paths for “Subscribers” and “Non-subscribers”. Making a detailed flow diagram enabled me to flesh out the differences in system requirements that affect how the app will appear to students, educators and parents.

flow

Ideating, Experimenting, and Streamlining

I bucketed features and content by categories to explore the different ways in which the content can be organized. Breaking up the functionalities into groups allowed me to focus more on specific user needs and the breakdown of each component. For example, focusing on first-time users encouraged me to think more about initial preference settings, user data collection and onboarding experience.

architecture

Designing the navigation layout

stickies

I experimented with the different ways the story libraries will be displayed and viewed. Prototyping helped us realize that this horizontal “scroll” layout is not the most effective way to showcase our books, especially since we will be adding more books and layers of sorting filters in the future.

prototype

The fact that we had so many features in the app made designing user flow a challenge. I utilized the iOS guideline on navigation design to simplify the content and give users more navigation flexibility.

Implementing, Testing, and Refining

Visual Design Evolution

evolution

I established a friendly, vibrant and clean design that is both on-brand and consistent with the iOS7 aesthetics. The style of “Avenir” fit really well with STORYWORLD’s modern and youthful personality. As a san-serif font, it is easy to read particularly for young readers. This font was not only a great brand fit but also one of iOS7’s built-in fonts.

visual

Our blue, orange and grey brand colours were used consistently and minimally to keep the design interesting but simple enough to let the colorful illustrations shine.

Final Design

Navigation Flow Map.

architecture

View Prototype

The prototype has been shown to some of our partners and users for feedback. We are currently gathering funds to make this app a reality.