MASTER’S PROJECT 2024
Riot Games

A platform designed for traditionally marginalized communities to meet, grow, and learn about LoL esports in a safe & fun environment

Timeline
Aug. 2023 - Apr. 2024
8 months
Team
Stephanie Kim
UX Researcher
Anne Sullivan
Advisor, Digital Media
Industry Partners
Alex Vejnoska
UX Manager, Riot Games
Ryan Hoffman
UX Lead, Riot Games
Tools
Figma
Miro
Googledrive

My role

Research Phase:
- Conducted competitive and current state analyses.
- Collaborated with the UX researcher to define research goals and execute user interviews and observations.
- Designed and facilitated the co-design workshop, and created journey maps and other key artifacts.

Design Phase:
- Finalized design concepts, developed storyboards, and wireframes.
- Established UI style guidelines and built high-fidelity prototypes for effective user testing and presentations.

Overview 👋👋

1. Background

As a popular team-based strategy game, League of Legends attracts fans all over the world.

Despite its popularity, League of Legends is known for having a toxic community.

Among all the players and viewers, members of the traditionally marginalized groups are often the target of harassment. According to a community survey from 2020 with 3784 respondents:

73%

of women had experienced being flamed

32%

of women had reported sexual remarks or propositions

5%

of women had experienced being stalked outside of the game

LoL players and esports viewers are lacking in gender diversity.

There is a significant and troublesome gender disparity in the LoL community compared to the general gaming populace.

2. Problem

Not addressing the needs of non-male and marginalized groups in its Esports environment, Riot Games could be limiting its player base.

Long-suffering from an online toxic environment, members of traditionally marginalized groups deserve a safer and more inclusive space. Moreover, Riot Games significantly narrows its player base by overlooking the needs of non-male players. Additionally, the esports industry is experiencing profitability challenges, which could be mitigated by addressing these inclusivity issues.

3. Solution

A platform designed for traditionally marginalized communities to meet, grow, and learn about LoL esports in a safe & fun environment

The platform comprises two main components: Viewing + Playing.

The Viewing section--provides users with a personalized experience tailored to their interests, preferences, and game experience, creating a safe social space for marginalized genders to form connections and communities.

The Playing section--offers a low-stakes, low-stress entry point for new fans to explore the game without committing to a full session. It also includes a community board where people can connect with others who share similar interests to play together.

Highlights Diversity and Inclusion

During onboarding, users can select from various inclusive avatar customization options. Once users set their preferences and interests, the homepage is personalized to reflect these choices. The platform also promotes more diverse tournaments, featuring key players which not only helps users learn more about the players but also enhances visibility and representation for marginalized genders within the fan community.

Facilitates a safe & social viewing experience

In this space, users will find a welcoming environment to connect with other like-minded individuals. This feature is designed to foster engagement through micro-interactions, such as sending a wave or a like. It also provides conversation starters to help users initiate connections.

Facilitates learning & understanding

Once the stream begins, it will automatically switch to full-screen mode, providing an immersive viewing experience. Users can customize their experience by selecting from a variety of widgets that enhance their understanding. They can also engage with friends, join room discussions, or interact directly with the casters by asking questions.

Encourages playing

This section of the platform features mini-games, customized to match the user’s experience level, allowing them to learn and sample the game without committing to a full session. Additionally, it includes a community board where users can connect and find fellow players.

4. Outcome

Participants showed a promising increase in interest in LoL Esports

Participant #3
“...It's more of a safe space. It would make me feel willing to try knowing that there's people out there who are in the same place as me.
Participant #4
Engagement, beginner-friendliness, and inclusivity are all 10/10”
Participant #2
“Now I would give my interest a 10. There’s a community behind everything so that I feel like I’m not alone.”

5. Our Approach

Literature Review
Current State Analysis
Competitive Analysis
project timeline
Interviews
Observation session
Persona
Co-design workshop
Brainstorming
Storyboarding
1st Rnd user feedback
Lo-fi wireframes
Concept testing
Mid-fi wireframe
Stakeholder feedback
Hi-fi prototype
User testing
Design review

Reflection 💭

1. What Have I Learned

It is important to keep the goal of the project in mind to design in service of the users.

Because we were designing a solution in the gaming industry, there were times when we let our creative imaginations run wild, and we ideated extremely fun and engaging features. However, we had to keep in mind the ultimate goal of our project, which was to increase inclusivity for our users. By repeatedly communicating with our stakeholders, we were reminded of the importance of prioritizing features that specifically served our users instead of just designing a solution that made esports more fun for everyone.

Selecting the right aesthetics can be just as important as selecting the right features.

The appreciation of aesthetics was a significant characteristic of our target users, and they proved to be very sensitive to design choices. Visual design can strongly convey emotion through color choice, shape choice, and more. In the case of League of Legends’ visual design, our users perceived emotions of intensity and aggression, which actually turned them off. Therefore, we used soft colors and shapes and created cute and approachable avatars, which greatly improved the appeal of the solution to our user group.

2. if i had more time...

Spend more time on evaluation in an ecologically valid context.

Our solution is a unique one in that many parts of it cannot be usability tested in the traditional sense. The core aim of our solution was inclusivity, an inherently social concept, which cannot be easily measured with standards like benchmarks. Testing this would require a natural, non-lab setting to truly evaluate indicators of enjoyment, comfort, sociability, etc. Given more time, we would like to simulate the type of environment our target users might really be in (one that requires actual socialization) to accurately assess the solution’s effectiveness.

Do more iterative design.

We spent a lot of time on the research phase, leaving us with a much shorter amount of time than desired for design. Our design was complex and more time would’ve allowed us the ability to increase its fidelity by: improving the realism of the virtual chat room stage, expanding on the minigames and widgets, creating more appealing and diverse avatar customizations, and more.