Teach Your Monster Website
Usborne Foundation
Rebranding the website and improving how users explore the games and enhancing the responsive browsing experience.
Problem Statement
After almost 10 years and over 300 million plays for the "Teach Your Monster to Read" game, Usborne Foundation invested in two brand new games coming in 2021 and 2022. They also want to rebrand and upgrade the website experience for their users.
The main issue on the old site is the interface design is too complicated with various font styles and inconsistent colour styles. The navigation is not good to help users find out the content. The mobile experience is not smooth for finding and downloading the app through the website.
Design, Develop, Test
Based on the findings and confirmed MVP. I planned the website redesign in 3 stages.
1. Designing a rebrand Home page experience
On the Home page, we created a scrolling experience to see the game introduction, Teacher section, About, Award and Download. Compared to the old design, the navigation is sticky on the top which is easier to navigate. And we deduct the complexity of the navigation by grouping them in the menu.
Old design: https://www.teachyourmonstertoread.com/
New Home page design: https://teachyourmonster.org/
2. Designing a consistent game page experience
In order to showcase 3 different games, we need to make sure the browsing experience is consistent on each page but still design the personality for each game. This is the reason we create different brand color to help to differentiate the game.
Game page example: https://teachyourmonster.org/readingforfun
3. Improving the overall responsive experience on mobile
Improving mobile experience is one of the main purposes of this project. In user testing, we found out most of our users will use mobile devices to look at our website. It is because our app is a mobile and tablet game for children. Therefore, creating a smooth download app experience from website to App Store and from App Store to our website is the most important task.
UI Design
Some examples:
Challenge & Learning
Bringing new research, strategy and design skills is always challenging. They are a non-profit educational technology company focusing on creating exciting ways for children to learn, using games, interactive media and video. The challenge is they don't have any pattern library or design system for their website. To tackle this challenge and build a collaborative way to work with their designers and developers, we introduced them to Figma. We helped them develop their first Design system for their website. I learned how to help brands to do digital transformation and help them upgrade their responsive experience. I like working with their brilliant Character and Game designers. If you're interested in their games, check out the website and download the games :)