Re-designing League

An update to the often overlooked and underappreciated League of Legends game client.

Ki Silver
5 min readJan 21, 2014

Designing experiences for yourself can be one of the most time consuming yet rewarding activities that you undertake. Often it begins as an expression of passion for something you love and therefore want to make better. When it strikes hard enough, it can stop everything else in its tracks.

It began, this time, when I started playing League of Legends and the desire to design quickly outweighed the desire to play.

For anyone unfamiliar with League of Legends, it has been a breakout success by all accounts within the gaming community. It has captured the hearts of millions and helped e-sports on the path towards becoming a legitimized sport. If you game, I recommend checking it out.

(Disclosure: I now work at Riot Games, all opinions expressed in this article are my own and were written prior to my employment)

The Game Client

The current game client serves as a launching point for League’s commerce, knowledge, social and gameplay. It is, for all purposes, the hub of the game.

However if you watch almost any League of Legends player stream for more than a few hours you’ll soon realize: it’s not the hub of the game for them. And it wasn’t for me.

Redesigning it meant bringing the experience I was forced to have elsewhere — back into the client.

A few things I did:

  1. Increased emphasis on players, playing. As well as game statistics that matter (item builds, time in game, current champion, and KDA [kills, deaths, assists] — alluded to but not displayed).
  2. Clearer navigation with a separation between actions, social actions and information.
  3. Improved social features to help boost interactions.
  4. Simplified.

A few things I’d like to do:

  1. Increase data visualizations within the client, representing statistics that are more uncommon or difficult to understand in simplified ways.
  2. Introducing an ‘LoL Fantasy’ feature. With 32 million viewers during the championship finale, there is certainly a fan base to creating a more involved e-sports community. A fantasy league for the game would be a great start.
  3. A mobile app. It’s a huge task and has many technical limitations but I believe that there are many solutions here that would make sense.

Launcher

News, updates, the launch patcher and region selection: simplified.

Launcher (Now)
Launcher (New)

Login

Minor change: login location. Shame to hide such beautiful animations.

Login (Now)
Login (New)

Home

The landing page. Adding in current events around tournaments, showing players and stats that are meaningful, and cutting down the noise helped this whole screen breathe.

Home (Now)
Home (New)

Profile

Personalizing your profile and feeling a sense of ownership is important to me (and likely many others) so it was my main goal with the redesign.

Another added feature: following. Pro League players and popular streamers are constantly drowning in friend requests and chat messages. This allows them to switch their profile to ‘following only’ so that fans can still be fans and pros can have peace of mind.

Profile (Now)
Profile (New)
Notifications (New)

Store

Taking hierarchy and navigation hints from successful online retailers while minimizing information overload.

Store (Now)
Store (New)

Friend’s List

Social interactions now have a hub of their own and allow for more options and customization.

Friends List (Now)
Friend’s List (New)

Chat

Chat is also now located in a separate window from the game client. This is to reduce it overlaying on content and clogging up the client when hundreds of chats are open.

Chat (Now)
Chat (New)

Group Chat

Group chat isn’t currently intuitive. I wanted to make it more readily available and emphasize groups outside of game queues to help teams, and friends, communicate.

Group Chat (New)

Adding Friends

A more robust search for finding friends, or discovering new ones.

Add Friends (Now)
Add Friends Landing (New)
Add Friends Search (New)

On the Horizon

The work is hardly finished and hardly perfect, but progress and a solid start are better than perfect.

Moving forward I hope to apply more data research, new ideas and a fresh perspective so that my experiment will evolve into something greater.

Update: Thank you so much for all the support, it has been overwhelming to receive so much feedback.

For questions, comments, or feedback you can find me on Twitter.

--

--

Ki Silver

Lead UX Designer @ Riot, Artist. Sharing thoughts from industry and life.