Menu

Food Trek

Game Design

Food Trek is a multiplayer game with both vertical and side scrolling elements meant to model Food Apartheid, in which players must balance their nutrition and budget as they catch foods. More commonly referred to as food deserts, in recent years several scholars have taken to dubbing these locals as having been affected by food apartheid, to reflect the purposeful structuring of food insecure zones. Food insecurity is an issue affecting 23.5 million people in America alone.

Role

Role

Lead Game Designer
Interaction Designer
User Researcher

Lead Game Designer
Interaction Designer
User Researcher

Lead Game Designer
Interaction Designer
User Researcher

Project Duration

Project Duration

10 Weeks

10 Weeks

10 Weeks

Industry

Industry

Gaming

Gaming

Gaming

Team Size

Team Size

4 Members

4 Members

4 Members

Challenge

Our initial design challenge was to design a walk-up and play game based around a social impact of our choosing. We defined our problem statement as: How can we model food apartheid in a game, respecting the serious nature of the topic but leaving players with a memorable takeaway message?

Outcome

We discovered that players both had fun and understood the message of our game. When players were asked to switch controllers the social impact became apparent to most all players, and players readily discussed their experiences with each other and the team while playing.

Tools and Materials

Visual Design: Figma | Photoshop | DALL-E
Code: P5.JS | MakeCode
Hardware: Adafruit CPX | foam core | plywood

Challenge

Our initial design challenge was to design a walk-up and play game based around a social impact of our choosing. We defined our problem statement as: How can we model food apartheid in a game, respecting the serious nature of the topic but leaving players with a memorable takeaway message?

Outcome

We discovered that players both had fun and understood the message of our game. When players were asked to switch controllers the social impact became apparent to most all players, and players readily discussed their experiences with each other and the team while playing.

Tools and Materials

Visual Design: Figma | Photoshop | DALL-E
Code: P5.JS | MakeCode
Hardware: Adafruit CPX | foam core | plywood

Challenge

Our initial design challenge was to design a walk-up and play game based around a social impact of our choosing. We defined our problem statement as: How can we model food apartheid in a game, respecting the serious nature of the topic but leaving players with a memorable takeaway message?

Outcome

We discovered that players both had fun and understood the message of our game. When players were asked to switch controllers the social impact became apparent to most all players, and players readily discussed their experiences with each other and the team while playing.

Tools and Materials

Visual Design: Figma | Photoshop | DALL-E
Code: P5.JS | MakeCode
Hardware: Adafruit CPX | foam core | plywood

94%

of Players (n=31) understood Food Trek

of Players (n=31) understood Food Trek

94%

of Players found the experience impactful

of Players found the experience impactful

80%

of Players (n=31) visited website

of Players (n=31) visited website

Process

Process

Process

01

Ideation & Design Direction

The first step was to both determine a social impact cause and how our game would function. The game had to be multiplayer in some capacity, and our team was to design and build custom input controllers in addition to coding the game. Initially, we were between exposing biases and raising awareness of food deserts.

02

Concept Iteration

Once set on trying to model Food Deserts we took a step back and did research into different types of games and game mechanics. Keeping in mind how we would not only model Food Deserts but build novel controllers that contextually added to the experience for both players.

03

Refining Game Mechanics

My main considerations when refining the concept were conveying the variable factors that contribute to Food Apartheid, and linking each players gameplay experience to their context in-game.

04

Physical Prototyping

We used p5.js to code and host our game. In order to help simulate the difference in how much work one exerts to acquire healthier foods based on food abundance we created 2 sets of pedals mounted at differing distances.

05

Tokens of Impact

The greatest challenge of this project was promoting a lasting impact or even a call-to-action for players. Building on an idea from our earliest concept I had the thought to give players a physical token that they could interact with to learn more on Food Apartheid.

06

Visual Design & Style Guide

My main inspiration for the visual aesthetics of our game was actually that old school arcade (Time Crisis, Mega Man, Scott Pilgrim) theme and vibe consisting of bright and bold colors and a 16 to 32-bit styling.

01

Ideation & Design Direction

The first step was to both determine a social impact cause and how our game would function. The game had to be multiplayer in some capacity, and our team was to design and build custom input controllers in addition to coding the game. Initially, we were between exposing biases and raising awareness of food deserts.

02

Concept Iteration

Once set on trying to model Food Deserts we took a step back and did research into different types of games and game mechanics. Keeping in mind how we would not only model Food Deserts but build novel controllers that contextually added to the experience for both players.

03

Refining Game Mechanics

My main considerations when refining the concept were conveying the variable factors that contribute to Food Apartheid, and linking each players gameplay experience to their context in-game.

04

Physical Prototyping

We used p5.js to code and host our game. In order to help simulate the difference in how much work one exerts to acquire healthier foods based on food abundance we created 2 sets of pedals mounted at differing distances.

05

Tokens of Impact

The greatest challenge of this project was promoting a lasting impact or even a call-to-action for players. Building on an idea from our earliest concept I had the thought to give players a physical token that they could interact with to learn more on Food Apartheid.

06

Visual Design & Style Guide

My main inspiration for the visual aesthetics of our game was actually that old school arcade (Time Crisis, Mega Man, Scott Pilgrim) theme and vibe consisting of bright and bold colors and a 16 to 32-bit styling.

01

Ideation & Design Direction

The first step was to both determine a social impact cause and how our game would function. The game had to be multiplayer in some capacity, and our team was to design and build custom input controllers in addition to coding the game. Initially, we were between exposing biases and raising awareness of food deserts.

02

Concept Iteration

Once set on trying to model Food Deserts we took a step back and did research into different types of games and game mechanics. Keeping in mind how we would not only model Food Deserts but build novel controllers that contextually added to the experience for both players.

03

Refining Game Mechanics

My main considerations when refining the concept were conveying the variable factors that contribute to Food Apartheid, and linking each players gameplay experience to their context in-game.

04

Physical Prototyping

We used p5.js to code and host our game. In order to help simulate the difference in how much work one exerts to acquire healthier foods based on food abundance we created 2 sets of pedals mounted at differing distances.

05

Tokens of Impact

The greatest challenge of this project was promoting a lasting impact or even a call-to-action for players. Building on an idea from our earliest concept I had the thought to give players a physical token that they could interact with to learn more on Food Apartheid.

06

Visual Design & Style Guide

My main inspiration for the visual aesthetics of our game was actually that old school arcade (Time Crisis, Mega Man, Scott Pilgrim) theme and vibe consisting of bright and bold colors and a 16 to 32-bit styling.

01

Ideation & Design Direction

The first step was to both determine a social impact cause and how our game would function. The game had to be multiplayer in some capacity, and our team was to design and build custom input controllers in addition to coding the game. Initially, we were between exposing biases and raising awareness of food deserts.

02

Concept Iteration

Once set on trying to model Food Deserts we took a step back and did research into different types of games and game mechanics. Keeping in mind how we would not only model Food Deserts but build novel controllers that contextually added to the experience for both players.

03

Refining Game Mechanics

My main considerations when refining the concept were conveying the variable factors that contribute to Food Apartheid, and linking each players gameplay experience to their context in-game.

04

Physical Prototyping

We used p5.js to code and host our game. In order to help simulate the difference in how much work one exerts to acquire healthier foods based on food abundance we created 2 sets of pedals mounted at differing distances.

05

Tokens of Impact

The greatest challenge of this project was promoting a lasting impact or even a call-to-action for players. Building on an idea from our earliest concept I had the thought to give players a physical token that they could interact with to learn more on Food Apartheid.

06

Visual Design & Style Guide

My main inspiration for the visual aesthetics of our game was actually that old school arcade (Time Crisis, Mega Man, Scott Pilgrim) theme and vibe consisting of bright and bold colors and a 16 to 32-bit styling.

Ideation & Design Direction

Ideation & Design Direction

Constraints

Walk-up and play games should require minimal or no set up by players. The experience should not require extensive instructions and players should be readily able to understand controls, concepts, and goals. The game experience should also be able to conclude in ~10 mins.

  • At least one input controller must incorporate an Adafruit CPX unit running novel code for input


  • Players should be able to play at the same time or ‘simultaneous multiplayer’ as opposed to ‘asynchronous multiplayer’


  • As a team we were to use, and extensively document our interactions with, AI tools to help code our game in JavaScript

Idea Generation - Affinity Mapping

After early individual ideation my team gave pitches for 15 ideas each. Each pitch was based around tying a social impact cause or need to a game concept. After exploring all 60 concepts we used the dot voting method to affinitize and select potential social impact causes


  • After multiple rounds of down-selection we narrowed down our focus to 2 social-impact causes, that being the biases within everyone and the realities of food deserts

Initial Concepts

Light-ly Biased:


Players must work together and use clues and exploration to match a “bias” description card with an illustrated scenario card.


  • Gamified search-and-match process promotes players' ability to recognize internal biases


  • Metaphorical representation of cards hidden on the screen signifies that biases are 'hidden' in plain sight


  • Collaborative nature of game in hopes to normalize conversations on bias


  • Metaphorically and literally “shining a light” on bias

Priority Tug-O-War:


Players use one of three controllers to balance health, time, and money. Challenging the notion that poor health and eating habits signify character flaws.


  • Aimed at addressing the stigma around nutrition insecurity,


  • We debated on the objective based on the potential implications on players if the experience was competitive vs collaborative


  • We struggled to highlight many of the inequalities and factors that contribute to food deserts

The Deciding Factor - Food Apartheid

At this stage we conducted concept evaluations and continued desk research to focus on the impact and takeaway message we hoped to impart on players. We eventually came across more recent literature on the causative factors of food deserts. As opposed to deserts which are naturally occurring, experts have begun to label these areas as Food Apartheid; an intentional and systemic issue.



Major Contributor:


Supermarket Redlining - The practice of major chain supermarkets deliberately pulling store locations out of inner-city or low-income neighborhoods and relocating them to wealthier suburbs. Chains find these lower-income neighborhoods less profitable, but removing nutritious food access only perpetuates the inequalities that make these areas less profitable

Local Connection:


Even the Seattle natives on my team were surprised to see exactly where on the map was deemed a food desert or under the influence of Food Apartheid.


  • Made apparent just how easy it is to drive or commute through affected areas without experiencing firsthand the inaccessibility


  • Opportunity for our game to be themed or centered around different neighborhoods of Seattle.


    • Intention was to provide a happy moment for players when they recognize a neighborhood, encouraging considering the setting of each stage of the game.

Concept Iteration

Concept Iteration

Priority Tug-o-war:

Initial feedback on the concept and controllers was extremely positive, however this iteration focused on the controllers and trying to capture the ‘fun’ element.


  • Players felt a low depth or connection to nutrition insecurity possibly due to lacking a sense of gameplay narrative

Falling Foods

While constructing storyboards I was reminded of an old flash game where the goal was to collect artifacts that fell from the sky. After a few attempts I set out to do a mock-up using Figma for rapid prototyping


  • Incorporated plate controller motif


  • Generated Seattle backdrop, character, and food sprites using DALL-E

Novel Input Controllers

We explored different forms of physical controllers, initially experimenting with a spinning plate to dictate the on screen character's movement direction. Ultimately, we selected two controllers that emphasized the physical aspect of moving a character from left to right, playing with more simple motions of bodily shuffle and bodily tilt as our main mechanisms of gameplay.

Foot Pad Controller:


A low-fidelity controller designed to look like a road, featuring two elevated buttons on each side of the pathway. Players shuffle from side to side, pressing the buttons to navigate the avatar left or right.


  • The physical movement is meant to simulate the physical labor of acquiring nutritious foods


  • WoZ Setup: Cables were taped to the undersides of the buttons and extended to the TV to give the appearance of functionality.

Balance Board Controller:


A wooden balance board designed for players to sit and control by placing their feet on it. Shifting weight left or right moves the avatar in those directions on the screen.


  • The tilt function of the Balance Board offers an opportunity to explore a more fluid method of input and the seated setup is more accessible


  • WoZ Setup: A CPX, connected to a battery pack, was secured underneath the balance board to simulate activation and input

From Falling Foods to Food Trek (V1!)

We decided to simplify the interface by eliminating the time bar and introducing a dynamic nutrition bar to encourage active player engagement. By designing the game as a comparative experience each player engages independently while playing simultaneously; encouraging discussions and a deeper understanding of the disparities between each neighborhood for both players.

Concept Evaluation

To test the initial concept of our game in addition to the feasibility between our two low-fidelity controller concepts we conducted Wizard of Oz (WoZ) testing. I served as the primary interviewer during this round of testing.


  • Most participants felt the balance board controller was 'easier' and may be accessible to those who cannot stand for long periods of time


  • All participants preferred the foot pad controller and felt it greater embodied our message around nutrition insecurity


  • Discovered bugs and glitches in our code, such as the food all falling at once during round start or character sprites not turning directionally

Refined Concept & Game Mechanics

Refined Concept & Game Mechanics

Food Trek

Objective:


Players take turns playing each round before switching to the other. This sequence allows players to observe and understand the differences between the two game environments. The aim of this side-by-side multiplayer setup is to promote dialogue between players by having them transition between a nutrition-abundant and nutrition-scarce neighborhood, but keeping the overall game mechanics the same.

Game Mechanics

Food Abundant:


In this sequence players have a large budget and healthier food options are more prevalent throughout the round; mirroring the access to healthy food options found in abundant areas. The foot pedals are mounted just outside of shoulder width, giving the player more access to the controls and decreasing the effort of acquiring food.


  • As players nutrition decreases their player size decreases, increasing the difficulty of traversing the screen and collecting foods


  • If users successfully survive the rounds' time limit without spending their entire budget players will win

Food Apartheid:


In this sequence players have a much smaller budget in addition to having low rates of moderately healthy foods and no high nutrition foods. This models the external difficulty of both staying nutritious and maintaining a budget in food inaccessible areas. Furthermore the pedals are mounted much further apart forcing the user to work harder to acquire food.

Onboarding

Controller Onboarding:


Due to our platforms having slightly varied setups for the controller mounting we integrated the onboarding into the controls for navigating the onboarding screens.

Grounding Players:


To encourage players to start considering food availability in each area before jumping into the gameplay experience we provided a legend and map during onboarding


User Feedback:


  • Our first map had pins that were identical besides color and lacked a legend so players struggled to identify the disparity in available choices

Onboarding cont.:


We overlayed the onboarding for gameplay elements over the in game UI itself.


User Feedback:

  • Original onboarding was a loading screen, however players were still confused during gameplay due to UI

Usability testing

After we built the controllers and coded the full game we conducted Usability Testing ahead of our public showcase to evaluate:


  • Whether players understood the onboarding, game mechanics, and overall social impact of Food Trek


  • How effectively our game modeled Food Apartheid

Physical Prototyping

Physical Prototyping

Form & Function

To help reinforce and support our experience we created a few methods to ground players both physically and geographically.


  • To model the difference in how difficult it is to attain the right food choices in food insecure areas we mounted the pedals at different distances for each experience


  • We created a border for each play area that modeled the Seattle skyline, this was meant to help ground our users' experience from the moment they stepped up onto the platform

Mid-Fidelity Controllers and Frame

Interaction:


Our development led to the creation of box-shaped pedals in our mid-fidelity prototype. We connected a CPX unit to the underside of each pedal. Utilizing MakeCode each pedal was linked to either the left or right arrow key.

Form (Foot Buttons turned Foot Pedals):


  • We integrated a small balloon to provide a fluid feel and enable a more nuanced tactile feedback when the pedal is pressed

  • We also encased the play area within a city-frame constructed from foam core in order to ground players in the city of Seattle

Hi-Fidelity Controllers and Frame

Interaction:


4 CPX units were used, each connected to a button embedded in a foot pedal via soldered conductive wire. A long press resulted in continuous movement, while a short press initiated a single step.

Form & Hardware:


  • 4 total pedals (2 sets)

  • Plywood boards bonded using superglue and hinged together using metal door hinges

  • Integrated a metal spring adjacent to embedded button

Tokens of Impact

Tokens of Impact

Measuring Impact

To provide a deeper impact without overloading players with text in-game, we created an external site for Food Trek. The site has information, resources, and organizations for players. We are also able to track the websites' metrics and provide updated information on food apartheid.

Informing Seattle:


By creating a companion site for Food Trek, users can not only take away a memento of their experience but are connected to the resources in their area they can make use of.


  • Exemplifies how Food Trek can be a model to help combat local food insecurity in varying areas

Visual Design & Style Guide

Visual Design & Style Guide

Design Aesthestic

As stated above the inspiration and theme for this game and experience were a 90's arcade feel. Reminiscent of a 16-32-byte animation style. The aesthetic was meant to be readily familiar for players of all ages and the simple graphics lended to an easier time comprehending gameplay and narrative elements.

Sprites and Graphics

Using DALL-E, I prompted for hundreds of different sprite sheets according to our contextual needs. From creating backdrops set in Seattle food markets to character and food sprites.


  • Used a combination of Figma and Photoshop to isolate, combine, and edit sprite sheets into walking animations and final game sprites


  • Created guidelines to regulate the LLM as not to make negative or stereotypical associations of food insecure areas


  • To ensure a cohesive art style I kept of log of dialogue trees that led to successful sprite sheet generation

Challenges | Reflection

Challenges | Reflection

Challenges | Reflection

Challenges | Reflection

Challenges | Reflection

Over the course of bringing Food Trek to life we encountered many challenges. Aside from the code one of the more intricate challenges was imparting an understanding of the underlying variables that contribute to nutrition insecurity, to a diverse audience, while maintaining the games aesthetic and simple controls.

Going forward if we were to launch a higher fidelity version of Food Trek the main goals for Version 2 would be:


  • Expand the website on food insecurity, and add metrics


  • Debug the game code for a more seamless experience


  • Create a new set of pedals with a larger spring size and wire channels

  • Hide wires and mount projectors to the ceiling

Contact

Let's start creating together

Contact

Let's start creating together

Contact

Let's start creating together

Contact

Let's start
creating
together

Contact

Let's start creating together