For the first time in a few years, the League of Legends game client was getting a significant overhaul and I was tasked with bringing the landing page up to par. Replacing the existing AIR technology allowed us to dig in to additional improvements, like a tiered content system that enables content to flow across the layout instead of simply falling into the archival abyss.
Being implemented in every Riot region from Central America to Russia, my guides and templates for each experience also meant that content could be tailored to the needs of that specific player base, giving control back to the regional offices who were best suited to make those daily decisions.
A Better Friends List
Digging into the League of Legends game client landing page offered me the opportunity to address some of the chat features as well. In addition to doing a basic style pass to bring it up to date, I offered a few visual recommendations as simple quality of life improvements.
I simplified player cards, removing redundant summoner icons and game information in favor of a friend's preferred role (useful for rounding out your new game invite) and player notes.
The old list made use of color coding for so many elements that it quickly became distracting and difficult to decode. I stripped away a lot of that, reserving the color system for the player's online status and interactive elements.
As a whole, the design decisions were all based around clarity. Removing distractions, users can now quickly scan their friends list with a focus on identify and context.
Creating a flexible grid allows our publishing teams to post to multiple experiences without having to rework their content. Creating a system that features three tiers with evolving styles, as well as content modules that can be merged or divided, gives regional offices more flexibility to control what is being surfaced to their players.
As a navigation often does, ours is starting to get a bit crowded. Multiple touch points link to the same content and information, like your level after you have capped out at 30, remain prominent despite being less relevant. I created a sleeker, more minimal look by bucketing user options into the big three: Play, Purchase, and Watch (taking advantage of my spectate feature rework).
One of the bigger proposals I made was to rework the existing spectate feature. Taking up prime real estate on the landing page with minimal documented value and only highlighting five random high-level matches, players were often presented with a limited champion pool (those reflecting the current meta were often featured in most or all of the games) and little choice in their viewing experience.
I proposed a second screen experience that allowed users to search for specific champions, ranked tiers, game types, and a number of other variables. The full layout would allow us to retain the recommended group of matches as well as adding the ability to spectate your friends and watch featured game modes.
LOL LANDING PAGE
Below are some examples of the new landing page in action. I merged cells and designed custom content experiences to both inspire and inform our creative teams as they began publishing content with the new system.