cool-school_mockup_hero_2560_1440

Cool School 

Cool School is an education game that teaches children how to make peace in their community through digital play. 

TYPE
Client project

MY ROLES
UX Researcher
Sprint Facilitator
Interaction & Visual Designer
Lead 2D Environment Designer
Asset & Sprite Designer

OUTPUTS
Web-Based Education Game

TEAM
5 Designers
2 Developers

METHODS
Participatory Design
Google Venture Sprints

TIME
10 Months

Although a popular game 20 years ago, Cool School became outdated due to a lack of funding to support changing technology.

Interested in a new vision of Cool School, our stakeholders asked our team to redesign Cool School and integrate new game-based learning techniques that could deepen and sustain the learning experience. In addition, our stakeholders had interest in a complete redesign of the game’s visual aesthetics to give it a modern feel.

strawberry

What We Did

Over the course of 10 months our team combined methods from Google Venture Sprints & Participatory Design to conduct 5, 4-5 week long sprints. 

We updated the game mechanics in Cool School by integrating game-based learning techniques and a new visual design in order to deepen and sustian its learning experience for children today.  

Our outcome was a fully designed and developed MVP prototype that can be used to secure funding for implementation. 

MY CONTRIBUTIONS

For this project I conducted participatory design sessions, ideated new game-based learning mechanics, served as a sprint facilitator, and planned the interaction loops for the game experience.

I also worked as a 2D game art designer, where I designed and illustrated the game's immersive environment as well as some characters. 

Cool School - Early 2000s Style

Cool School began as a flash-based animated game. It involved the ability to click on school buildings within a digital map to view animations of social conflicts between inanimate objects. Thereafter, the player could choose the best way to solve the conflict by clicking an option from a multiple choice set that was written on a chalkboard.

Screen-Shot-2021-01-12-at-1.05.39-AM
coolschool_ss1
coolschool_ss2

COOL SCHOOL'S ORIGINAL GAME MAP, CHARACTERS, AND PRESENTATION OF RESOLUTION CHOICES.

OUR REDESIGN

Cool School is an immersive world of diverse, playful characters who attend school everyday. Sometimes characters at Cool School bully one another. Players go on missions to help characters at Cool School make peace with one another by helping them choose the best way to resolve their social conflict. 

Cool School inspires giving.

Our research showed that contributing to a community as a group member is a stronger intrinsic motivator than competition, which is commonly shown in mechanics such as rankings and leaderboards.

In Cool School, we focused on creating mechanics that celebrate contributions versus competition. We created a reward system for solving conflicts, which involves earning coins that can be traded in for objects the Cool School characters can share together.

A PLAYER SOLVED A CONFLICT AND CHOSE TO PURCHASE A SEESAW FOR THE PLAYGROUND WITH THEIR EARNED COINS. THE MAP SLOWLY COMES TO LIFE WITH CHARACTERS AS A RESULT OF THE PLAYER'S PURCHASE CHOICE. 

Cool School instills curiosity. 

Our participatory design sessions revealed the positive impact that free exploration can have on learning and motivation for children.

We recreated Cool School to allow for free exploration in an immersive, realistic world. The array of details allows for a scalable design system, opening up to further interactive opportunities that are grounded in reality.

Cool-School-Sprint-5_Map-Master_April25-01

FINAL GAME MAP I ILLUSTRATED

I WORKED CLOSELY WITH OUR DEVELOPERS TO ENSURE EACH GAME MAP ASSET ALLOWED FOR CHARACTERS TO MOVE FREELY AND INTERACT WITH ELEMENTS IN THE MAP.

Cool School sparks the imagination.

Our data and SME interviews showed that an optimal learning environment is one where we can integrate aspects of our own imagination. In Cool School, we added this opportunity by allowing players to customize their own character with items and skins and change it at any time.

Cool School supports agency.

Games are compelling when there is a level of both autonomy and agency involved and outcomes are dependent on the learner’s choices. In Cool School, players can choose when and where to solve conflicts and what they’d like to do with their rewards.

In addition, our research showed that children desire to do actions in the game that emulate real life experiences. Because children are interested in the way the world works, we placed "easter egg" micro-interactions that allow them to try out real-world activities in the game.

1. THE PLAYER IS GIVEN A KEY TO UNLOCK THE MUSIC ROOM WHERE THEY CAN PLAY THE DRUMS. 2. THE PLAYER FREELY EXPLORES THE SCHOOL AND DISCOVERS EASTER-EGG MICRO-INTERACTIONS.

Amy-All-characters-01

How We Got There Together  

Defining Our Scope

Eager to bring Cool School back into the spotlight, our stakeholders expressed a plethora of areas they were interested in improving. 

During our stakeholder interviews, I listened for opportunity areas which I wrote down as how we might we statements. After compiling several notes, my team and I created an affinity diagram to find themes and in turn, choose an appropriate starting point. 

Our team expressed that updating game mechanics would be a good start as game mechanics act as the underlying conceptual structure of the game. They set the game rules and interactions.

A STAKEHOLDER MEETING WHERE WE LOOKED FOR PROBLEMS AND FORMULATED OPPORTUNITY STATEMENTS

Together we decided to begin with a focus on updating the game's mechanics. Mechanics involve how players can interact within the game. Updating mechanics also influences the game’s aesthetics or overall visceral experience, which is where deep learning and engagement is born.

Exploring Game Mechanics

Our stakeholders agreed and we scheduled subject matter expert interviews with game designers and education researchers to learn more about the domain. We then used google venture techniques such as lightning demos and solution sketches to make our assumptions tangible enough to test with children.

Cool-School-Sprint-II-Frame-1
Cool-School-Sprint-III-Frame-4-1
my-solution-sketches-sprint-one-1

SOLUTION SKETCHES I SKETCHED THAT WENT INTO OUR MVP. 

One challenge we had early on was lack of access to testing with children in our target age group. We learned that child development can rapidly change as a person ages from 4 to 11 years old. Some of our initial ideas proved to be tailored toward older children due to unconscious bias caused by our simple age gaps. We needed to better understand our target users.

Interim Research Pivots

As Sprint Facilitator at the time, I knew I had to make some adjustments to help us stay on track. I organized a team to put together an IRB proposal, so we could test with children at the Center of Young Children, who were of our target age group.

IRBs can take time to be approved, so I planned a literature review of child development research with the assistance of Dr. Melanie Killen. Our team compiled themes in areas of interest and then we created light-weight proto-personas of our target age group to guide our future ideation.

Proto-Personas-Paul
Proto-Personas-Alex
Proto-Personas-Kylie

PROTO-PERSONAS

Designing with Children

When we had the opportunity to co-design with HCIL KidsTeam, I took on the role of designing our research protocols. Throughout our sprints we used several participatory design methods, which offered different values depending on our key research questions. A few methods used were layered elaboration, sticky decisions, bags of stuff, co-design storyboarding, and play testing.

Co-Design Storyboarding

It was important to us to understand childrens’ perception of conflicts within their age group. Co-Designing a storyboard of a conflict allowed us to better understand our users’ mental model.

CO-DESIGN STORYBOARDING

Play Testing

Play testing with rapid prototypes allowed us the opportunity to observe children interacting with our game. Paired with the think-aloud technique, we could gain insights into territories that would otherwise be uncharted.

PLAY TESTING SESSION

key-insights

Key Insights

For each sprint I was incharge of data synthesis. Using thematic analysis I devised the following high-level themes to inform design principles for opportunities.

01

Children are motivated by their future self.

Children ages 4-11 have a strong desire to emulate actions that are performed by people older than them. Eager to do the same, a strong intrinsic motivator is enabling an environment to act out those actions. 

02

Children are eager to express who they are, and this helps them learn.

Learning and memory is enhanced by personal expression and imagination. Weaving new knowledge with personalization and imagination strengthens our ties with our new knowledge.

03

Cooperation is more empowering than competition.

Children feel a strong satisfaction when helping others. Contributing to a group provides an overall sense of belonging. This value surpasses competition in that it has a more sustainable and positive influence on learning. 

04

Children should be who they are without high-risk. 

Building a sustainable learning environment involves allowing the learner enough agency to make decisions within that environment. Children are naturally eager to explore their own autonomy when the environment feels safe enough. It's important to make the environment low risk to not allow failure to trump competence.

05

Curiosity nurtures competence.

Feeling self-efficacy begins with a general interest in that area. Curiosity is the beginning step toward a sense of competence. Competence serves as a reward that keeps on giving.

06

Every child is unique in their learning style, interests, and development.

The range of interests and learning styles varies greatly within our target age group. Some children gravitate toward challenge and others toward exploration. Some feel delight from colors, others from sound.

Asset-1@2x

Design Principles

From our research insights, we crafted design principles to direct the design of our new game mechanics. Below are example design principles and corresponding concepts that made it into our final MVP prototype. 

Lunch_Room_Map-01

Provide Immersive & Realistic Exploration

Offer free exploration in three-quarter map environment. Provide opportunities to try different interactions that replicate players’ future reality.

avatar-customization

Allow the Imagination to Play

Provide players the opportunity to customize their own characters. Provide a visually inspiring environment that mixes whimsicality with reality. Create opportunities for curiosity and discovery.

3-cropped-friends-cool-school

Keep Rewards Socially Relevant

Directly show the impact choices make on relationships in a positive way. Provide opportunities to interact and build friendships with other characters in the game.

new-cropped-store-image

Tie Extrinsic Reward with Intrinsic Value

Create a currency reward system (extrinsic reward) that ties to purchasing community items which build positive relationships with other characters (intrinsic reward).

cool-school-tree-05

Building Cool School

Our last two sprints were dedicated to building our fully functional MVP prototype. I worked as a member of the asset team, where I created our interaction flowsillustrated the immersive game map, created characters, designed sprites, and helped devise our visual language and design system

Figma could not support the intricate design patterns and nonlinear interactions that we needed to convey, so we switched to using Game Maker Studio. We then split into two teams: an asset team and a development team and used a kanban system to keep track of our workflow.  

As a member of the asset team, I had to quickly learn how to design game assets as sprites. Our team collaborated together and with early communication and lots of iteration, we were successful in delivering game assets for development.

Defining the Product Structure & Game Mechanic Loops

Before we could dive into asset making, we had to have a blue print. I worked with a team member to create our full product structure and pathways for all possible scenarios.

Cool-School-Sprint-III-GAME-SITE-MAP-ITERATION-2-1

PRODUCT STRUCTURE MAP

Creating An Immersive World

I took the lead to illustrate and design the game’s 2D environment, which went through many, many iterations and collaboration with development to ensure the game could function as intended.

Asset-1-1

VISUAL CONCEPT I ILLUSTRATED FOR OUR OUR FINAL DESIGN

Character Creation

I also assisted with character creation. After iterating on the look of the character, we created sprite sheets to bring the character to life through movement and expressions. 

Asset-3@3x

Creating a Design System

Our team created a comprehensive component library, built with tools such as a mini map, an inventory system, and hoot, the owl, to assist with learning the interface and controls. We chose to create very tactile appearing interactive pieces to help children understand their affordances.

style-guide

Our clients were excited and intrigued with our work but wanted to ensure the game was rooted in reality to make a stronger connection between solving conflicts in the game and in real life. Our Co-designers suggested many fantastical elements. We made the following changes to blend the visions together:

Superpowers Really Mean Agency 

Our assumption was that giving a role as an agent helping the school would provide a stronger sense of being immersed in the narrative without taking too much away from reality. Having special abilities to promote change in the environment is rooted in the desire to have agency.  

Use Anthropomorphism

We blended realism with fantasy by giving our characters anthropomorphic features such as the ability to wear clothing as well as walk, talk, and perform tasks like a human.

Create a Colorful World Grounded in Reality 

In addition, we decided to make the school environment more visually realistic. We designed it to support interactions that can occur in reality. However we kept the color palette bright, playful, and vibrant. 

I ILLUSTRATED OUR GAME ENVIRONMENT TO BETTER REFLECT REALITY WHILE MAINTAINING A SENSE OF PLAYFULNESS WITH COLORS AND SHAPES.

Making a More
Seamless Experience

Play testing our higher-fidelity designs allowed us to find gaps and glitches in the experience. One change I took on was redesigning the map to support wayfinding.

More Apparent Entry & Exit Points
We found that our users had difficulty navigating the map given the viewport size. I redesigned the map to allow for more apparent entry points to accommodate this.

I UPDATED OUR GAME ENVIRONMENT TO BETTER SUPPORT PLAYER ORIENTATION AND WAYFINDING. 

The MVP Prototype

"It was a great experience working with all of you. I enjoyed watching Cool School become transformed into a 2021 educational game for children! Wow - - it was super and your product was better than I had imagined. I learned a lot, too. " - Dr. Melanie Killen

"I just wanted to say that I really enjoyed seeing what you all have made - what an amazing, powerful change from what you started with! INCREDIBLE job!!!" - Dr. Caro "Spike" Williams-Pierce

More Projects 💌

The New Yorker Interactive & Visual Design | Illustration

ElioProduct Design | Illustration

PlayARInclusive Design | Augmented Reality

There's always a good time for coffee talk. ☕️ 


I am currently seeking full-time or contract opportunities. 

Feel free to reach out to say hello: amy.n.asadi@gmail.com
Or connect on: Linkedin. 

© 2022 Amy Asadi