At Vanderbilt University, All computer science students are required to deliver a final product in a specific technical stream. While many teams focused on traditional analytics platforms or research tools, our team decided to do something a bit more unconventional. We wanted to build a 3D multiplayer racing game but where most games would employ a game engine like Unity or unreal engine, we decided to just use standard web technologies.
Our core idea was to turn our real world into a race track. By leveraging Google's photorealistic 3d tiles, we planned to turn actual cities into driveable game environments directly in our web browsers.
While the technical idea was impressive, the tech alone wouldn't make a game fun. We noticed that many modern web games are often plagued with bloat. This bloat would take the shape of intrusive ads, cluttered menus, and slow load times.
Inspired by the pick-up-and-play immediacy taken by classic console racing games like Nintendo's Mario Kart, we set out to build the opposite. Prior to the development of the game, My role was to design a UI wrapper that eliminated friction, creating an intuitive system that allowed users to access this complex technical demo in a way that prioritised play.
Research and
Mental models
Since this was a casual game, we couldn't afford a steep learning curve for players during the showcase. To ease this cognitive load, I decided to apply Jakob's law, which is a UX principle stating that users prefer interfaces that work similarly to those already familiar to them. By analysing popular existing games, I borrowed proven interaction patterns so that players could jump in without a tutorial. Below are some key examples.
User flows:
Host Vs. Guest
To connect multiple players we used websockets, but this was a technical challenge that should be invisible to the user. To achieve an effortless multiplayer experience, I designed a host-centric setup to separate duties:
The Host: Responsible for game management(creating game, selecting the race track on the map, number of laps, and the speed)
The guest players: Experiences minimal friction, simply entering a code to join a pre-configured lobby
Community
Building/
The Silly stuff
A generic demo can feel impersonal, and seeing as our product would be demonstrated at the Vanderbilt Immersion Showcase, I realised that we could also tap into our local culture. I decided to incorporate assets into the design that would be familiar to our judges and everyone at the showcase, just to add to the enjoyment of the game.
This hyper-local approach turned the demo into more of a spectacle with our audience and was noted by users to be a major pull towards them playing and enjoying the game.
Instead of generic avatars, I curated a roster of characters that were members of our team, our professor, our University Chancellor, Mr. C our university Mascot, and Luigi.
For our vehicle selection, I modeled our beloved "Vandy van", our Campus shuttle bus. This was a top priority and ended up being the most popular playable vehicle.
We also included the Lime scooter here as a nod to the scooters that are despised by Nashville Locals.
Every screen in the UI features actual photography taken around vanderbilt Campus
This project required a UI that could survive two completely different environments which were static backgrounds for menu pages and varying high-speed motion during the gameplay phase.
A one-size-fits-all approach would fall apart in this situation. Thick arcade buttons work in a menu, but they create blind spots on the race track. To deal with this I made sure the system would shift density based on the context.
The menu UI
here I took a much more high-energy, vibrant approach where the UI elements fight for attention against the backgrounds.
I utilised a saturated Orange for primary containers which provided the highest contrast against the Blue/green colours for the Earth inspired look of the menu screens
Buttons feature exaggerated, solid-coloured shadows to mimic the chunkiness and weight of traditional arcade machines.
In-game HUD
Once the race starts, the UI must get out of the way and so I stripped the styling down to a more functional core
I replaced the solid orange containers with semi-transparent capsules to maintain legibility via white outlines and heavy drop shadows but still allows the road texture to show through, MAXIMISING the player's peripheral vision.
Typography
Primary
Cat files
I chose this for it's bouncy, hand-drawn look that immediately signals the playful nature of this game.
Secondary
Baloo Da 2
This is a rounded sans serif that matches the soft rounded geometry of the primary font.
#FC9B2D:
#F87E23:
#3183FF:
#193969:
#59DF80:
#338145:
#959595:
I designed a custom app icon and logo mark that encapsulates the "Digital Home" concept. The iconography throughout the app uses filled, rounded forms to match the Surreal Winner typeface.
