Teach Your Monster Website

Usborne Foundation

Rebranding the website and improving how users explore the games and enhancing the responsive browsing experience.

MY ROLE

UI Design

UX Design

TIMELINE

3 months

TYMcover.png

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.

Screenshot 2021-11-15 at 11.32.01.png
Screenshot 2021-11-15 at 12.01.38.png

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:

Screenshot 2021-11-15 at 11.55.07.png
Screenshot 2021-11-15 at 11.54.38.png

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 :)