⚲ Riot Games Inc. | Personal Project
✎ UX / UI Designer
As a long-time League of Legends player since 2010, I have observed the evolution of the game’s UI and UX over the years. Despite numerous updates across different areas of the game, the champion select experience has remained largely unchanged for over a decade. This case study explores opportunities to improve the champion select flow through user research and a validated redesign.
Timeline
Aug 2025
(2 weeks)
My Role
UX Design
UI Design
Research
Tools
Figma
Adobe Firefly
Task
Survey
Wireframe
Prototype
preview
Selecting the champion with confidence and speed
No more stress, navigating through champs, or making a mistake. Champ select can transform the player’s experience completely in getting ready for the Draft/Ranked game queues.
New Feature
Guide players to select a champion without a decision fatigue
Usabiliity Improvement
Speed up champion navigation time by an effective default setting
define
Discovering the problem of the Champion Selection
I conducted a survey with real players to identify common frustrations, behaviors, and pain points during this phase. The results confirmed that the champion selection has some usability issues.
6/10
Players reported feeling stressed mainly due to decision paralysis and time pressure
40%
Nearly half of the respondents admitted to experiencing selecting the wrong champion
Players expressed interest in having smart suggestions
The problem
The champion select experience in League of Legends lacks intuitive structure, clear navigation, and decision support, resulting in user stress and accidental picks.
Player survey result in charts
empathize
Understanding different types of players
To better empathize with the players, I created two personas: the competitive player and the casual player. These personas helped guide design decisions to ensure the new champion select experience serves both ends of the player spectrum.
research
Breaking down the current design and finding gaps
To understand the shortcomings of League of Legends’ champion select, I began by studying competitive games with large character pools and closely analyzing the current interface to see how they approached the design.
Competitor Analysis
I studied other games' character selection interfaces to discover common patterns and new opportunities that can be applied to League of Legends.
Other games' character selection user interface (Dota2, Eternal Return, Marvel Rivals…etc)
Heuristic Evaluation
During my analysis of the current champion select interface, I identified several usability issues that could contribute to user frustration and decision fatigue.
Current League of Legend's champion select interface
1. Lack of Smart Filtering
The role filter icon is not automatically selected, which adds unnecessary delays in the champion selection process.
2. Visual Overload
Players see 30 champions to begin with, which contributes to cognitive overload and slows down the user's ability to locate.
Champions are sorted alphabetically by default and the dropdown is overlooked, making it ineffective for decision-making.
IDEATE
Experimenting design solutions
I created lo-fi wireframes of the champion select screen with new feature designs that would enhance the experience.
Default Sort By Mastery
Sorted By Top Mastery Level
The role filter icon is automatically selected, and it's sorted by mastery level, which advances the champion selection process.
Clear Display of Top 3 Mastery
Players can see the top 3 mastery level champions in a larger design, which reduces cognitive overload and minimizes navigation.
Personalized Recommendation
Initial Prompt
By presenting 3 different suggested champions when champion select starts, players can make a faster decision without a delay.
Recommendation Toggle
Players have option to toggle to view recommended champions—adding flexibility for players to use this feature when needed.
Design solutions
Redesigning champion selection that works for players
The final design introduces smarter defaults and personalized recommendations, helping players cut down clicks and quickly find the right champion for themselves.
Effective Default View
By introducing smarter defaults, such as automatically applying the player’s lane filter and sorting champions by mastery level, players can bypass unnecessary clicks and save time during champion select.
Mockup highlighting redesigned champion select default view
Personalized Guidance
A toggle allows players to view personalized champion recommendations, filtered by highest win rate, most played, or recently played, presenting detailed stats for deeper insights.
Mockup highlighting champion recommendation view (toggle on)
point of reference
Staying true to the League of Legends interface design
To minimize visual changes for players, I aimed to stay true to the current design, referencing current user interface designs from various parts of the League of Legends (Aram, Arena, TFT) — offering a consistent, intuitive, and seamless experience.
Screenshots of the current League of Legends interfaces for references
The outcome
From concept to confirmed player experience
What started as a passion to improve League of Legends player experience in the champion select became a successful project. Real players gave both constructive and positive feedback, the majority hoping to see the redesign in the game.
2/10
Players reported feeling less stressed due to efficient default view and recommendations
7/10
Majority of the respondents found the redesign easier to navigate and select a champ
Players expressed huge interest in having the redesign officially launched in League of Legends
Redesign survey result in charts
key takeaways
Incremental improvements and maximizing value
Rather than pursuing a completely innovative overhaul, this project focused on making targeted, user-centered improvements that minimize friction and preserve familiarity. This approach reinforced the principle that thoughtful, incremental design changes — grounded in real user insights — can deliver meaningful impact while respecting existing behaviors and designs.
