Designing a mobile platform for story-based language learning
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.
The STORYWORLD mobile app allows learners to select, read, write, and share bilingual stories, supporting language learning at any age.
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.
As an educational product, STORYWORLD targets the intersection of young students, parents and teachers. This means making STORYWORLD clean and intelligible without sacrificing the playfulness and friendliness of a child-oriented design. Design principles include:
• Seamless navigation flow throughout usage
• Balance between youthful and professional
• Vibrant and cohesive visual experience
Seamless navigation flow
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.
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.
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.
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.
Balance between youthful and professional
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.
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.