Battle Pass.
The goal was to design and implement a battle pass that is engaging and enticing to players while accommodating the needs of the monetisation team. With the help of an engineer, the battle pass updates dynamically through Xsolla, so future passes can be changed without a redesign. The project also covered everything around the main screen, such as earning battle pass XP through the post-match reward screen.
Engaging for players, workable for monetisation
I researched competitor battle passes across genres, consoles and layouts to understand the conventions players are used to, then designed, tested and implemented the screen and its surrounding flows in Unreal Engine 5.
Benchmarking & internal preference testing
A number of battle pass screens from different genres, consoles and layouts were examined. Aside from competitive benchmarking, employees were shown battle passes from different games and asked about their preferences, for example a single track mixing free and premium rewards versus a dual track separating them out.
What people preferred
Dual track, if space allows
“Personally, I like the single track, but only for the space it provides in the background for artwork to shine. If we can achieve this with the double tracks, then I'd prefer that since it'd be less frustrating.”
Cut the clutter
“Can we get rid of the connections list in our battle pass screen? I feel like it's a bit redundant on this screen. Battlepass should be special.”
Insights & design implications
- A large preference for the dual-track layout with free and premium rewards separated out, easier to read, and from a monetisation perspective it highlights the premium tier more.
- Preference for a progress bar close to the current tier level rather than individual bars above each tier, keeping the connection between the two.
- Consensus that a claim button per tier was overkill: items should be claimable individually (via right click with a tooltip hint) alongside a claim-all option.
Flow diagram
With research and analysis complete, I made informed decisions on layout, features and interaction, and created a user flow diagram to address issues uncovered in research and cover edge cases early, before creating further designs.
Sketches, lo-fi & mid-fi prototypes
I sketched the flow on paper and created low-fidelity mockups and prototypes, iterating until an initial design could be created in high fidelity and implemented for testing with the wider group.
Parts of the overall flow
A low-fidelity prototype displaying parts of the overall flow.
Returning after levelling up
A medium-fidelity prototype showcasing the situation where a player has levelled up tiers and returned to the battle pass screen.
High-fidelity design & implementation
With feedback from players and changes to the visual style guide of Evercore Heroes, iterations were made between the first version and the current version in-game.
The latest implementation
The latest implementation of the battle pass screen available to players.
What changed and why
- With the newer, more lightweight style of the game, removing the connections list and the navigation bar became possible, giving as much space as possible to the battle pass itself, in line with player preference.
- Improved use of colour to better denote free versus premium tiers: the premium colour scheme changed from teal to gold to feel more special.
- Additional animations and sounds were added over time as originally intended, and decorative elements were updated to match the new style guide.
Like the way I think? Let's talk about your product.