What is Cool School?
My eyes sparkle with joy even today as I reminisce about my 2nd grade Math class and teacher. She used music, games and fun to teach us basic math, but ended up imparting values like team spirit, uplifting each other and healthy competition through her activities.
Today as I fondly think about Mrs. D’Souza, I think about how me and my team tried to impart the same values through a kids’ game that we built called, Cool School.
Cool School is the ultimate destination where fun is combined with learning. It aims to teach 3 important values to kids, in ways that their impressionable young minds learn best: through animation and sound. The 3 values are: Conflict Resolution, Team Building, Mutual Respect
It has been proven through research that the human brain learns better through stories than through just facts. Dopamine creates positive associations with learning!
Previous versions of Cool School
The game started out as an Adobe Flash Player game 10 years ago, with a daily active user number of 6000! However, since then the game became outdated after Flash Player became inactive and needed a 180 degree makeover, while still keeping the original message of teaching conflict resolution intact. I collaborated with a team of 3 other HCIM students to take upon this redesign and test it with the HCIL KidsTeam.
A sneak peak of Cool School: Adobe Flash Player version
What did we start with: Pre Design Research
After a kickoff meeting with the client FJ Lennon and a heuristic evaluation, we identified 3 key painpoints:
Defining our goals
Using insights from research, and from the client, these were the goals that we set for ourselves:
Following an Agile UX process
The project was divided into 5 Sprints of 5 weeks each. Each of us took turns to take upon the role of "Facilitator" or the "Product Manager" for the sprints. The stages of each of the sprint are described below.
Each sprint was divided into these stages:
Week 1: Mapping (Combining research, testing results and client goals to brainstorm How Might Wes, and decide a sprint goal)
Week 2: Sketching (Visualizing our individual ideas through sketches and low fidelity wireframes)
Week 3: Deciding (Voting on the best and most feasible ideas with our stakeholders)
Week 4: Prototype (Creating high fidelity playable versions of our ideas on Figma)
Week 5: Testing (Collaborating with the HCIL KidsTeam to test and co-design our ideas)
We chose to focus on one of the goals for each sprint till Sprint 4, and decided to dedicate the last sprint 5 to combining all our last sprints' work and expand our user testing.
What did I wonder about: The How Might We's
I came up with some How Might We's which defined the direction of the features that I wanted to implement in the game. These HMWs were influenced by stakeholder meetings and user interviews with the kids.
Mapping the way ahead
As the Product Manager for Sprint 1, I came up with a user flow, containing key features of the map. I prioritized the features using a MoSCoW prioritization framework:
Taking Inspiration From Around Me
Jakob's Law says that users spend most of their time on other applications, and expect yours to work the same way!
Keeping this in mind, we played through a couple of games and based some features of Cool School on the.
Giving life to my ideas
I and my team combined all of this pre-design work and started our prototyping.
The sprint process involved us sketching our ideas and voting on parts of each others’ sketches to decide what to prototype for that sprint. Our client had a final super vote and chose from our votes. Some of the sketches that I presented are:
Imagining Key Game Interactions
Creating a "You" in Cool School
“Creating more inclusive avatar customization systems is an important step towards promoting diversity and representation in video games, and can lead to more engaged and satisfied players” is a quote from one of the research papers that we used to back our finding that we needed to have a fully customizable avatar.
I also designed a “Surprise Me” button for the users who don’t want to build a full avatar from scratch
Learning the consequences of right and wrong
I and my team introduced consequences for choosing the answer whenever a question was asked at the end of a situation. The consequence would either be losing points or mini games, like playing with the school dog and hunting down toys depending ont whether it was wrong or right.
Right Choice
Wrong Choice
Exploring the Cool School
Me and my team decided that an open world experience was one of our sprint focuses as part of modern game aesthetics. I used vector tools to create the buildings on the map like the Music Hall, Classrooms and Play Area.
Exploring the Cool School
One of the main goals was to enhance the replayability of the game. I introduced a feature where the player could go inside anty building of the school map, and explore inside. I worked on creating visually appealing and fun backgrounds for various locations in the school like the Play Area and Cafeteria shown above. I used tools like Adobe Illustrator and Figma to design them.
Excitement & Accessibility through
Sound & Voice Design
While conducting a usability test in one of the sprints, the kids mentioned how "quiet" the game was, and that it got boring after a time because there was no excitement. I and my team huddled together, and decided to give life to the characters using our own voices, and have different kids of background music. I developed the background music and refined the voices using Adobe Audition to make them sound kid-like and neutral for inclusivity. This increased the retention time of the game by 5x to 20 minutes
Tip: Unmute the video player to hear the sound!
Voice Acting
Anticipating Music
Customizing your voice
Celebration Music
Sad Music
Specific Background Effects
What did the kids think?
A significant challenge that I noticed during testing that they were shy and did not talk much, or were hyper-active and talked about everything else, but the game! I used an activity called Layered Elaboration in our usability studies with the kids. They were given a screen from the game and were asked to draw/write their suggestions. This helped us understand exactly what they wanted. I then transferred all their suggestions to a Miro board and used them as insights. Other activities that we did were "Think Out Loud" where we asked the kids to talk about what they were seeing on the screen while playing.
We then sorted their thoughts into Likes Dislikes & Design Ideas
Welcome to Cool School: The Finale!
I and my team took all of this and translated it into the Cool School Game!
Here's a sped up version:
Reflecting on my experience
When we started the redesign, I realized that everyone in the team had strong skills in almost all areas of the UX process, but had their own ideas of what part of the process they wanted to focus on more. I wanted to explore all of the parts of the process, but somehow could not participate in the visual design much, as I took upon the task of voice and audio design for the game.
A significant challenge that I faced during UX Research was that because we had a large group of kids, there were equal number of conflicting opinions, but we considered the opinions of the kids that were closer to our target age group.
I am working on including a Parental Control side of the game which is essential for children's games.