cover-mobile

League of Legends Worlds Hub

The League of Legends World Championship is Riot’s largest tournament of the year where professional teams from around the world come to compete. During the 2-month long tournament, there are 3 in-game events that players who watch can participate in.

Company
Riot Games

Project Date
2018

Role
UI Design · Interaction

Role
UI Design · Interaction

artwork

Challenge

Increasing player engagement

This 2-month period generates a lot of buzz on social media, presenting an opportunity for us to leverage this momentum and increase engagement. Our first challenge was getting people to watch professional matches. The tournament was held in Korea which posed a time zone inconvenience for many of our users. Our second challenge was getting people to participate in the in-game events. Content needed to be updated 3 different times throughout the tournament and assets couldn’t be finished until roughly a week before the event launch.

Process

I worked with the product manager to establish a delivery cycle between design and engineering. An agency was hired to build and maintain the hub over the 2-month period, so we created a roadmap to communicate to them what content needed to be updated and when.

One of the main pain points of last year’s hub was that it felt like an entirely different experience from the rest of the game client. To resolve this, I restyled each element to match the look and feel of the client, creating a more seamless experience.

Because the hub needed to be updated each time a new event launched, I created a symbol library for each component on the landing page and modal. This allowed me to iterate quickly to accomodate new content as it was it was delivered.

Untitled_Artwork (1)
Untitled_Artwork (2)
library
symbol

Solution

A centralized experience to stay up to date

The Worlds Hub is a user interface that hosted all World Championship content including a schedule widget that allowed viewers to easily see when matches were going live. They could also watch videos of past matches. To drive participation to in-game events, a modal was used to find information about the event along with rewards a user could earn by either playing or watching League of Legends. On event launch days, this content was moved to the homepage to increase traffic.

Hub—Landing
live-tile
_magic
Hub—Modal—Landing
Artboard-3
Artboard-3-Copy

Impact

Over 100 million unique visitors engaged with the Worlds Hub over the span of 2 months, a 15% increase from last year. This year's World Championship was the most watched tournament in League of Legends history. Because of its success, we are working to make the hub a persistent product for all tournaments moving forward.

Team Members

Product Owner
Laith Alkarmi

Product Manager
Adriaan Noordzij