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.
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 🡫
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 🡭
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.
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.
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.
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.
8px - Between headings
16px - Between content blocks
20px - Inside margins
24px - Between header and content sections
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.
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.
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.
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.
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.
Prioritization — I went a little outside of my comfort zone in terms of visual style and complexity but I, of course, still aimed to keep the product simple and easy-to-use. The dashboard concept made this quite difficult as they can get very complex quickly so thoughtfully prioritizing screen elements was key to not going overboard with including every idea I had for in-queue entertainment.
GIFS and animated interactions — I got into creating GIFs to more clearly communicate my interactions. This was especially important here, given the dynamism of the modular dashboard and added flexibility of the client overall. I think they came out great.
Screen dimensions and mockups — One mistake I made, though, was using Figma's standard MacBook Pro frame size (1728x1117) for all of my screens which made mockups a challenge. I opted not to go back and redesign those 20+ screens just to efficiently mock them up, but I know that in a real setting I would have had to for sake of proper responsiveness. Actually, this also made it so that the bottom 128px or so of each screen was cut-off in the prototype, which made recording more fluid interactions with their animations impossible - forcing me to use the choppier GIFs. I'll be certain not to overlook that going forward!
