wheelin & mealin hero

Wheelin' n Mealin'

separator bar

Timeline

January 2021 - Present

Tools

Figma, Procreate, Discord

UI/UX Team

Katie Xu, Sharon Lin, Natalia Godoy

Role

UI Designer

About

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

separator bar

Skills

Cross-Functional Collaboration, Game Design, High-Fidelity Prototyping, Illustration

separator bar

Process

1. Receive UI assignment.
2. Create moodboard of analogous UI designs.
3. Present first pass to the Game Director.
4. Iterate based off the Game Director's feedback.
5. Present final pass to the Game Director.
separator bar

Trailer

separator bar

Gameplay & Dev Talk

Here is a gameplay demo of Wheelin' n Mealin' that was showcased at USC Expo on Twitch.
separator bar

Customization

Before players enter the actual game, they have the option to customize their characters and their vehicle. I experimented with one-screen and two-screen approaches for character and vehicle customization.

My one-screen approaches mostly consisted of grid-based or carousel-based menus. However, when I was sketching the one-screen approach, I wondered, 'What would the player experience be like if there were 50 accessories? Wouldn't it be tedious to have to carousel through 50 accessories one-at-a-time?'

That's why I ultimately separated character and vehicle customization into two distinct screens, so that more information could fit onto each page.

Three different sketches of a potential customization menu that featured a one-screen approach for driver, chef, and vehicle.
A two-screen approach where driver and chef had their own page, and then there was a separate screen for vehicle modification.

When I showed these sketches to the rest of the Wheelin' n Mealin' team, they most resonated with my two-screen approach. With this feedback, I refined my original sketches and converted them into a Figma mockup.

In the higher-fidelity mockup, the color and pattern for the vehicle is separated into two different grids. Our director envisioned collaboration to be a core feature of the game even before players entered a round of gameplay. So, the driver would be able to choose the color, and the chef would be able to choose the pattern of the vehicle; they would each contribute to one part of a whole, just like how they would in-game once they entered the round.

High-Fidelity mockups of the final customization screens.
separator bar

Leaderboard

Once a round is finished, players can see how well they did and the progress needed for the next set of unlocks through our Leaderboard screen. In addition, they can see how they stack up against other restaurant rankings in the world of Wheelin' n Mealin'.

While I had originally envisioned a horizontal progression format, the team wanted the Leaderboard screen to be more diegetic, meaning that it could be rendered as a 3D model and placed within the world of the game. So, I changed the Leaderboard screen to a vertical format reminiscent of old-school wooden scoreboards to better fit this vision.

Eventually, I set about redoing the Leaderboard screen to have more polish. In this latest version, the background was no longer a nebulous UI void. Players would see their scores by looking through a long receipt, before pulling down the receipt and revealing the Leaderboard screen behind it. The team and I found this UI to feel more interactive and engaging.

Leaderboard sketches.
First pass of the Leaderboard screens.
Latest pass on the Leaderboard screens, with a more engaging background.
separator bar

Da Big Book

'Da Big Book' is an optional screen that can be accessed from the main menu. While a lot of thought went into each of our ingredients, dishes, customers, and locations, it wasn't possible to fit all of that information into the gameplay itself. So, when players unlock recipes or locations, they have the option to read the flavor text behind them in 'Da Big Book.'

When the player opens 'Da Big Book' for the first time, they might encounter several locked pages. The more rounds they play, the more content they'll unlock within both the game and 'Da Big Book.' Having flavor text revealed in 'Da Big Book' of unlockable items acquired over time can create a more tangible sense of progression for the player.

For these screens, I illustrated the assets for 'Da Big Book' itself, including the front and back covers, open pages, and locks (the recipes themselves were illustrated by our Art Lead). These Procreate illustrations were then transferred onto Figma, where I added more traditional UI elements, such as buttons and sliders.

High-Fidelity mockups of 'Da Big Book.'
separator bar

Twitch Integration

Our game also aims to feature Twitch integration in the future. As a streamer on Twitch, you can have your audience interact with the game through in-chat commands. With Wheelin’ n Mealin’, the audience has the opportunity to give the streamer’s vehicle a powerup, or participate in pre-round voting where they can vote on one of three randomly selected in-game events to either help or hinder their streamer. Since very few games have native Twitch Integration, this was a really great opportunity for the team to innovate within the gaming space.

The way we approach Twitch integration, the Twitch audience is able to dictate the events of a round before the start of a game through a pre-round Twitch voting screen called Dealin' or Stealin'.
When the streamer presses the Next button, the slot machine will select three random events from our event pool and display them on the screen. Once the three events show up on the screen, there is then a small window of time in which the audience may vote on which event they want implemented into the next round by typing “1”, “2”, or “3” into Twitch chat. While the character was once again created by our Art Lead, I illustrated/designed all the other assets on the screen using Procreate or Figma. 

A sample round of pre-round Twitch chat voting.
separator bar

Challenges

This was my first time working on a cross-functional project. This was also my first time starting work on a project that was already several months into development.

While this game started out as a USC Games project, I had never actually attended USC. Instead, my high school friend who did attend the school reached out to me in January 2021 and asked if I would be interested in working on this game she was producing.

As soon as I (very enthusiastically) agreed to help her out with her project, I realized I had a lot of catching up to do, since the game was already halfway through development. So, when I was brought onto the team, I pored through all the documentation I could find in our shared Google Drive — starting from marketing materials, to playtesting records, to design documentation.

Though this process of understanding the game took me a week, I felt very confident in my ability to design for Wheelin' n Mealin' once I actually began work on the project.

separator bar

Even more Challenges

At the moment, this game is only optimized for PC, and only works with Xbox and Playstation controllers. As I own a Mac, do not own an Xbox, and do not own a Playstation, I was unable to play or test the game throughout my time working on Wheelin' n Mealin'.

To deal with this technological setback, I made sure to synchronously participate in our playtests or asynchronously watch all of our playtest recordings. In that way, I was able to vicariously experience the game from a player's lens to see what problems, bugs, and glitches they were experiencing — and also postulate on how to fix them.

Additionally, I purchased an Xbox controller to simulate cycling through menus on consoles. This ensured that I made the UX experience as intuitive as possible.

separator bar

Takeaways

Working cross-functionally meant communicating. A lot. For the most part, I spoke with people from the UI, Design, Art, and Engineering teams, as well as the director himself. By coordinating with people from other teams, I learned how to create designs that would be feasible to implement into a final product. I also learned how to pitch ideas that would be within scope for other teams, specifically Design or Engineering.

separator bar

Next steps

After the USC Games Expo, Wheelin' n Mealin' was accepted into the Summer Bridge program, which is an incubator program with the goal of developing a publishable product to pitch to major investors or publishers within the gaming industry.

As of 2022, I am still working with the Wheelin' n Mealin' team to tweak, adjust, or even redesign our current UI. We plan on launching our game on the Steam and Epic stores in 2022.