2019 / Color & Composition

Learning Game - Yum

2019 November

7 Days

My Role

Visual Design, Interaction Design


Leon Zhang, Daniel Kim

Project Overview

As part of a one week class project for Color and Composition, me and my team mate designed YUM a game that teaches young children about simultaneous contrast!

Click below to view full gameplay trailer
Interaction Showcase

Full process walk through

1.0 Research

Prompt : Use one week to create a design that has colors interact with each other to establish simultaneous contrast. (Simultaneous contrast refers to the way in which two different colors affect each other. The theory is that one color can change how we perceive the tone and hue of another when the two are placed side by side.)
Example of simultaneous contrast

1.1 Initial Design thinking :

Before delving into the ideation phase, since this project was assigned to us with a very loose structure and extremely limited time, we wanted to move quickly through the research process. We relied mostly on secondary research and wanted to consider what was currently being done to teach children about colors.

1.2 Gathering Useful Data With Limited Time:

Due to the extremely short time span of the project, effective secondary research was crucial. We relied on secondary research to quickly gather useful quantitative data instead of sending out our own surveys. This allowed us to use our valuable time interviewing two selected young children under the supervision of their parents about what would help them learn colors, and just generally what they enjoyed.

1.3 Interview and Draw with Stakeholders! (Lets Have Fun!)

Putting a twist on the traditional Co-Design workshops, the idea here was to interview young children, but instead of asking for verbal responses, we would just ask them to draw or doodle whatever they thought was interesting, colorful and exciting to them.

(Not an actual image of interviewees due to privacy and safety reasons for children)

1.4 Synthesized Insights

We synthesized our insights into the 3 pain points below.

We decided that having a digital solution would also present opportunities for greater reach into wider demographics. These pain points also helped us understand that although our primary stakeholders were children, we should also consider how parents would perceive our design as well. Since children demanded games and parents demanded things that provided development/mental stimulation for their children, we wanted to match these goals to design an engaging game that taught children about color.

1.5 Problem Statement

We proposed the problem statement, how might we create a functional interactive prototype that teaches children simultaneous contrast in a fun way.

2.0 Design

2.1 Design Requirements

After rapid rounds of brainstorming, we wanted to hone in on creating an accessible mobile game that could help teach children simultaneous contrast. Our design requirement was meant to correspond directly to our proposed problem statement of the following keywords: child friendly, functional, interactive and educational.

2.2 Ideation and Sketches

Based on our proposed design requirements, we wanted our product’s premise to revolve around a hungry giraffe that had to eat as many fruits as possible. This theme was highly inspired by our interviewee M's sketches of the two giraffes comparing whose neck is longer. However, to teach simultaneous contrast, we added the plot twist that with every colored fruit, there was a similar colored fruit that the giraffe couldn’t eat or would get sick. We sketched out ideas and showed our original interviewee subjects as they were our primary stakeholders.

2.3 Information Architecture

After ideation, we developed an information architecture diagram to map out all the steps and possible outcomes a user could discover in our system.

2.4 Lo Fi Prototype (Vertical Slice)

Since we were short on time with this one week project, creating an entire fully functional low fi prototype would not be a good way to test our concept. To combat the short time limit, I proposed to use a vertical slice of simply the core user experience of "one game" and testing and improving this process.

The below image sequence shows the process of how the giraffe indicates what color fruit he wants to eat.

3.0 Usability Testing

3.1 Testing with Stakeholders.

The main emphasis of testing with children is to see if the process is intuitive enough for them and determining if the difficulty for the simultaneous contrast colors are appropriate.

Testing prompt 1# Complete the tutorial
Testing prompt 2# Try to complete one level
Testing prompt 3# Restart after dying

3.2 Testing with Designers (Critique).

3.3 Testing Results

The biggest advice we got was instead of having set levels, we should make the game levels randomly generated, similar to other arcade-like games such as Flappy Bird.

Other key points resulted around interactive feedback:

  • More fun visual feedback, such as saying YUM.
  • Special auditory feedback when failing tasks or losing.
  • Darker background during tutorial process, tutorial should be onboarding only.
view the final deliverable (back to top)

4.0 Final Deliverable

Feed the hungry giraffe! Try yum on your mobile phone! A game that teaches young children about simultaneous contrast!

4.1 Style Guide & Components.

We wanted to pick really bright and fun colors and rounded san-serif fonts that would elicit the playfulness that resonated with most children.

Rounded elements indicate to children clickable interactives such as buttons and fruits, while sharp edges such as the giraffe, the tree, the background and the grass indicate they can not be clicked.