Cool School

Product Design

A cute colored shape playing fetch with a dog in a video game

I made a video game for 5 year olds more immersive and replayable.

Project Description

I modernized my client's educational video game based on the latest gaming trends, and redesigned it as a prototype in Figma to make it more suitable for the current generation of kids.

While ensuring the new game didn't stray far from the essence of the original, I improved the game aesthetics and player experience. I increased the number of in-game interactions by 300%, improving the overall replayability by over 450%

CLIENT

FJ Lennon

Role

Product Designer

Team Size

4 members

Project Year

2022

Design Sprints

5 sprints (4 weeks each)

Research

Participatory Design

Expert Review

User Playtesting

Tools

Figma

Shotcut

Bamboo Paper

What is Cool School?

Cool School was a popular conflict resolution PC game for kids in the 2000s, which died with flash games.

My goal was to recreate the classic game from scratch for my client as a prototype for the modern audience of kids, so he could present it to the Federal Department of Education and get the game remake project approved.

Characters interacting in the original cool school game

The Problem

A straight line representing challenges connecting a start flag and an end flag

The original game followed a linear plot, where solving conflicts would give you a trophy, and the game would end on collecting all of them. This limited the game's replay value.

The linear gameplay allowed for limited exploration and interactions

Kids now are more comfortable with tablets and phones than PCs

Two characters from hollow knight standing together

Diversity and inclusion are more important now than 20 years ago

Diving Deeper

We collaborated with UMD's KidsTeam - a research group of kids, for feedback and observation.

Children playing the prototype on a laptop with snack bowls around them

Contextual Inquiry

We observed the kids playing from a distance, noting their comments and reactions, and helping where needed.

Sticky notes stuck to a wall with likes and dislikes written on them

Likes/Dislikes Sessions

At the end of playtime, we would ask them what they liked and disliked, and how would they improve the game.

Kids drawing with markers on a printout of a screen from the project

Layered Elaboration

We asked them to draw on printouts of game screens, letting them draw on top of each other's ideas.

Our Key Observations

Importance of Identity

woman peeking from the top of her laptop

Kids associated the game avatar with their own identity

Freedom to Explore

They wished to be as free in the game as a virtual world

Immersive Experience

The game didn't feel relatable or engaging enough

Solution 1: Character Customization

"I want to change my character's shape and color the way I want"

To give them a stronger sense of identity, I designed a feature that let players create their own character.

I added more personalization through apparel shops and their interactions with different characters.

A rough sketch of character customization feature

A low level screen for character customization with the most basic features

Before (1st Sprint)

Screenshot of a refined character customization screen with a better UI, high details, and lots of options

After (Final Sprint)

Solution 2: Open World Experience

A rough sketch of map and exploration in Cool School

"More places to go in the game with different designs will be nice, like another world to explore"

To make players feel more free in the game, I redesigned the game as an open world.
‍
This would allow the kids to roam, explore, and find conflicts to resolve on their own, also finding many interactions along the way.

Screenshot of the in game map of the school with low levels of details

Before (1st Sprint)

Screenshot of the in game map of the school with high levels of details

After (Final Sprint)

Solution 3: More interactions and relatable plots

"You can add side missions to the main quest"

I added quests, rewards, secrets and several in game interactions with characters and objects around the school to make the game more immersive.

Based on our research, and with the help of the client, I also updated the original plots to be more relatable and inclusive to modern kids.

A rough sketch of the player character interacting with other characters in the game

Game screen from early design, showing a conflict between people at an in game location

Before (1st Sprint)

Game screen from final design, showing a conflict between people at an in game location

After (Final Sprint)

The Results

24

New Locations and Rooms

18

New Side Quests

300%

Increased game interactions

450%

Improved Replayability

A Refined Game Experience

Original Assets

Collection of hand drawn illustrations for game characters

"I like the avatar style but it didn't let me choose more options"

I drew all new assets for the game using Adobe Illustrator.

I designed player character and NPCs as cute colored shapes to minimize gender, skin, cultural and body shape exclusion.

Motion and Audio

A square character jumping up and down in joy

"I want to see them move and talk like real people"

I animated game characters with my team and created cutscenes.

We also added background music and audio for text dialogues to make the game fluid and more accessible than before.

Before and After

Music Room (Original Game)

Screen from the original game showing a conflict in the music hall

Music Room (Re-Design)

Game screen showing a conflict in the music hall in the new design

High Fidelity Prototype

Using our design and research from all our design sprints, we created a cohesive playable prototype in Figma for our client.

Reflections

I found myself making a number of assumptions during this project, which proved to be wrong during research - like when I thought picking choices with a timer might be too advanced for kids, only to discover during testing that it wasn't challenging enough.

Working with kids was a fascinating experience, and "research" sessions with them were loads of fun. If we can find ways for adults users to open up like this by making it a fun experience, we would get much richer qualitative data.

What would I do differently?

Communicate better. I learnt the importance of articulating thoughts well, whether it is for the client, teammates, or the users.

Other Projects

University of Maryland's hornbake library with the caption "1600+ new impressions"

Think I'm a good fit?

Let's connect!