top of page
valo-rad monitor.png

Valo-rad

Overview

Valo-rad began as a way to promote prosocial behavior in the game Valorant. 

The goal of this project is to contribute to the research and design decisions that aim towards a future of gaming that is free from harassment.

My Role

UX Researcher & Designer
Interviewing, Wireframing, Prototyping, and Testing



February 2022 - September 2022

 

Background

The Problem

Since the COVID-19 pandemic, the gaming industry has exploded. The amount of people with diverse identities in gaming is at an all time high, and as an unfortunate consequence, harassment in gaming has also increased. Thus, it is evident that newer, innovative ideas must be generated to combat this trend. To narrow the scope of this design project, I focused on the game Valorant by Riot Games.

Read more about the state of harassment in gaming here.

The Solution

In the past, the most common form of harassment prevention was increased moderation through punishment (e.g. suspensions, bans, etc.). Now, there is a new trend to reward prosocial behavior rather than punish poor behavior. I decided to implement this idea into a new desktop app called “Valo-rad.”

A "tame" example of harassment in Valorant, believe it or not...

Understanding the problem

To get a better understand of the problem at hand, I wanted to conduct semi-structured interviews with Valorant players. I crafted a discussion guide in attempt to answer these specific research questions:

1. What is the trigger for this harassment to take place?

2. How does this harassment affect them both in-game and out of game?

3. How do these individuals currently deal with this harassment?

4. What motivates them to keep playing despite the harassment?

Data Analysis & Insights

After conducting the interviews, I gathered the qualitative data from my notes and began grouping them through affinity mapping on Mural.  I grouped the data based on how they addressed my research questions.

From this analysis, I crafted 4 major insights: 
 

   1. Harassment typically takes place over voice communications, starting as           early as the pro-lobby phase

 

   2. Muting is the most common “solution” used to combat harassment 

   3. Harassment has profound mental effects on gameplay 

   4. Players feel comforted when others defend them

springboard capstone 1.png

“Someone who’s of a majority within the industry sticking up for someone who is of a minority, I think that’s amazing.”

User Stories

Once the idea for my app came together, it was time to figure out what the app should include. Given the insights I collected, I created MVP user stories to start forming the information architecture.

VALORANT app user stories.png

Sketching & Iterations

Sketches

Before I sat down in Figma to create my prototypes, I needed to think of how I wanted my app to look. Using the red routes I crafted from my MVP user stories, I started sketching possible ways to implement my idea: reward good behavior with exclusive in-game rewards.

IMG_1664.heic
IMG_1689 1.png
IMG_1693.heic

Usability Test

Once I had a few sketches down of my red routes, I wanted some feedback to understand if users could easily learn and us the app. To find out, I conducted a usability test with my sketches.

 

The biggest takeaway from this test was that users didn’t understand why they were rating players 1-5 stars. What would happen if they rated a player poorly? The more I thought about it, the more I realized that this function was straying away from my original intent: reward good behavior. So, I scrapped this idea.

Valo-rad wireflows.png

Wireframing

With the feedback of my initial usability tests, I then started my wireframes using Figma to digitally map out how the screens would look on the desktop. Along the way, I met with my mentor to discuss the functionality of my screens.

High-fidelity Mockups & Prototype

Moodboard

To get a little more inspiration on how I wanted my app to look and feel, I gathered pictures of sites such as Twitch, tracker.gg, and Valorant and put them together on a moodboard. I wanted to incorporate bits of gaming culture throughout my app using popular Twitch emotes. The color palette was inspired by the futuristic cyberpunk aesthetic, which draws on bright neon accents. 

Valo-rad moodboard.png

High-fidelity mockups (Figma)

The Valo-rad homepage for new users.

Homepage (new users).png
Specific Match Details review pt2.png

The main rewards page where users can redeem their points.

Rewards main page.png

The review system in Valo-rad where users can tag teammates and earn points.

Prototype

Please click the fullscreen button.

The Future of Valo-rad

The future of Valo-rad is exciting. Eventually, instead of this being a separate desktop app, it could be implemented as part of the game, similar to League of Legends or Overwatch. That way, users can play their game and immediately reward or redeem their points right after the match ends. A participant in the usability testing also suggested that maybe there could be a more interesting way to display the data on the profile page. For future iterations, I could see the tags displayed in some sort of graph or pie chart that users can interact with. 

 

Gaming should be fun, and people shouldn’t be afraid to play their favorite games because of harassment. We as researchers, designers, and developers need to create better ways to ensure a safe gaming experience for everyone. While there might not be one perfect solution to fix everything, there are certainly opportunities to change what we can. 

Back to my UX Portfolio

Let's connect!
  • LinkedIn
Follow me here:
  • Instagram
  • Twitter
  • TikTok
  • Twitch
bottom of page