League of Legends

Case study

Computer with League of Legends on it

Overview

Role: Researcher

Timeline: 2 weeks

Tools: Figma

Question: Can the League of Legends client be improved for users?

Background:

League of Legends, is the most popular multiplayer online battle arena (MOBA) in the world with millions of players and the most popular esports scene. With millions of players comes millions, even billions of dollars a year spent on the game which is why I targeted the “Purchase History” page, to see if someone wanted to spend their in-game money in a different way, and how they could get their in-game money back.

Summary

  • Research with users of varying ages, game experience, and income

  • Identified the most commonly visited areas in the client

  • Findings:

    • Users were drawn to shopping-related areas and player profiles

    • Users had difficulty finding the refund area and understanding the distinction between account and profile

    • Users often click through multiple tabs before finding the account button

    • Newer users and those without experience in League of Legends struggled the most

  • Accessibility issues for visually impaired users

  • Limited refund options and timeframes

  • Gathered user input through surveys to create common main and sub-pages

  • Created both a simpler and advanced version of the information architecture

Recommendations

  • Simplify the information architecture

      • Less to look through

      • Less repeating information

      • More related pages together

Getting into the research

Avatar with gradient to represent the Target Audience.

Target audience

Age range:
15-24 years old
24-60 years old (parents)
24-80 years old (guardians)

Avg. yearly income (major regions):
Lots of users may not have an income yet at their age
$36,000-$200,000 (dollar)
€32,833-€182,410 (euro)
₩47,760,660-₩265,337,000 (won)
¥247,431-¥1,374,620 (yen)

Question protocols

  • Gathered participants with varying levels of experience with video games, including those new to League of Legends and parents/guardians

  • Aimed to replicate new players' experiences and involve parents/guardians for potential skin refund assistance

  • Instructed participants not to search the internet for information

  • Emphasized time sensitivity of skin refunds (three-month window)

  • Researchers avoided providing hints or direct answers to user questions

Start page (home):

Goal page (purchase history):

Results and pathways of specific users

User 1

Age: 20 years old
US resident
Yearly income: About $41,000
Video game knowledge: Little

Pain points

  • Struggled to find the refund page

  • Kept clicking areas that had to do with purchasing

  • Assumed that wherever the user is able to purchase would be the account purchase history option

  • Got frustrated and tried to search where the refund area was located

User 2

Age: 16 years old
US resident
Yearly income: N/A
Video game knowledge: Fair amount
(most amount of modern video game knowledge in the group of participants)

Pain points

  • Took what felt like a substantial amount of time for something that should be simple.

User 3

Age: 64 years old
US resident
Yearly income: About $80,000
Video game knowledge: None

Pain points

  • User had a hard time looking through the different pages

  • Had a harder time trying to read the small words sometimes so we had to make the client bigger

  • Hovered over a lot of things as well as tried to use the word “shop” as a clue to help

  • Frustrated with some of the page names being somewhat related to each other but different pages and how

  • Some icons felt hidden because of the size

After the research, we observed a pattern in users' navigation to locate the refund area.

  • Analyzed user data to identify frequently visited areas of the game client

  • Excluding "home" and "account" tabs identified common areas of interest

  • Users were drawn to areas related to shopping and player profiles

    • Merch: Users expected to find account purchase history, but it only redirected to physical merch area outside the client

    • Event Shop: Users assumed they could find skin purchases and purchase history, somewhat useful for redirection to Store tab

    • Store: Users explored sub-buttons in the store, eventually finding the account button with person and settings icons

  • Profile: Users looked for purchase history or settings, confused by the distinction between account and profile

  • Collection (Champions and Skins): Users clicked on the bag icon but had to navigate to a web page and return to the client

Overall

  • Difficulty in finding the refund area on the League of Legends client was evident

  • User experience varied, with those familiar with Riot Games finding it easier

  • Newer players and those without experience in League of Legends faced challenges

  • Accessibility and time constraints pose additional issues for refunds

    • League of Legends allows three refunds per year within a three-month window

    • Users with visual impairments may struggle to locate the refund area

  • Account button was often overlooked, with participants exploring skin tab first

  • Suggests the need for improved accessibility and usability in the client

Suggestions

  • Simplify the information architecture of the League of Legends client

  • Gathered input from both new and experienced users of the game

  • Conducted surveys to identify common "main" and "sub" pages

  • Consolidated the most frequently mentioned pages into the main and subcategories

  • Created an "optional" group for less commonly mentioned pages

  • Users were then asked to create their own information architecture based on the common order

  • Developed both a simpler version and an advanced version of the information architecture for different user preferences

Simple version:

Advanced version: