Wheelin’ n 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, deliver crazy dishes to satisfy their customers, and claim their place at the top of the restaurant world!
January 2021 - January 2022
UI Designer
Katie Xu, Sharon Lin, Natalia Godoy
Figma, Procreate, Discord
1. Receive UI assignment
2. Create moodboard of analogous UI designs
3. Present first pass to the UI Team
4. Iterate based on the UI Team’s feedback
5. Present final pass to the Game Director
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.
When I showed these sketches to the rest of the Wheelin’ n Mealin’ team, they preferred my two-screen approach. With this feedback, I refined my original sketches and converted them into a Figma mockup.
In the high-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 in the vehicle customization screen, the driver would be able to choose the color and the chef would be able to choose the pattern of the vehicle. Both players would equally contribute to one part of a whole, just like how they would in-game.
Once a round of gameplay is finished, players go to the Leaderboard screen to see how well they did and the progress needed for the next set of unlocks. In addition, players 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 real-world environment of the game. So, I changed the Leaderboard screen to a vertical format reminiscent of old-school wooden scoreboards to better fit this vision.
For my final pass of the Leaderboard screen, I added building illustrations from our talented Art Director to the background so that it was no longer a nebulous void. Players would first 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.
'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 in both the game and ‘Da Big Book’. Acquiring flavor text of unlockable items in ‘Da Big Book’ 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 Director). My Procreate illustrations were then transferred onto Figma, where I added more traditional UI elements, such as buttons and sliders.
This game also featured Twitch integration. As a streamer on Twitch, you could have your audience with the game through chat commands. Since very few games have native Twitch integration, this gave our team an opportunity to innovate within the gaming space.
Prior to the start of a game, the Twitch audience could participate in a pre-round voting screen called Dealin’ or Stealin’, where they could vote on one of three randomly selected in-game events to either help or hinder the streamer. When the streamer pressed the Next button, the slot machine would select three random events from our event pool and display them on the screen. Then, there would be a small window of time in which the audience could vote on which event they wanted implemented into the next round by typing “1”, “2”, or “3” into the Twitch chat. While the character was created by our Art Director, I illustrated and designed all other assets on the screen using either Procreate or Figma.
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.
This marked my first time doing hand-drawn UI illustration as well. Since the UI Art direction followed the Art direction, I asked the UI Team how they had been approaching their UI Art methodology up until that point. From then on, I made sure to use the same digital art brushes and general color scheme as them. Since our game was bright and colorful, I got to employ a more vibrant palette. Learning to match my UI illustrations to the Art Director’s work challenged me to create splashy UI that added to the visual and emotional experience of the game without distracting from the more important artwork or gameplay.
Working cross-functionally meant lots of communication. For the most part, I spoke with people from the UI, Game Design, Art, and Engineering teams, as well as the Game Director himself. By coordinating with people from other teams, I learned how to create UI 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 Game Design or Engineering.