UIUX | GAMES
Rocket Rumble
client Pixelnauts | 2023
platforms PC PS4 XBOX ONE SWITCH
Early gameplay footage featuring new HUD
I was initially contracted by Pixelnauts to create a new logo that better captured the whacky, fast-paced, Saturday-morning-cartoon vibe of this combat racer. By the time I played it, Rocket Rumble was almost complete. It’s User Interface and Experience were functional but far from optimal. I was asked to consult and eventually redesign everything.
The HUD
The frenetic gameplay of Rocket Rumble required a HUD that could facilitate player awareness and strategy without requiring them to look away from the action, and that wouldn’t distract from it either. The HUD was our number one priority in development, the specific issues testers had, and my solutions are listed below:
-
Each player marker was changed to be a unique shape and colour combination this improved visibility and accessibility (for visual impaired or colour blind).
Health bars floated around these shapes and were made more prevalent.
When holding a weapon we changed the character pose so that the weapon was held up above their heads. We also assigned a colour to each item that glowed and left a light trail behind them for better visibility.
-
We implemented a straight line (not a map) broken into sections of the course which could let players see their progress at a glance.
-
I added emphasis to point accumulation or loss through backing elements, font, colour, and animation.
Each player also has a HUD panel at the top of the screen. I decided those should be split to left and right of the screen as all action happened in the center. Clearing the top of the screen helped players see down the course. These panels also reinforced the shape/colour relation to their character.
Above: New HUD
Original ▲
The Main Menu
Rocket Rumble is a competitive multiplayer game with abundant customization options and seasonal events. Player progression was one of the main focuses when designing the UI but there were many other unique genre requirements such as party management, character customization/selection, a marketplace, and thorough options.
My market research informed a lot of my decisions and final designs. Games I looked at for inspiration include Mario Kart, Fall Guys, Rocket League, and more.
Above: New Main Menu
Original ▲
-
All aspects of the game are accessible from the main menu. Players tab through using shoulder buttons.
-
Players progress in various ways and across seasons/events so having key stats available at a glance was important.
This panel also offers a peak into the PROFILE tab, creating continuity when the UI and camera pan over to reveal more.
-
Players are listed across the bottom with room to show how they’re playing, a profile picture, and their colour/shape.
-
A news ticker across the bottom of the screen keeps players informed with headlines or announcements. Players can also read more from here.
Animatic created as proof of concept for match result (UIUX).
Other Considerations
A number of additional considerations were made to improve the UIUX, implementation, and performance.
-
By replacing the standard Player 1 through Player 4 labels, with coloured shapes we were able to carry through a player marker from the game setup (character select, level select) through to the gameplay and HUD. This effectively creates a seamless continuity that needs no attention in localization and is easier to read for those with vision impairment, dyslexia, or colour blindness.
-
By implementing a design language that avoids 90 degree angles the shapes we use can be rotated to give the impression of variety and keep the UI feeling dynamic.
Such shapes can be seen as background for marketplace items, lists, articles, and more.
-
All UI assets were exported as white shapes so their appearance could be defined in engine (Unity) for maximum flexibility and efficiency.
-
Throughout the year Rocket Rumble will go through seasons and events for which the logo and UI will be recoloured. They were designed as systems with these requirements in mind. Every UI element can be easily recoloured in engine and the logo supports subtitles and has lots of room for themed decoration.