Rocket Pass
Overview
This is a personal project built in Figma to demonstrate product design thinking for gaming. Rocket League is a vehicular soccer game published by Psyonix in 2015. Rocket League has collected various UI patterns throughout the years and in this case study I explore the most difficult challenges in its rocket pass.
What is the Rocket Pass
Rocket Pass is an in-game progression system that allows players to earn customization items. A free track is available to all players, but a Premium track can be unlocked.
Problems to solve on the Rocket Pass
The “Get Premium” call-to-action is crucial to monetization but is lost in the complex visuals that surround it.
Each section of the Rocket Pass is equally calling for the players attention which makes it difficult to know where to look first.
Empty item cells are taking up valuable screen real-estate that could be used to increase the visibility of more important details.
Rocket League has various UI patterns that could be reused on the Rocket Pass to simplify and create a cohesive design system.
A handful of text has low contrast that make it hard to read.
Constraints
Improve aesthetics while still making it look like the same game.
Maintain the same layout so the item previews still work with this UI. Rocket trails and boost need the right side of the screen to be empty.
Current Rocket Pass
Research Methods
A competitive analysis was used to research games that had a healthy history of reoccurring seasonal progression systems like Destiny 2, NHL 24, Overwatch, Fortnite, MW2, Dauntless, and Fallguys.
Player feedback, usability testing, and analytics data would be valuable ways to understand user behaviour and defining a baseline for measuring success after release.
Research Findings
Monetization is crucial to the progression system’s success and should be a visual priority.
Communicating the benefits to the Paid experience, like a boost to XP, is also a high priority.
Letting players know how much time before they miss out can incentivize players to invest money or more time in game.
Games may have a simple selection of items on release, but later grow to have different item types, colors, and classes. Item details should have a modular approach that can handle changes.
The UI needs to be clean and flexible enough to elegantly host a variety of item shapes and colors.
Side by side comparison
Before delving into the rationale, this next section visually compares before and after.
Before: Free Experience
After: Free experience
Before: Premium Experience
After: Premium experience
Before & After Rationale
Let’s break down the specific decisions that can be compared in the before & after.
Before: The Free row creates empty selectable table cells that have no action.
After: Combining the free and premium rows allows us to fill the screen with meaningful content.
Before: 30% of the screen height is taken by two rows, which requires players to collapse the rows to have a closer look at the item details.
After: Item navigation now uses 15% less screen height and the item preview is large enough that we can remove the Collapse action.
Before: The highlighted maracas appear as a tiny preview instead of being the main focus. All three sections appear equal in importance which doesn’t lead the eye to any spot in particular.
After: The item preview is larger and now the main focal point. This is much faster for players than collapsing the rows to have a closer look.
Before: The tier “10” and progress bar outshine the monetization action that sits inside the Rocket Pass tile.
After: Actions like “Get Premium” or “Tier Up” are now a high contrast button. Clearly seeing the “Tier Up” button could serve as a reminder to players and increase purchases. The progress bar elegantly wraps around the shield’s outer edge, so it doesn’t compete with the “Tier Up” button.
Before: The bright background can drown out items in the foreground.
After: The dark background helps any item on the foreground stand out.
little details
Free to Paid transition
Reusing styles simplify Rocket League’s design system so the development team can build more with less effort. Reusing also creates a visual language that guides players through the experience.
The “checkmark” style used on the completed “Weekly Challenges” can be reused on completed rocket pass items.
Now that everything is on one track, it’s important that the Free experience labels free and premium items. Once Premium is purchased, labels are removed to create a cleaner UI.
Badges
Item color and class legibility have been improved to meet accessibility standards and increase discoverability.
Before: Item class can appear in many ways throughout Rocket League. It can be as bright as yellow glowing text, like the first exotic image above, or as dark as a very rare purple, like the second image. The glow effect can be difficult notice and sometimes make text hard to read.
After: Class is now presented as a badge that explicitly associates to a color. The color and class can sit side-by-side to create an even cleaner presentation.
Measuring Success
These questions can determine the effectiveness of the Rocket Pass.
Is “Get Premium” and “Tier Up” more discoverable?
We can use moderated user interviews to see if players find the monetization actions faster on the new UI.
Analytics can determine if monetization is easier to discover by seeing if new users are purchasing faster or if premium users are tiering up more frequently.
Did the UI changes have a negative effect?
A lot of changes has happened when the page updated, and it may create unforeseen challenges. Watch for player feedback for clues that can reduce friction and increase onboarding into the Rocket Pass.
Tracking analytics on the Rocket Pass’s engagement can tell us if switching to one row reduced the discoverability of the Free items.
How effective is the “50% EXP boost” at driving conversions?
If we don’t have an answer already, a survey can determine if the 50% EXP boost is effective at driving conversions. If a significant segment responds positively, we will know that the EXP boost does increase purchases.
Another survey can determine how many users are unaware of the 50% EXP boost. If a significant portion of users is unaware, there's a valuable reason to explore new ways of informing players about the benefit.
Conclusion
Key takeaways from the UI improvements
Rocket Pass conversions should increase with the revised monetization actions.
Using a single row and adjusting the layout will improve the discoverability of important actions and details like the Rocket Pass end date, 50% EXP boost, monetization, item class/color/type.
Reusing existing UI patterns will reduce UI debt and help players onboard into Rocket League experience with patterns they already recognize.
Players with low vision will have an accessible experience reading and discovering higher contrast content.