BATTLE PASS – UI PEEPS CHALLENGE

This challenge coincided with my first time playing Marvel Rivals, so I was already very much in the superhero multiplayer mindset! I decided to base my Battle Pass UI on the Spider-Verse Saga. I absolutely love the films and the art direction, and felt like they would lend themselves well to an action-packed multiplayer video game.

After compiling some moodboards I was able to quickly identify some key elements that would translate well into my battle pass UI. I was particularly drawn to the use of contrasting colours, exaggerated angular shape language, and comic-book textures. Even without any animation, the artwork still conveys a sense of action and excitement.

Art Moodboard

Game UI Moodboard

After researching other Battle Pass UI I decided to focus on a single-track design, combining free and premium rewards into a single row that is easy to understand at a glance. This would also allow me more screen space to show off the rewards in an exciting way and give players easy access to the Premium Pass purchase.

I created a simple lo-fi wireframe to test my layout, iterating upon it several times before I felt ready to move to prototyping.

After blocking out the overall structure of the screen, I explored how I could bring the art style into the UI elements. At first I wanted to reference the comic-book style of the source material as much as possible. I designed the reward track to mimic a comic strip, and included a lot of exaggerated shapes to signpost important information and highlight states.

Ultimately though I decided that this was overkill. The UI had become chaotic and too distracting, so I simplified the reward track and tweaked the design of some other elements. I also refined the use of the colour palette, ensuring that the brighter colours were used more sparingly to emphasise more important information.