Olga Khvan
What's Up In The Gut?

A game that explains children how humans' microbiome works using physical controllers.


Visit Live website →

Controls for website
1—circle, 2—triangle,
3—zapping Left/Right arrows

Physical controllers + Web-based game
Timeline
10 weeks (February-March '20)
My responsibilities
Prototyping: Coding the game,
Integrating Arduino with web-platform
Game mechanics
Co-design workshops

Tools: JavaScript, P5JS, HTML/CSS, Arduino (C-based), Physical Computing
Prototyping
Team
Rachel UI & Game mechanics
René Electronics & Literature review
Rui Illustrations and controller case construction
Goal
Design a walk-in game for 7-11 y. o. children that leverages social values.
Context
What's Up In The Gut is a 10-weeks grad school project. Our task was to create a walk-in multiplayer game for an open public space. The main idea was to explain to children certain social aspect through the video game. So the game had to be both engaging and educational.
Project timeline
Ideation and Lo-Fi prototype 1
Ideation sketches and dot voting
After a secondary research, we did an ideation session. Concept topics varied from Global Warming to Education. Critique sessions, discussions and dot voting helped us to narrow down to the theme of Space junk. My teammate, Rachel, helped us to bring a more detailed understanding by backing our concept up with certain facts from various resources (lit review).

So the initial idea was to make players collect trash by controlling a spaceship using physical and digital inputs. Each of the trash type will be represented by simple shape. For example, glass—square. To collect specific piece users would need to activate controller for the corresponding shape.

To control spaceship we decided to use balance board, but we had to figure out what type of input to use for trash collecting. In general, we were looking into using these two different types of interactions:
Embodied interactions
Pose or face recognition using Machine Vision tools.
Physical controllers
Simple physical inputs such as joystick or buttons pad
Testing face recognition using P5JS
Goal of co-design session #1: test different types of inputs.

For the physical controllers, I was also able to make a very first prototype of our web-game that was running locally. Then we connected our controllers: balance board and buttons pad using Makey-Makey that imitates key press.
Co-design workshop #1. A. Balance board | B. Buttons pad | C. Web-based game (JavaScript + HTML/CSS) | D. Timer
Testing embodied interactions
Key insights from Co-Design #1 session
Have a bigger goal for the game
Kids liked collecting the trash, but they also had ideas what they could potentially do next after all the trash is collected.
Different preferences for the roles
We assumed that controlling the balancing board will be the funniest part, but some of the kids preferred other controllers.
Give more visual and audio feedback
Kids were confused which role do they play in the game or whether they grabbed a piece of junk.
Wizard of Oz.
Goal: test physical controllers and embodied interactions.

From our co-design session we realized that kids liked moving around and tactile feedback. So we decided to transform buttons pad into three different physical controllers: crank for circle, slider for triangle and stomping pad for zapping. It would potentially make Player 2 role as dynamic as Player 1.

At the same time we still wanted to test embodied interactions as alternative method of input. We had an idea of "grabbing" a shape by showing corresponding shape with the body. I've checked some of the Machine vision P5JS libraries. Potentially, detecting the edge of the body could be transformed into a certain shape.

To test refined interactions again, we used Wizard of Oz technique, where you propose users to test prototype that does not really work and only imitates the interaction. My teammates constructed imitation of controllers, while I was preparing two different versions of web-games.
Testing physical controllers: slider, crank and stomping pad.
Testing embodied interactions: shape recognition.
Game mechanics & Lo-Fi prototype 2
Based on insights from co-design session #1 and Wizard of Oz session, we decided to move forward with physical controllers. It was also technically more viable and realistic.
My teammates, René and Rachel, made Arduino sensors work and passed values for web. Since all the physical controllers (Crank, Slider, Stomping pad) worked as a binary switch, I've connected them to web-prototype as keypresses. Whereas for balance board it was important to know the tilt, so I've read exact values from serial port. Negative values—move ship to the left, positive values—move ship to the right.
Game mechanics
After several pivots, we decided to have Microbiome as the main topic. We wanted specifically focus on importance of fiber in organism and how it helps to produce good bacteria in the gut.

So for our refined game concepts we decided to have different types of meal. Healthy meal gives user a lot of fiber, unhealthy meal gives less fiber and make bad bacteria appear in the gut. I've explained how I set different counters and variables in code, so that we could decide how exactly our game will work. Then I implemented it in code.
Co-design session 2
Goal: Usability testing.

This session was more like a Usability testing session of the refined game mechanics and controller. We also tested different variations of progress bar and score to see what makes kids more engaged.
Left: my teammates (Rui, René, Rachel) | Right: Co-design session 2
Two main key takeaways from this co-design sessions:
1. This game can by played by 3 players too.
2. Even though we added progress bar and score counter, kids did not pay attention to it.

So for our final prototype we had to think again how to make goal of the game more notable.
Final prototype
My teammate, Rui, designed a construction for a physical controllers and drew the illustrations for the game. We were able to finish assembling a physical prototype right after one of lockdown.
Under the hood of physical controller:
Balance board
Accelerometer sends tilt value to serial port. This value is read by web-game.
Stomping pad
Pressure sensor value imitates a key press. Works as a binary switch.
Crank
Every full cycle or the rotary encoder imitates a key press and sends signal to a web-game.
Triangle slide
When slider is up, switch is on. It imitates a key press and sends signal to web-game.
Old and new physical controllers
Because of the quarantine, final version of web game (including integrating certain animations, onboarding UI, adding new levels and better visual feedback for game goal) was finished remotely.


We had daily meetings throughout two weeks, when we reviewed scope of work and what was done.

Result
Player 1: moving character left-right
Player 2: grabbing triangle
Player 2: grabbing circle
Player 2 or Player 3: zapping bad bacteria
Liked the case study? Play the game →