LEAGUE OF LEGENDS
BATTLE PASS
Case Study
For this case study, I designed a battle pass screen for League of Legends, assuming it needed to display the same information as Team Fight Tactics. This includes the season name, time remaining in the season, a progress bar for the player's overall progress, a button to upgrade the pass, the reward's name and description, a claim button, and a reward track.
Art Direction: Existing League of Legends UI style mixed with some Art Deco Fantasy
Color Palette: Blue, Gold, Brown
MOODBOARD
High Fidelity Mockups
UI DESIGN APPROACH
For this Riot Games battle pass concept, I sourced the background image directly from official Riot promotional materials. After analyzing their existing UI patterns, I noticed Riot often avoids heavy borders around text elements, allowing background artwork to remain the primary focal point.
​
I attempted to follow this borderless approach, but encountered a layout challenge: the bright, high-contrast area on the right side of the composition made it difficult to position readable text while keeping it anchored within the darker regions of the image.
Solution: I added a subtle dark overlay with a Gaussian blur effect at approximately 20% opacity. This created sufficient contrast for legibility without heavily obscuring the background artwork, maintaining the visual hierarchy Riot typically employs.
Component Design
For the interactive elements (pass frames, buttons, progress bar), I designed strong angular shapes with gold metallic finishes. This geometric language connects directly to Councilor Mel's character aesthetic—her refined gold jewelry and armor details—while also reflecting Piltover's visual identity. The sharp, precise angles echo Piltover's Art Deco-inspired design language, representing the city's emphasis on progress, craftsmanship, and hextech innovation.
The ornate corner detailing references Piltover's decorative metalwork, creating thematic cohesion between character, setting, and UI system.
I made the UI components with Adobe Illustrator.