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
Product 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 a round of gameplay, they have the option to customize their characters and vehicle. I experimented with one-screen and two-screen approaches for character and vehicle customization. My one-screen approaches 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.
Upon completing a round of gameplay, players are brought to the Leaderboard screen to see different types of score rankings, as well as what progress is needed for the next set of unlocks. Players can also see how their ranking stacks up against other restaurants 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.
I added polish to the final pass of the Leaderboard screen by inserting building illustrations from our talented Art Director to the background. 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.
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’. The acquisition of flavor text for unlockable items in ‘Da Big Book’ 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. Streamers on Twitch could have their audience interact with their gameplay through chat commands. Since very few games have native Twitch integration, this gave our team an opportunity to innovate within the gaming space.
Before starting a round of gameplay, 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. 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 ended that week feeling confident in my ability to design for Wheelin' n Mealin' once I actually began work on the project.
This also marked my first time doing hand-drawn UI illustration. Since the UI Art direction followed the Art direction, I asked the UI Team how they had been approaching their UI Art methodology up to that point. From then on, I made sure to use the same digital art brushes and general color scheme. 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 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.