Rocket League User Interface Design
Since joining the ui team at Psyonix during 2016 we have continuously iterated on many user interface components of Rocket League. Here you will find highlights of various aspects of the game I have contributed to ranging from design, functionality, planing, visual design and illustration.
From the beginning Rocket League was designed to scale consistently across many game platforms as possible. The initial foundation, visuals, interaction ,and engineering design was created and implemented by our UI launch team consisting of Jared Adkins and Tracey Bulliung. Within these various platforms both mouse /keyboard and controller inputs have been supported continuously.
These design standards are adhered to when developing new features throughout each game update. Platform support includes Playstation, Xbox, Switch, Mac OS, and Windows operating systems.
Playlist Menu V2
As Rocket League continued expanding to include additional modes I worked with the design team to find various solutions that could account for the current , planned, and future game play modes for the playlist menu.
User Interface / Experience Design, Wireframes, Visual Design, Illustration
Our initial playlist design was an easy to access and compact vertical menu that contained our modes for competitive and casual play. This display allowed players to find matches within their specified region as well as compare populations within each selection.
The container presented a few challenges to scale to support additional game modes for future release. The biggest bottlenecks were the increased time to make selections within the vertical list as well as the high cognitive load of presenting all of these game modes in a compact space at the same time.
I worked closely with the design team to form a ui solution that would scale to our needs. Our goal was to make a more approachable system that did not give players all game play options upfront. Since we did not allow players to queue for both casual and competitive simultaneously it was more appropriate to compartmentalize these selections from one another.
We continued to refine our game play modes and take feedback internally and externally on the overall functionality, use, and presentation. As we removed and added new selections we regrouped these modes more appropriately based on their type and popularity.
It became clear that our initial casual selections (the first to appear) could be better represented to convey the type of game play and be more distinct from other playlists. The casual playlists do not incorporate any sense of rank or competitive progression. Without additional icons and messaging it remained a clean, but less impactful way to promote their use. I worked with the design team to create a series of illustrations and ui visuals to achieve a look that would bring more attention to our initial modes.
Playlist Menu V3
After the launch of Rocket League Free to Play I worked with the ui design team (John Stvan, Lionel Cornelius, Jason Huang) to again help redesign visuals that further refined the aesthetic treatment on one of the most accessed game menus by our player base. The goal was to reduce the cognitive load / clutter while introducing a more visually interesting menu presentation. For this top level menu I worked with the team to establish direction of imagery, style, and created gerneal compositions.
Revised Presentation
Initial Approach
I also had to re envision how the Rocket League Extra Modes would be visually interpreted with this new menu presentation. Historically these modes did not have a strong visual identity within the menus. The challenge was to create a cohesive set of buttons that would give the overall impression of each game mode without overpowering the presentation with cognitive load and busy ui components.
Esports Shop
As the competitive esports scene continues to grow fans and players often requested for a way to show their support of various professional rocket league organizations in game. We launched the initial version of the esports shop as a way to purchase exclusive limited in game content that players can equip to their vehicles as well as their player display banners. A unique currency was also created in order to better segment the items from traditional premium and crate content.
UI Layout and Design, Visual Design, Icon Design
Custom Tournaments
A popular request from our community was for players to create their own tournaments within the game. I lead the ui design through a complex set of requirements and specifications that established our first version of in game tournaments. Various UI states had to be accounted for throughout the experience that created some new challenges such as player signup / register, pre game, in progress, advancing, win, and elimination states.
The design had to support all of our current game modes with the addition of adding custom settings such as team size, rank requirement, and start time.
UI Design, Visual Design, User Flow, Wireframes
We also had to design our own bracket system that supported a robust size range of 8, 16,3 2, 64, and 128 team/player slots. This included the ability to see match history and an easy to read mapping of how a team has progressed through a tournament bracket.
We introduced a custom game browser outside of our normal online playlist selection that would allow players to view, subscribe, and participate in. Here players can find tournaments based on a number of preferences.
Several iterations of a tournament notification user flow diagram were produced to help understand how and when the player would interact with specific prompts and decisions during various phases of the tournament. Below is one example of how I approached labeling and creating flows for the notification system.
End of Match Progression
Rocket League was updated to include an XP based progression system that would reward players at the end of a match. I helped design the layouts and some of the interactive elements that would be displayed through the various menu flows.
Visual Design, UI Layout and Design
XP Progression Avatar Borders
Along with the item rewards that come with gaining xp, players also earn tiered avatar borders that correspond with their xp level. As players progress higher more borders are unlocked with varying amount of detail and color types. There are currently 15 base designs that include 4 color types (default, gold, cobalt, onyx) totaling to 60 different borders.
