Riot Games
Riot Games Tournament Season Website Design
Riot Games is an American video game developer, publisher, and esports tournament organizer, most known for their game League of Legends. I was tasked with designing a mock up website using their branding for League of Legends that would simulate a tournament season under LeagueSpot.
Web & UI/UX
designer
2023
Figma
Adobe Photoshop
Adobe Illustrator
1 Week
Visual Design
Design System
Web Design
Layout Design
Prototyping
Overview
As a Senior Visual Designer I was tasked with designing a website using Riot Games' branding that would simulate a tournament season. The emphasis was on the branding and user experience. Custom registration pages, options and tournament views plus more were all included.
Challenge
I needed to figure out a good solution on how to distribute tournament information to players and hosts alike so it was not misunderstood by participants. Typography hierarchy and platform experience were top priority so tournament information was not mistaken by anyone on the platform.
Solution
Designing a simple but effective system within the brand's language allowed me to be more flexible with how I laid out content on the website. Tournament data can be overwhelming to look at sometimes so I wanted to have a clear hierarchy of information for participants to view it comfortably.
Process
User Flow
The first step was to map out the user journey so that I could understand how the user would interact with the product. Doing this allowed us to identify areas for improvement and make changes to the user experience. I wanted users to easily and quickly find what they were looking for.
Typography
Pairing the sans-serif font, Spiegel, with a more ornate font like Beaufort fit perfectly with the branding of Riot Games. Various weights were used throughout the design.
Colors
By using Riot Games’ brand white, gray and black as the main colors, it allowed me to use the red to draw users’ attention to important buttons and information, encouraging users to focus and click.
Design System
I created a full system with button styles, colors, accordions, checkboxes and more to fit with Riot Games’ branding, creating a cohesive visual design language across the whole experience.
