Rooplay & Garfield Kids Games

App UX Design, Game UI

Brief

Rooplay is the game platform for fun and learning designed and developed by Shoal Games Ltd. It offers over 500 games for kids 2- 8 in a single app. I worked on this project as the sole UX Designer and worked closely with the Art Director Kate Freeman and Frontend Developer Anne Uy. In the meantime, I also worked on Shoal Media's Garfield series and Trophy Bingo as a production artist, creating in-game assets and trailers.

My Roles

- Competitor research
- User flow
- Hi-Fi mockup
- Game UI
- Game Trailers

1. Competitor Research

We collected many kid's game platforms on the market and listed the challenges and opportunities we see in the kid's game industry.

2. Challenges & Opportunities

To compete with kid's game platforms on the market, I listed challenges and opportunities I see in Rooplay.

Challenges
- There are already many mature products with loyal customers who have subscribed to their service for a long-term period.
- Kids have a unique way of interacting with electronic devices. The UX should be very intuitive. It would benefit a lot from user testing. However, we don't have enough budget and time to do valid user testing.

Opportunities
- Some platforms are still using out-of-date visual languages and art styles. Rooplay can stand out by modern graphic design and UX.
- Rooplay collects games from developers all over the world. It will win by its diversity and quantity of games.
- Kids can browse games quickly and find the one they like by the "Next Game" button, similar to the "Play Something Random" function on Netflix.

3. UI Style Guide

As the only UX Designer of Rooplay, I worked closely with the Art Director Kate Freeman and came up with a complete UI Style Guide. I iterated multiple versions based on the feedback I got from all stakeholders, and this is the final version.

The UI Style Guide details are open to being updated during the whole production phase.

4. Gameplay Screen Back and Next Buttons

I spent most of the time designing the biggest challenge of the app, the Gameplay Screen. I tried multiple solutions of the "Home" and "Next Game" buttons. They have to be noticeable and don't get in the way of the actual gameplay.

After iterations and testing with my colleagues' kids, we decided to go with version 2 - the hidden blob.

5. Hi-Fi Mockups and Demo Video

I posted some final mockup screen examples here. The Rooplay app was shipped after I left the team. Currently, it has evolved through many iterations.

Check out the final tapcase walkthrough video here!

6. Garfield Kid's Game Collection

In the meantime, I also worked on Shoal Media's standalone kid's game with Garfield's IP. My prominent role was designing game screens and flows (most of the game flows were very straightforward). Most of the art assets are from Garfield's Media Library. I used my composition skills to create more than 10 Garfield kid's games, following the UI Style set by our Art Director Kate Freeman.

Because our target audience is kids from 2 to 8, I paid much attention to the font size, visual elements, and colors to create an eye-catching and fun game UI. For example, in "Garfield - Spot the Difference", I came up with a design showing two pictures in Garfield's two big round eyes, while the nose and cheeks held the function buttons. Instead of using generic UI layouts, mixing Garfield's art into the UI makes it more fun for kids.