TL;DR
A fully web-based multiplayer racing game where Google Earth's 3D tiles are the racetrack. I designed the UI/UX layer around the tech - onboarding, lobby, HUD — so a stranger could start racing in under 10 seconds.
Took the game from a flow-less tech demo to pick-up-and-play
Borrowed proven patterns from Mario Kart + Among Us
3rd Place, Vanderbilt CS Immersion Showcase + FortyAU Award
Before any UI existed, opening the build dropped you straight onto the live map. The race only started once a second player happened to join. Besides the racing mechanic and the idea, we had very little besides the vision. no lobby, no setup, no shared goal. There were no user flows yet. That part had to Be designed from the ground up.
Open App
Dropped onto live map
Race starts whenever
This was a casual game which would be played at a showcase that would not be very forgiving of any sort of learning curve. I leaned on Jakob's Law: people prefer interfaces that behave like ones they already know. So instead of inventing new patterns, I borrowed two very popular ones that had already proven themselves.
From Among us
Room/Lobby code system
Usernames and friend systems create friction. A 4-digit room code turned multiplayer setup into a 10-second flow.
From Mario Kart
Userflow, HUD, amongst other things borrowed
It's no secret how much of this is inspired by Mario Kart. The game flow, the selection screens, the HUD are all borrowed, and deliberately so. The conventions in these games carry decades of muscle memory, much of it borrowed over the years by other racing games. Reinventing the wheel would provide little benefit for the user.
The Host/Join game screen from the highly acclaimed multiplayer game Among US
The character selection screen from Mario Kart 8
The In-RACE HUD in MArio KArt 8
Borrowing this pattern for Google Earth kart
The Multiplayer set up for our game ran on websockets under the hood, but this technical element was something that didn't need to be front and centre to players. I designed the flow to be split by these two different responsibilities. The ideas from the research into other games were also incorporated into the Redesign.
Lobby & Roles
The experience here was different for the two kinds of players: the Host and the guest.
Host
Responsible for setup. This involves them creating the track, assigning the number of laps, and assigning the speed of the race. After all this is setup they are able to choose a character + a kart and then the game is ready for other players to join.
Guest
Types the join code, chooses a character/kart, and then is ready to play.
Initial wireframe sketching out the "Host vs. Join" logic.
Initial wireframe sketching out the "Host vs. Join" logic.
HUD Layout
inspired by Mario Kart, the heads up display shows the lap counter, a position marker, and a minimap to the user in such a way that its visible at a glance but doesn't distract the user's focus on the road or other players.
Minimap on the top right hand corner
Lap Counter on the bottom left corner
position marker on the bottom right corner
Select Screen
Borrowed the idea of a pre-race select grid — the structure is Mario Kart's, what fills it isn't. THis Pre-select chAracter and Kart grid is another structure borrowed from Mario Kart but it was another way to personalise the game for our players.
A lot of recent web games look like web apps and that was something we were trying to avoid. I really wanted the process of navigating the UI to be a fun experience even before the actual game and so I leant into some other sources of inspiration. SOme visual reference points for me during this part were mobile games which I picked as inspiration because these were popular games with a visual language people already associated with play.
Built for thumbs
Some people may have noticed that the buttons in the game are a bit oversized. It definitely helps users quickly jump around in the UI, but the other reason for this is that these buttons were sized for fingers. A mobile port was on the table early in the project, and so the touch-target sizing was baked into the game by the time we realised we weren't going to have enough time to port it over. This could have been changed but the benefit of larger touch targets
Very much Touch-target sized. SHown here with hover state activated button below.
Top: Default ready up button
Middle: RButton with hover state
Bottom: Clicked button
Buttons in HAyday
Buttons in Clash Royale
A colour palette borrowed from the planet
The blue-green gradient inside the logo is meant to represent Earth. The same colors that color the game's actual setting show up in the mark itself, so the brand and the product are telling the same story.
Blue to Green representing the OCeean and LAndmass of Earth
#FC9B2D
#F87E23
#3183FF
#193969
#59DF80
#338145
#959595
Details make up the whole
Analysing video games, arcade games, and mobile games showed me how the choice of typography added to the experience, and as such I decided to pick the following typefaces for the UI that would add to the feeling of fun and joy.
Primary Text: Catfiles
Made for the room it would be played in
The game wasn't demoed to strangers, rather our campus community who'd recognise every reference. I ended up filling the game with tonnes of references to Campus, our professors, and even life in Nashville.
Using MeshY AI, I was able to get a 3D model for the Vandy Van, our campus shuttle, for the game. This ended up being the most popular option at the showcase.
In game characters consisted of our team, professor, our school mascot, and Luigi of Mario Kart. The karts included the Vandy van but also a lime scooter(a source of much chagrin for locals)
The background images in all the game screens were all nods to campus or photos of the engineering building/some other locations on campus.
The game was very well received on Demo day, both as a technical feat but also for how fun it was. Many people on the day of remarked that the experience and the local references were what really stuck and even months later, I've had people tell me that they remembered how fun it was.
Out of 49 other projects demoed on the day, we placed 3rd!
Vanderbilt University School of Engineering Computer Science Immersion Showcase
