INVINCIBLE
BATTLE PASS
Case Study
This was a challenge prompt from the UI PEEPS LinkedIn page. They post some pretty neat and diverse challenges on there. The prompt for February was to design a UI Battle Pass screen for a superhero game. I just knew I had to do Invincible. I debated whether to pay homage to the darker, more brutal scenes but ultimately decided to keep it light. I went full comic book style, and it was a ton of fun.
Art Direction: Comic book style
Color Palette: Primary Red, Primary Yellow, Teal Blue & Saturated Yellow
I wanted to incorporate the bright primary colors typically associated with old-school heroes and comics, while also mixing in some medium teal blue and saturated yellow—the shades Mark Grayson is known for. I avoided leaning too heavily on those colors, though, since (spoiler alert) his suit changes in season 3.
MOODBOARD
UX WIREFRAME
High Fidelity Mockups
I pulled images for the character, the Purchase Pass, and the Burger Item directly from the show, and I used a background image I found via Adobe Stock. I created the rest of the UI components in Adobe Illustrator. I made two versions of the screen: one for when the reward is a character skin and another for when it’s a smaller item like XP. For the smaller item, I recreated a green portal similar to the one from the show/comics. I went pretty maximalist with the design to fit the comic book style, but I balanced it with careful use of color, shapes, and spacing to keep the elements distinct.
I also made both the reward bar and the level bar green so players can easily associate that color with progress. When the player reaches a specific reward level, the frames around the corresponding numbers on the level bar light up, along with the reward bar.
I opted to use the back buttons for navigation so players could easily associate that area with moving between tabs. That's why I chose L1/R1/Bumpers for navigating the Main Menu Bar and L2/R2/Triggers for navigating the Reward Track.
