Overview

For one of our Spring courses, Design of Educational Game, we as a team of 3 created this iOS game which enables people to learn and practice color theory. It is a puzzle game with different levels, and the players solve the puzzles by coloring the background image with the right color scheme. We named this game Holi, which is known as the festival of colors or the festival of love.

• KEYWORDS | iOS Game, Education, Color Theory, Cognitive Task Analysis, Meta-cogitation, Play-testing
• MY ROLE | Game Designer, collaborating with 1 designer and 1 developer

Problems

Almost everyone has ever experienced struggles about color. "Which color of shoes goes well with this shirt?" "Why are my slides always so ugly?" Being able to use color appropriately is such an important skill, yet most people are not confident about it. Plus, color could be fun to play with. Remember the childhood color books that we spent days and nights on? With both unsolved user needs and potential opportunities, we decided to create this iOS educational game for color theory, and our target users include:

• Elementary self-taught designers
• Non-design college students who are interested in color and design
• Anyone who wants to be a better color user

Research

While non-educational product development starts with identifying user needs, when we started creating this educational game, we also started from user needs, but with special methods that dive into the very core of the learning goals and people's cognitive process to achieve these goals.

Cognitive Task Analysis (CTA)

We started with doing Cognitive Task Analysis with three users - one expert and two novices. We presented them with a list of tasks that we hope our users would be able to accomplish after using our game. They were told to solve the tasks while thinking aloud.

An example of the task

This helps us identify people's cognitive model and difficult factors in learning color theory. In particular, CTA with experts helps defining the cognitive model (a if-then decision tree or concept map) to solve the problem and specifying the educational objectives, while CTA with novice helps to locate difficult points in the cognitive models and the educational objectives.

Cognitive Model - Concept Map

In general, we found that there are no overarching standards on color theory. Like most other design activities, both experts and novices would do a design task iteratively through trial and error. However, experts could finish a task much faster and better.

• Most people had a better idea of whether color is being used well if it's a finished work. But when coloring on their own, the novices had trouble anticipating the result.
• Meta-cognition matters. Some people lost confidence when they found the colors they pick didn't work well, and some would attribute this to talent.
• Color scheme and color wheel guided experts in picking color easily. But novices didn't know them.
• Experts learn color both from theories and application in actual work, and both are equally important.

Specifying Educational Goals

We specified the educational goals based on the CTA results. We decided to focus on the color scheme because it seemed to be the key to using colors. We broke down the goals as much as possible to make sure each single goal is assessable and executable.

Goals: Color Schemes



KNOWLEDGE

• The concept of color scheme
• The concept of color wheel
• 7 kinds of color scheme
• Understand that using color is an exploratory, trial-and-error process

SKILLS

• Be able to pick colors for a certain color scheme
• Be able to apply a certain color scheme to an interface design work

DISPOSITIONS

• A higher appreciation of the visual realm, be it in looking at other design work, art, photography
• Feel empowered and confident to use color in daily life

Design



Starting from brainstorming a bunch of ideas, we moved forward to analysis and evaluation based on the MDA framework (Mechanics, Dynamics, Aesthetics), which is a well-received framework to design and evaluate games.

We decided to make a game that has more sensation and less challenge because of our dispositional goals. We also wanted the application of colors to be the core mechanism. This has led us to the idea of creating a puzzle game with the core mechanism of a color book.

After finalizing the MDA analysis, I started designing the interfaces with another designer, and our team developer started to implement the features with Unity at the same time. We had been working in parallel throughout the whole project.

MDA of our design idea



MECHANICS

• Each level is about one color scheme
• Each level starts with a short description of what this color scheme is
• To pass a level, the player needs to navigate the little guy around the space to pick color balls
• Once a color ball is picked, the highlighted area of the background will be colored by the selected color instantly
• Different areas are being colored one by one
• The color balls are also moving around randomly

DYNAMICS

• Picking colors randomly to see how the background looks like, and doing revision by recoloring
• Need to avoid wrong color balls

AESTHETICS

• Sensation
• Challenge

PlayTesting

It took us less than a week to finish our first workable prototype. Then we ran a playtesting session with 4 people.



Some interesting yet surprising findings from the playtesting:

• The little guy moves slower than the balls, which makes it too hard to control. Need a lot of effort to make sure he does not eat wrong colors.“I just can’t avoid them!”
• Not sure what’s the next area to color. Lack of clear hints
• Navigating the little guy is a distraction to learning the color scheme

Iterations and Final Design

Based on the findings from the Playtesting, we made the following changes to our game:

• Remove the little guy who moves around and picks & avoids balls
• Use falling balls instead to present color options. This could avoid distraction and give people more time to think and reflect.

Changes to the mechanics



Playtesting again

We did another playtesting session, and the feedback was great. The game was easy to understand and fun to play. They also felt that they have learned a lot. The only complaint we received was that the tasks seemed a little too easy.

• Everyone has learned the concept of “color scheme”
• People are excited to know color could be so easy.“ I didn’t even know there could be rules for using colors”

If we are going to keep working on this game, our next step would be to make it more adaptive by offering different people different levels based on a pre-test.

Final Demo

Highlight: Balance between Learning and Fun

One of the biggest challenges for building educational games is to maintain the balance between learning and fun. In order to do so, we carefully examined the alignment between the game's MDA, learning objectives, and the instructional design principles.

For example, the game's goal and the learning goal are aligned in that the main task players have to finish is to color an image by selecting colors, which is exactly the learning goal. Our previous version didn't do this very well, because navigating the little guy, as one of the major game goals, contributed little to the achievement of the learning goals because applying color scheme has nothing to do with motor skills or quick reaction.

Another example is the pace of the game. We didn't set any time constraints because we wanted to create a space where the player can feel free and comfortable to explore, and has time to reflect on their choice. From the initial research, we found that experts' way of using color is more of an exploratory and iterative process, rather than finding the best scheme at the first trial. So there is less challenge and more sensation in this game.

Detailed alignment table