Whealin' & Mealin'

Wheelin' & Mealin' is a co-op two player cooking and driving game for PC. Players work together to maneuver their souped-up race car through a fantastical city, delivering crazy dishes to satisfy their customers and claim their place at the top of the restaurant world.

Key Art

About the project:

Timeline: September 2020 - August 2021

Website: https://www.wheelinnmealin.com/

Role: UI/UX Designer

Tools: Figma, Procreate, Discord

UX Team: Sharon Lin, Katie Xu, Natalia Godoy

Trailer

Demo showcased at USC's 2021 Games Expo

Designing the Gameplay Screen

First Pass/Rough Draft for Alpha

Challenges:

Wheelin' & Mealin' is a 2 player game. The Driver's main focus is the roads and the 2d environment, whereas the Chef manages the inventory of ingredients and cooks recipes before the timer runs out. This quickly presented a major UI challenge; while the driver's main game is the racing experience, the chef's entire gameplay is confined to the on-screen UI elements. It became a major design challenge to ensure that the gameplay was balanced between both players, neither outshining the other.

This also made designing the UI even more challenging. It required a heavy amount of widgets on the screen at the time, and each widget needed to be complicated enough to give the Chef enough tasks to play with, while not too complicated to confuse them.

Sketch

Cooking Widget

The majority of the chef's gameplay was focused on the widget in the bottom right, the Cooking Widget. After Alpha, additional mechanics were introduced to the cooking widget to make the Chef's experience more balanced with the drive. I began with the sketch on the right, breaking down the pieces.

At the top, the Widget contained the Recipe Name. The two following columns showed information about the customer, including their Likes and Dislikes. In W&M, not only is it necessary to complete the recipe before the timer runs out, but you must also tailor the recipe to the Customer's liking. When the players complete an order, they're given a rating, and failure to pay attention to a customers Likes and Dislikes will lead to a bad rating.

Each recipe has one specific main ingredient that you are required to collect, and up to 3 additional ingredients. The additional ingredients are not specified exactly, instead giving you the food group and allowing you to choose what to fill in. For example, rather that asking you to collect Porkpeach, the driver could pick up any fruit. However, if the Customer's Likes and Dislikes spelled a dislike of the "Sweet" flavor, they might get a poor rating if they cook the recipe with Porkpeach. Instead, they should look for Lemon, to avoid dissatisfying the customer.

Wireframe Mock-Up

All of this information needed to be displayed in one small widget.

I ended up keeping the title at the top, adding controls on both sides to switch between recipes. I used the following section to display Customer information. The circle contained the customer's name, and the red and green boxes represented the Likes and Dislikes. Through internal play-testing, we found that using red-green color associations could be inaccessible to many who deal with red-green colorblindness. Thus, we conducted several user tests with both smiley-face representations next to the Like and Dislike text, as well as plusses and minuses. We found that players were quicker to understand the meaning with mathematical iconography, so we ended up replacing the smileys with the plus and minus.

Final Mock-Up

The 3 screens show the process of cooking a recipe using the cooking widget.

The player begins with the main ingredient highlighted in the center: Cavemite Niblet. This section of the recipe is not interactive, and the controller does not allow the player to click on it. The following ingredients are interactive simply reading out the ingredient type to be collected.

The leftmost screen is an example of what the Cooking Widget would show if the Driver had not yet collected any ingredients for the Chef. Once the Driver had collected the Cavemite Niblet, the main ingredient would display, with a small thumbnail of the ingredient and a lighter backsplash. When the Driver collects ingredients that would satisfy the categories of the additional items (Grain, Fruit, Grain), the dark orange bar would be replaced by the purple, asking the Chef to select a viable ingredient from the inventory. After one was selected, it would fill in ingredient thumbnail, name, and flavors of the said ingredient. This way, players could check whether they were meeting the customer's Likes and Dislikes before cooking the recipe.

UI Sample

Next Steps

I continue to volunteer with the Wheelin' & Mealin' team. After the USC Games Expo, Wheelin' & Mealin' was accepted into the USC Games Summer Bridge program, an incubator program focused on developing a publishable product to pitch to major investors/publishers in the games industry.