Summoner Icon Page

League of Legends page design focused on the player experience

User Experience, User Interface

 
SummonerIcon.gif
 

Background

League of Legends is multiplayer online battle arena game with over 100 million players monthly. Players can play Normals, Ranked or All Random All Mid (ARAM). Both normals and ARAMs are played casually but Ranked is more intense because it determines your placement in the player base. Ranks run from Iron to Challenger, with Challenger being the top 1%.

The game uses a downloadable client which contains the player profile, shop and the game itself. Players can personalize their profile by using different summoner icons which can be obtained with purchase or by completing in game missions.

My Role

I designed the layout, visual elements and developed the storyboards for the animation.

Mission

Being an avid player of the game, I wanted to design a page in the client to improve the player experience.

 
  Image from Riot Games

Image from Riot Games

 

Research

In the beginning, I studied the branding for League of Legends as well as the game branding known as Hextech. I also looked at the different pages in the client and looked for patterns.

Branding.jpg

Target Audience

League of Legends players with the typical age ranging from 13 to 30.

Defining Poro

I interviewed people who played the game at least once a week. I used Poro, a mascot of League of Legends, as a persona.

 
 
 Poro illustration from Riot Games

Poro illustration from Riot Games

Designing the Player Experience

After learning about what the players wanted, I decided to create a page that acts like a trophy case for the summoner icons. This page will include images of all of the summoner icons in a player’s collection and list how and when they obtained the icon.

However, I needed to make sure that the page would have:

Consistency: The page needed to use the correct branding in order to fit in with the client. Using the correct colors and similar shapes will make the page easier for the player to understand because they are familiar with it.

Clarity: The design needs to use intuitive features with smooth transitions in order to make it user friendly.

Sketches and Wireframes

 
SummonerIcon_portfolio-wireframes.jpg
 

Final Product

I decided to split the page into two sections: one section with the current summoner icon with other information and the other section with all of the icons. The left side focuses on information including the total number of icons owned by the player, types of icons with their corresponding shape, as well as buttons that show different ways to sort the icons. On the right side, the collection of icons is displayed and can be scrolled depending on how many icons are owned.

 
 

When an icon is clicked, information on how and when they obtained the icon is displayed. The player also has the option to click the button to change the icon on their profile summoner icon.

This design makes it easy for players to find information about their icons and considers the icons like art pieces. The summoner icons are big so that everyone can appreciate the artwork that went into making them.

Animation

 

Special thanks to Morgan Tieu