League of Legends | Matchmaking

Squashing Autofill with a pre-game lobby redesign

As a long-time player of League of Legends, I have run into my fair share of frustrations using the League client over the years. But, community-wide, Autofill is the most fun-killing and problematic. It's the one feature in the system that dampens both the pre-game and in-game experience for all players, all of the time. So, I decided to conceptualize a solution to Autofill that wouldn't compromise the stability of the system it holds up.


Jul - Aug 2023




Product Design
Visual Design
Interaction Design




Pre-game lobby redesigned as a modular dashboard with interactive content for passing the time in long queues.

Video games tell stories of heroes, create larger-than-life worlds, and inspire passionate competition that create an escape from reality for many. As such, they should be pleasurable, entertaining, and immersive experiences through and through, including menus and lobbies. To achieve this in League's matchmaking, I redesigned the pre-game UI as a customizable and modular dashboard with interactive content that puts competitive players in control over their time in queue.

Skip to solution 🡫


What is League of Legends?

League is a 2009 free-to-play multiplayer online battle arena (MOBA) game created by Riot Games. It is a competitive 5v5 game where the objective is to destroy the enemy team's Nexus (home base). Designed to run on your Grandma's rotary phone, League boasts 150M monthly active users and is the #1 most watched game on Twitch of all-time.

Wikipedia page 🡭


What is Autofill?

Autofill is the dark side of the matchmaking system that regularly (~1/5 games) forces players to play roles other than their primary one in order to keep queue times down. Typically, players are forced to sub in at Support, the least popular of the five roles.

This is a subtle dark pattern where a variable rewards schedule is used to positively reinforce the gamble of queuing up for a game while punishment negatively reinforces queue abandonment.

Matchmaking and Autofill 🡭


Autofill sacrifices ranked match quality to "cut queue times" which is at odds with the goals of competitive players.

Forcing ranked players to "Autofill" unfairly offloads the burden of the matchmaking system's constraints onto its players. This design decision is at odds with the goals of the rising ranked player who is dedicating out-of-game time to watching high-level play and studying concepts relevant to their main role in order to improve. Their goal is to climb the ranks, not to simply play as many games as they can. Imagine training as a Wide Receiver only to find out at kick-off that you'll be actually playing Center (with no way to opt-out). Not only is this disappointing and frustrating, it sabotages the quality of competition in every ranked match. Worse yet, as the most skilled competitive players climb to higher ranks, their queue times grow anyway, further punishing players for improving at the game.

matchmaking ANALYSIS

Visual Design

Dropping the Hextech design system for a modern and usable visual language.

In League lore, Hextech is the name for an ancient magic (blue) harnessed by a wealthy region called Piltover (gold). There is a story-driven element of clunkiness in the Hextech contraptions as they try and often fail to control this powerful magic. After reading through the design system, there is undoubtedly clear alignment between brand, story, and design system. However, it's a theme that I don't believe maps well onto an interface as it necessarily makes it feel clunky and hard to use. Instead, I opted for a clean, modern, and consistent glassmorphism aesthetic to alleviate friction and restore a sense of control to users.

Visual iterations & progression


Transient to sovereign posture.

With new content added regularly, the client is no longer the barebones launcher it once was. As such, its transient posture no longer makes sense. To manage this change, I organized content along a standard 12-column grid. Navigation works its way inward from that which it is related to closest (i.e. Riot Games on the left, User on the right), with the primary content area being scrollable, providing the familiar and consistent UX of a website and eliminating the clunky double navigation system.


Consistency within varied content panes.

8px - Between headings
16px - Between content blocks
20px - Inside margins
24px - Between header and content sections

Visual iterations & progression



Autofill as a choice: matchmaking balanced by human nature.

As humans, we are constantly making economic predictions of the costs and gains that will result from our planned behaviours in order to maximize gains and minimize costs. While Autofill reduces wait times, it also increases odds of losing games due to the increased probability of being placed in an off-role position. So, by immediately showing players the result of their Autofill decision in the form of an estimated queue time, it lets them weigh their options in a way that won't affect the average queue time. Like a free market, if queue times get too long, more people will opt-in to Autofill and vice versa, causing queue times to inevitably regress to the mean. Gracefully balanced by human nature, this system would lift the shackles of forced-autofill without compromising systemic integrity.

Choose between [autofill + short queues] and [preferred role + long queues].

As players climb to higher ranks, long queue times are inevitable, even with forced autofill. But players also wait idly in the client while installing an update or waiting for a friend to get online. So, I approached the redesign from this perspective, designing the lobby as a customizable dashboard with game-mode related interactive content to pass the time. Once we offer a solution to idle time, we can then more reasonably offer players the option to opt-out of Autofill to guarantee their preferred role, given that this choice will lengthen their wait.

Providing with engaging interactive content while they wait.

For the ranked player, watch video content to learn high-level concepts, play through interactive drills and strategy quizzes to warm up, or read up on the latest meta changes in the patch notes.

Change runes, summoner spells, wards, and emotes in queue.

After a playing accepts a match, they enter into 'Champion Select.' This is the last screen before the game launches and is effectively when the game starts as it's when players first see their role, make their champion bans and selections, and can begin talking strategy with their team. This is the only place where players adjust skins and emotes, which doesn't make much sense. Instead, I opted to include quick access to these in the control bar, adding further in-queue interactivity.

final screens


Results, mistakes, and learnings

Before and throughout this project, I read the design textbook 'About Face' front to back and enjoyed applying many of those newly-learned interaction design principles here. I went outside of my comfort zone on nearly every dimension in this project so I am proud to have converted a lot of my knowledge and experimentation into what I believe to be a somewhat realistic redesign.

Given that it is a concept project, I can't speak to resulting performance metrics but I am confident that, alongside fellow designers, my vision would help to steer a redesign in the right direction that would restore control and enjoyment to players while in queue.