KitChem

'WHERE WAS THIS WHEN I FAILED CHEMISTRY IN MIDDLE SCHOOL !?' - Vaguely aggravated user

Overview
Who hates chemistry? If you ask this question to any audience, you will hear a resounding 'I do'. So, we tried to negate this hate for chemistry by incorporating it with an 
equal love for something that involves chemistry - food. With massive open online courses becoming ubiquitous, we found that none of them were engaging enough to 
truly teach chemistry. Through intelligent tutoring and cross-fading, we ensured that users would be blown away when they realized that this 'cooking game' was 
actually teaching them how to balance chemical equations. My roles of design and front-end development were shared with a fellow designer, Qinwei Zhu.
CLIENT                                                                                                                                TIME 
Cornell - Educational Technology                                                                                 September - December 2016

MY ROLE                                                                                                                             TEAM 
Research, design, front-end development                                                                  Qinwei Zhu, Jean Hooi Lee, Charlie Qian
Market Research and Literature Review
As a part of our intense, Ph.D level Educational Technology class, we had to work on an open-ended project that would reflect one of the concepts learnt during our 
classes. In one such lecture, our professor introduced us to the concept of concreteness fading. It involves starting with a topic unrelated to the one you are trying to 
teach (concrete materials) and eventually, fading into the actual subject. The user practices tasks with concrete materials to understand concepts needed to solve 
questions in the actual subject. This concept tickled our interest and so, we dug a little deeper to search for products that were based on concreteness fading. We found 
an amazing example with DragonBox.
In DragonBox, the concrete materials are blocks of images. A board is divided into two parts with multiple cards and a ‘vortex’ that represents ‘no value’ or zero. As the 
game progresses, we notice concepts from linear algebra surfacing in the game. For instance, in order to cancel out a card, its ‘night card’ (black and white version) needs 
to be added to the board on both sides. This can be likened to adding/subtracting terms on either side of an equation. As the levels progress in a chapter, the game 
introduces linear algebraic cards with constants and variables that help the students put the knowledge they have acquired to good use.



We also noted that DragonBox was based on another concept - intelligent tutoring. As the game progresses, the user gets 'smart' tips based on previous steps and the 
desired solution. It promotes students reaching an answer by themselves. To find other products based on intelligent tutoring, we conducted a market research study and 
found that most massive open online courses are based on intelligent tutoring. However, one particular product called the ACT Programming Tutor caught our eye. It has 
an established solution to which it compares the user’s current progress. Based on what the user needs to do, the tutor provides hints and suggests fixes. We decided to 
incorporate their methodology along with DragonBox's focus on concreteness fading in our design.
Ideation
While we had finalized on the methodologies we wanted to focus on, we were still unsure of its implementation. We were extremely inspired by the example of DragonBox 
and knew that we wanted to work on a similar game. However, the questions we asked ourselves were: 


∙What subject would the game teach?

∙Which unrelated topic (concrete material) would be cross-faded to become the subject in question?



In order to come up with subject and concrete material ideas, we sat down for a brainstorming session. We realized that we had to target a subject that could be easily 
tested on its respective age group. Since Cornell is situated in a location that emphasized on education, we understood that testing out on target users won't be a problem. 
That allowed us to think freely without worrying about additional constraints. However, we wanted to challenge ourselves and decided to pick a user base that wasn't as 
easily accessible to us as college students - middle school kids. That was when it hit us. What was the one subject that every middle school student hates? Chemistry. 
Eureka! On brainstorming further, we realized that if we wanted to teach such a hated topic, we had to incorporate it with something that was as loved and what is more 
loved than food?


While we had picked a subject and concrete material, we still had to narrow down the topic - like linear algebra for DragonBox. So, each of us thought of topics in 
chemistry that middle schoolers struggled with like the periodic table, density and atoms. But, none of them seemed to align with the concept of food as much. Then, we 
came across the ever dreaded concept of balancing chemical equations. This was a double-headed spear for middle school kids - a combination of math AND chemistry. 
However, we realized that this topic fell in place perfectly with food. Food is cooked and cooking is basically a chemical reaction! Ingredients are used to make dishes 
just like reactants are used to make products!
To put this idea on paper, we researched similar cooking games and found that their layout normally has three parts: food shelf, interactive worktable and service desk for 
the customer. Upon clicking on an item in the shelf, the food would move to the worktable where other items could be combined to make a dish that would be provided to 
the customer. I used these ideas as a reference and collaborated with Qinwei to create a low fidelity sketch of the layout as shown above. Hence, on clicking one bundle at 
the bottom (ingredients), the items would transfer to each respective final bundle (food).
Design
While we had come up with a basic layout, we hadn't finalized on the exact look, motions or flow of the website. Further, we had to think about how concreteness fading 
would take place. To completely finalize on the design, we had a critique session to target the following issues:

∙ By dividing the worktable into a set number of empty bundles, it prevents the user from employing a trial and error method to figure out the solution to the problem.
∙ Putting the products or food at the top of the screen and reactants or ingredients at the bottom does not look like an equation.
∙ When people are balancing chemical equations, they change the coefficient on both sides, not only the reactants side. However, a cooking game usually only 
    allows users to operate on the ingredient side.
∙ If an element is in more than one product, how do we decide which product the element will go to?


By bouncing ideas off one another, we came up with the following solutions:

∙ Instead of having empty plates on both sides to be filled, the worktable is clear. When ingredients are clicked on, they move to the worktable on the left side.
∙ When users click on the product, empty bundles or plates move to the right side that 'absorbs' their respective ingredient automatically. This allows users to change 
    the number of 'ingredients' as well as 'plates'.
∙ If an element is in more than one product, then it gets transferred to a product randomly. Users can pick the element again and that will get transferred to the 
   other product that wasn't filled.
∙ Put the ingredients on the left side and the target foods on the right side - similar to products and reactants in an equation.
To represent these features, Qinwei and I designed the look of the game on Sketch. To implement concreteness fading, all the food metaphors had to fade into actual 
elements in the end. But to make the process less obvious and painful, we designed the fading route to be: all food -> partial atoms -> all atoms -> all text. We also 
incorporated intelligent tutoring through Charlie the Chef and his alien sous chef, Yummy. The game was designed so that the user would be the trainee. Charlie and 
Yummy would help the user create foods that would be safe for 'humans' and 'aliens' respectively through intelligent hints based on the steps the user has taken. 'Alien 
foods' were either a combination of atoms and ingredients or just atoms. This was done to make the transitions into cross fading easier to adjust to.
Implementation
Our next step was to implement the game to conduct a proper user testing. Qinwei and I took responsibility of developing the front-end on HTML/CSS/Javascript while 
Jean and Charlie focused on the back-end using Javascript and jQuery. During the implementation, we discovered an issue with the gameplay. It allowed users to conduct a 
trial and error method by an increment of 1 to the coefficient each time. This proved to be very tiresome. So, we allowed the user to type in the coefficient 
themselves by designing typing levels as the second phase after the clicking levels. The final levels that we came up with are shown below.
It was during the implementation of the game that we decided to call it 'Kitchem' - a terrible play on the words Kitchen and Chemistry. You can take a look at what we 
did by clicking on the logo below.


Click on it and check out what we did

Experimental Setup
Our experiment was designed to determine how well students learn through our game, as well as how engaging our game is. We first designed a short three-question 
survey to gather preliminary information about our users. The first question asked about the grade level of the current student, ranging from grades 6-12 or N/A for not 
applicable. The next question asked how familiar users were with chemistry, using a five-point Likert scale ranging from “1 - I’ve never learned or seen it” to “5 - I passed 
with flying colors.” The last question asked more specifically about balancing chemical equations, again on a five-point Likert scale ranging from “1 - What does that mean?” 
to “5 - I could do it in my sleep!”.

We then created a six-question pre and post test to check users’ knowledge of balancing chemical equations before and after they played the game. A comparison between 
the results would let us know if the users’ ability in balancing chemical equations truly improved or not. We got the equations from online tests and ordered them from 
easy to hard. The survey, pretest, and posttest show up only when the user logs into play the game for the very first time.

User Study and Results
We collect data from the following two aspects:
∙ Pretest and posttest logging: For those who have finished both pre and post test, did their performance improve after playing the game?
∙Level logging:
   - How many levels did they complete in the game (engagement)?
   - How much time did they spend on each level (rationality)?

We put the game on Reddit, and reached over 1000 players in two days. Unfortunately, the study data can't be shared. However, a brief synopsis can be provided:
We discovered that the game mostly improved the users’ abilities to balance chemical equations by 50%. We learned that the game was engaging, although we could 
improve on the user flow. It was hard to tell if the game effectively taught how to balance chemical equations as we need more formal testing with our target audience. 
Many users were impressed by the novelty of the game. They were positively surprised when they noticed how the game progressed from food to chemical equations. In 
fact, one of the users was a chemistry professor teaching middle schoolers who said that he would ensure that all his students used our game to learn balancing 
chemical equations!
Conclusions and Future Work
For a designer, there is no better validation of your work than seeing your users feel impressed by your product in an ocean of technological solutions. 

The feedback we got from our Reddit users provided us with this validation. People helped us debug the game, teachers showed interest to use this as a instructional 
material and some users said they could have done better in chemistry if they had this game while they learning balancing chemical equations.

However, since we never had the chance to test it on real middle schoolers, it is too early to say if this game truly helps users to learn. A formal user test is needed to see 
if this game really helps users learn.

Here are some other cool things I've done

Back to Top