League of Legends - Summoner Icon Page
Created by Riot Games in 2009, League of Legends is a game where two teams of five battle to destroy the other team’s base. With over 100 million players monthly, League of Legends is a clear success however, the game client itself needs more features that catered to the player. In this project, I critiqued the League of Legends client UI and presented a new interface feature.
Click Here to view my full process
CLIENT
Personal Project
MY ROLE
UX/UI, Visual, Motion Design
TEAM
Individual Contribution
TIMELINE
4 weeks in Spring 2018
Image from Riot Games and Blur Studios
CHALLENGE
One popular feature on the League of Legends game client is the Summoner Icon Collection which features illustrated profile pictures. However, this interface has left much to be desired as it is unorganized and lacks QoL information. As an avid League of Legends player and designer, I wanted to explore new ways of creating a better player experience.
I reviewed community feedback and conducted guerilla interviews with players to discover what they envisioned for the Summoner Icon Collection:
Players can’t remember how they obtained icons
Design makes it difficult for players to find a specific icon
Players wanted a way to categorize the icons
Icons are too small to see
Comments taken from the League of Legends Subreddit
DESIGN PROCESS
Competitive Analysis
Userflow Analysis - Choosing a Summoner Icon
Summoner Icon Interface Iterations
COMPETITIVE ANALYSIS
I compiled League of Legends artwork and gaming client interfaces that I wanted to critique and take inspiration from.
Images from League of Legends, Starcraft II and Steam
USERFLOW ANALYSIS: CHOOSING A SUMMONER ICON
I created a userflow of the steps required to change a Summoner Icon and was frustrated with the inability to easily find the icon I wanted.
INTERFACE ITERATIONS
After taking inspiration from competitors and critiquing the current player experience, I created sketches, wireframes and digital layouts.
NEW PLAYER EXPERIENCE
This design fits the Summoner Icon into the client hierarchy and organizes the icons, making it easier for players to navigate around.
SUMMONER ICON PAGE
The new design helps the player quickly find their icon of choice and has features including:
Icon Descriptions
Categorization
Bigger icon images
COMMUNITY FEEDBACK
I shared my design with Reddit and was excited when the League of Legends community interacted with it.
38,000+ views on Behance
1,700+ upvotes on Reddit
100+ comments on Behance & Reddit
After looking at comments from Redditors and Riot Games employees, I found areas of improvement:
Icons take up too much space
Clunkiness of Expansion Animation
Comments taken my post on the League of Legends Subreddit
PLAYER EXPERIENCE IMPROVEMENTS
After receiving feedback, I designed a simpler layout that still addresses player pain points including organization and navigation.
SUMMONER ICON PAGE UPDATE
The updated design has smaller artwork and icon descriptions that are more in line with the League of Legends branding.
