top of page

League of Legends Trainer for Pros

A web application that helps League of Legends Pro League players analyze their gameplay.
animat-calendar-color.gif

Timeline

Aug 2018 - Oct 2018

animat-diamond-color.gif

My Role

UX Researcher

Product Designer

animat-designsoftware-color.gif

Tools

PowerPoint, 

Adobe XD, Slickplan

animat-lightbulb-color.gif

Skills

Market Research,

User Research, IA, Sketching

INTRODUCTION

League of Legends (abbreviated LoL) is one of the most popular multiplayer online battle arena video games in the world. There are over 100 million active players each month, and it has among the largest footprints of any game in streaming media communities on platforms such as YouTube and Twitch.tv. LoL has an active and widespread competitive scene. Tencent organizes LoL Pro League (LPL) in China, which is one of the largest regional competitions. 

​

Professional players in LPL are mainly selected from a server where the top 1000 LoL players can play against one another in China. Tencent wants to create a proprietary data analytics tool for these players to use and analyze their gameplay and VPGame is one of the biding companies.

lpl.jpg
Diamond.png
mestre-lol-png.png
Season_2013_-_Challenger.png

Project Walkthrough

My team at VPGame Inc. is given an API accessing the dedicated server of the top 1000 Chinese League of Legends players. We are asked to create an analytics tool to aid these players as they rise in rank in two months. We followed the user-centered design process while designing the product. 

process.PNG

Iterate

Since I am the only one who understands Chinese in the design team of three, I drove the first three phases of the UX process through constantly communicating with stakeholders and leading UX research.

process 2.PNG

After having an overall understanding of business requirements, I led the market research and user research in the empathize phase to learn about our audience. For market research, we did background research to get familiar with League of Legends through online resources, and we also did competitive analysis with the following brands to figure out what is the market needs and how can we differentiate ourselves from other competitors.

opgg.png
LeagueSpy-Logo.png
lolking.png
opendota.jpg
dotabuff.png
champion.gg.png
lolprofile.png

Then, I chose interview as my primary user research method because of the limited access to top performing Chinese League of Legends players. I conducted semi-structured interviews with 5 participants in three days:

​

  • 2 LGD Youth Camp Top Lane Player

  • 1 LGD Current Jungle Player

  • 1 Diamond Support Player

  • 1 LGD Youth Camp Coach

​

LGD is one of the LPL professional teams owned by my company, so most of our participants are recruited from there. Although coach is not our primary user group, interviewing the coach gave me new insights from a different and broader perspective.

After organizing and visualizing data we got from the research through affinity diagrams, personas and user journey, I defined the user problem, goal and success metrics. This helped me clearly see the direction I am heading. Then I presented my process, findings and future plan to the team and stakeholders to make sure they were satisfied with the milestones I delivered and what I envisioned the product matched their expectation as well. I also made an effort to reach out to our development team to start building chemistry and understanding how they expect to receive designs and what works for them. Identifying both the business and engineering constraints and getting everyone on the same page is essential for a project, and it also helped me narrow down the scope and design realistically. 

We moved to the design phase and started to ideate. We utilized the Bill Buxton 10 plus 10 method to sketch out and distill down the most promising ideas. Then I constructed the information architecture framework and presented the ideas with the sketches to the team and stakeholders in order to gain feedback from different perspectives. 

Since I was asked to build a seasonal tournament page for a major esports event, I passed my leading role of the project to another designer in my team. I still participated in the project through giving design suggestions and feedback, facilitating communication for usability testings, but not directly involved in the last two phases. 

Competitive Analysis

In the competitive analysis, I focused my research on game stats analytics aggregation websites that are most regularly used for MOBA (Multiplayer Online Battle Arena) games. Most of these platforms targeted a wide range of users, not only esports professionals. The two major types of analytics these websites focused on were 1) Analyzing individual's past match details to help users understand player performance. 2) Analyzing all players' gaming pattern to help users build strategy. More interestingly, most of these websites actually curated the game data through a large amount of numerical values. They tended to show an overwhelming amount of raw stats to ensure their websites covered all in-depth data relevant to the game. 

User Research

We learned about the game and how our competitors build stats analytics tool to aid general players as they rise in rank through market research, but we still have little understanding of our target users. We wanted to explore their opinions, behavior and experiences through qualitative research method, so I chose to conduct interviews.

​

I used affinity diagrams to organize research data I got from the interviews and distill several key learnings:

Top players improve themselves through lots of training and practicing.

 

Top players learn from better players and their own past game experience

​

Experienced players know better about common warding spots, team fighting and laning strategies.

​

Top players find the average statistics from all ranks don’t apply to themselves.

​

Top players don't trust post analytical suggestions. 

​

Player scoreboard and raw stats are not always good measurements of performance.

Personas

We have Yuan, Ping and Duo as our primary personas, and Chen as our secondary personas.

persona1.PNG
persona2.PNG
persona4.PNG
persona3.PNG

User Journey

I created this user journey for our stakeholders to understand a LoL pro player's training experience and convey opportunities of where users could interact with our analytics tool. Through the process, I gained deeper understanding and empathy with my end users.

Screenshot (6).png

Problem & Success Metrics

How might we help top performing players improve their training efficiency?

Defining success metrics is important as it helps everyone in the team to have a mutual understanding of what success looks like. In the project, I defined our success metrics to be the improvement of how fast users complete their tasks in the checking, pre game, post game, learn and practice stages. In order to measure this, I decided to compare the speed with what they normally do in these stages to help their training.

Sketching and Ideation

sktech1.png
sktech3.png
sktech2.png
sktech4.png
sktech5.png
sktech6.png
sktech8.png
sktech7.png
sktech9.png
sktech10.png
sktech11.png

Information Architecture

ia.PNG

Final Design Result

Our final design successfully reduced the amount of time users sought for assistance to analyze their gameplay in their daily training routine. Instead of interacting with different analytics apps and watching streams or replays of the whole game, users were able to quickly find what they need directly through our product in most cases. I passed the remaining prototyping and polishing work to the Design team located in China upon request by my boss to work on the League of Legends World Championship Event webpages.

Takeaways & Next Steps

What was the biggest challenge and what did I learn from it?

The biggest challenge for me was to conduct effective user interviews. Since my participants were located in China, the interviews were in the format of phone calls. (Participants preferred not to do video calls.) I found my participants were mostly introvert and didn't actively share their thoughts and experience. So I have to talk more than I supposed to, in order to stimulate conversation. It was really hard to prevent my bias creep into the conversation because I wanted to show empathy to make my participants feel as comfortable as possible. Also, since I was not super familiar with the game mechanism, I can't dig in-depth if my participants don't share actively. Through multiple attempts, I found a better way instead of asking the questions I prepared -- using more curious commands like "I'd love to know what apps you have ever used to check your game data?" and storytelling prompts like "Can you walk me through a normal day at Youth Camp, from when you start training to when you finish training?"  I found this way really useful to show my kindness and empathy while still being direct about what I wanted to learn. I could feel my participants become more relaxed and talkative than before.

What is the next steps of this project?

Through the interviews, I found top performing LoL players only focused on playing one role among top, jungle, mid, ad carry and support in their games. And since each role takes distinct responsibility, players have different specific goals and information needs. For example, the top players I interviewed shared a common goal of die less, but the support player cares more about vision. Due to time constraint and limited access to Chinese top performing players, I only interviewed players of top lane, jungle and support in this project. As a result, our design solutions are mainly targeted to solve the common needs of these players. In the future, we can interview some more mid and ad carry players, address more specific needs based on different roles and make our tool more targeted.

CONTACT ME

xuyiyun0126@gmail.com

Tel: 213-551-4714

If you want to collaborate on crafting amazing experience for people, get in touch!

​

Feel free to connect me on LinkedIn or shoot me an email. I am always happy to chat.

Success! Message received.

  • LinkedIn
bottom of page