top of page

My Role: Solo UX Designer

 

Time Frame: 2 weeks

Tools: Miro, Figma, Photoshop, NVIDIA Experience In-Game Overlay Recorder

Scope and Constraints:

This was my first introduction to the 3C's of UX/Game Design, thus I spent the first few days studying and exploring WHAT the 3C's are, WHY are they important, HOW heuristics (Celia Hodents adapted Game UX Heuristics) help cement the 3C's, and the importance of GAME FLOW/FEEL.

v header 2.webp

UX Case Study: Valorant

Game Platform: PC

Genre: FPS

Modes:  Competitive Multiplayer

Version: 6.07
 

Valorant is a First Person Shooter (FPS) developed by Riot Games in 2020. Known for its competitive 'bomb defusal' 5v5 game mode that includes FPS mechanics mixed with a roster of agents with varying abilities. Gameplay lays heavily on communication, teamwork, and strategy to succeed.

Why Valorant?

With over 900+ hours of gameplay, and being active within the Valorant esports realm,  I have chosen to conduct a case study of Valorant through a UX lens using the 3 c's: camera, controls, character

Objective:

For this case study I wanted to evaluate and conduct a case study on the user experience of Valorant with a focus on the 3C's framework.

What are the 3C's?
The 3c's focuses on Character, Control, and Camera within gameplay.
Character: is the players representation in the game, where the character is responsible for the immersion and connection to the player, player to character feedback, as well as a sense of realism that is dedicated to the characters storyline, lore, and interaction in-game.
Control: Responsive, accessible, and intuitive system that allows players to interact with the game.

Camera: Is how the player views the in-game world and interacts with it. It helps improve the narrative, emotions, and action of the story, gameplay and character to the player. The camera angles, viewpoints allow the player to be more immersed in the game.

These three areas are critical and essential components that help players interact, be immersed, and create an engaging relationship between the player and the game. Overall, it is more about these three areas as a whole, compared to them being separate entities. Put this all together and the 3C's are fully responsible for the overall game experience and flow.

Research

I conducted gameplay research over the course of 8 competitive matches and roughly 2 hours of custom game mode ability checks. During these sessions I noted down important areas that I identified as usability issues that fell within the framework of the 3C's. This mind map allows me to present my findings in a comprehensive and structured way.

Using my findings, and the findings from the play tests I then selected 4 issues that I will run competitive benchmarks for.

  • Conduct an informal play through using a 3C mindset. Played 8 matches of competitive Valorant. (see Mind Map below and a detailed assessment of areas of improvement and opportunities)

  • Explored each agents abilities in 'Custom Game Mode' (2 hours)

  • Conduct semi-structured informal interviews/Play tests with 5 players to help remove my bias as a avid player of Valorant.

  • Competitive analysis/Benchmarks.

UX Gaming (1).jpg
pillar-user-interview_edited_edited.png

Key findings

Informal Interviews
& Playtest session:

Over the course of a few days, I conducted think-aloud's and semi structured interview style play tests through discords screen share.
I was able to recruit 5 Valorant players through an FPS community discord post. Members who were interested sent me a message with their username, name, preferred pronouns, age, profession, and hours played. There were 5 players out of 12 who were able to attend the selected dates/times. Alongside their request questions, I also created some guiding questions for the semi structed interview

  • Players ranged between 1​9 - 34 years old.

  • Identified as Women/Non-Binary.

  • Rank ranged between Silver 2 - Diamond.

  • All players had 80+ hours in Valorant.

  • Explored 4 agents in Custom Game
    (think-aloud protocol)

  • Played 4 swift games against other players.
    (think-aloud protocol)

  • Players chose 1 agent to play a long match.
    (semi structured interview)

User Experience Questions.png
valorant logo.webp
2177994.png
11Untitled.png
brimm1.png
discord.png
discord.png
  • Lower ranked individuals felt worried and insecure at first when they played agents that they have not explored yet. After playing each agent in custom game mode they stated that they felt a sense of curiosity and readiness to test out the new agent(s) and abilities in a few 'swift' matches.

  • 3 out of the 5 players noted that Omens map navigation to be difficult and disorienting during a match since his abilities and Ultimate focus on teleportation. There were feelings of anxiousness and fear of teleporting somewhere 'dangerous/wrong.' This can alter and diminish players emersion affordance in the game.​​

  • All players mentioned that the pacing and speed of the game was engaging and fun, with an emphasis on the newer players to feel that it can be a bit too fast pace without mechanical mastering of abilities.

  • Players noted that they found the movements and controls on their agents to be functional and designed well. Beginner and some intermediate players noted that executing certain abilities are harder to  predict, identify, and time. Sky's trailblazer, Sova Drone, most of Breaches abilities and Omen's ultimate and blind ability.

  • All five players reported that they would benefit from additional ability signs and indicators that would help their understanding of ability 'hit confirmation' and better visual indicators for agent ultimate ability clarity, and ease. Player suggestions: Breach's stun and Sovas shock bolt should have a hit confirmation signal and Omens ultimate should visually indicate on the map where their teammates are.

UX Gaming - Frame 6 (1).jpg

Selected 4 areas of improvement that I will run competitive benchmarks for.

Competitive Analysis

csgo logo.png
OW2 logo.png
apex logo.png

I have selected one issue per C: character, camera, control and will compare them to three other popular FPS games: CSGO, Overwatch 2, and Apex.

After playing each game for 1.5 hour each (4.5hrs total), I focused on comparing my 4 'issues' and analyzed how these other games experience them.

comp matrix.png

Persona & Empathy Map

Persona.jpg

Based on the findings from the play-tests and semi-structured interviews, I was able to create a player persona "Jackie". A fulltime student and part time café worker who often games with her friends and wants to gain mastery of her favorite class type in valorant so that she can play better in community tournaments.
 

empathy map.jpg

With my findings I created an empathy map. Jackie is looking to understand how to properly execute and effectively use her agents abilities during competitive matches.
 

Going deeper into her map, we noted that when Jackie understands an agent's abilities and executes them well, there is a sense of accomplishment and satisfaction. However, she feels frustrated and disappointed when she misunderstands an ability or dies quickly due to slow game sense.

With the information that I gathered, the following How Might We Questions emerged

  • HMW provide better sensory feedback to players when using agents’ abilities to improve its effectiveness and the player's immersion?
     

  • HMW design character abilities and camera behavior to work together to optimize the player game feel?
     

  • HMW enhance the player's immersion and engagement with the game mechanics by improving the control schemes for agent abilities?

Paper Sketches

I created two rounds of sketches on paper and Figma. This process was done in the style of “crazy eights”. I gave myself 10 minutes per issue to sketch out solutions/enhancements.

Sketch2.jpg
Sketch1.jpg

Figma Sketches

Using Figma allowed me to generate my design ideas and solutions with a bit more flexibility and color. 

1. Issue

Camera shake side effect

The quick camera shake (haptic feedback) in this clip is shown when a player drops, picks up, or switches weapons. This shake is disruptive to the player and their aim, which negatively impacts their ability to focus in-game. If repeated often, this effect can emote a feeling of motion sickness and unease.

Differences in camera movement and visual clarity during weapon dropping across APEX and CSGO.
Below, you can see a reduced camera shake when switching weapons in APEX, which allows for less disruption and a less intense feeling of unease (motion sickness). In CSGO the haptic feedback is completely removed.

apex logo.png
csgo logo.png

Changes:

New menu setting

1111.png

Original menu settings

original menu.png

There are two options: reduce the speed and intensity of the haptic feedback during gun drop/pickup or be able to toggle the option within the menu system.

Above, you will see the added Camera Shake toggle option (on the left) compared to their original menu settings that did not have the option on the right.

valorant logo.webp

2. Issue:

Breach ultimate Rolling Thunder ability

Placement and use of Breaches ultimate ability does not provide the appropriate visual, auditory feedback and clarity pre & post use. This causes his mechanics visuals to not fit his narrative (3C: character); which is a bionic man that is able to use kinetic energy/blasts to shake the earth around him.​

  1. During the 'Rolling Thunder' preview the ability placement can be clearly seen on the mini-map. Although, the visual feedback in the gameplay screen is limited with low visual moving yellow placement lines.

  2. When enabling Breaches ability post placement there are visual blasts to show feedback that the ult has been used, although there is low auditory feedback when/if an enemy is blasted/hit (which lasts 5 seconds). The blasts then quickly disappears leaving the player to figure out if their ultimate ability stunned any enemy players.

Why is it important to change?
 

An agents abilities and their mechanics should be a reflection of their narrative and story. When this happens players become more engaged and more immersed into the experience. Feedback/Mental Mapping/Error prevention & recovery

Changes:

BreachPathTexture2.jpg

Option 1.1: Toggle option of an Ultimate placement visual replicating shattered 'earth'. This visual stays visible until the stun effect has ended.

BreachPath11.jpg

Option 1.2: Toggle option of an Ultimate placement visual like an infinite runner. Toggling this visual option allows for new players to create mental mapping of the length and time of the ability

Option 2.1: It is essential to provide the player with clear auditory feedback. There is a low volume 'bounce' noise when an enemy is hit. Although this noise is easily masked during a fight by other noise (guns, abilities etc.) By amplifying the sound effect of an enemy player being hit/stunned by Breaches ultimate, a player can easily distinguish if their action was successful or not.

Option 2.2: Changing the sound effect to a more distinguishable sound might help players recognize it. A sound effect that showcases both the hit-back and the stun.

valorant logo.webp

3. Issue:

Omens ultimate Control limitations and narrative disconnect

Omens ultimate ability "From the Shadows" is unique in its own ways, motioning that Omen can teleport the player anywhere they desire on the map. Although there is a disconnect within his narrative as a 'phantom' agent, where the player can only select one level of a desired location, even if there are 2 levels to the platform (3C: controls). This limitation can feel frustrating and disconnecting since these areas are easily accessible on foot during gameplay and removes the player from enjoying an immersive experience.

  • There are no controls dedicated to selecting or indicating above/below a 2 leveled area.

  • Lack of visual clarity in Omens teleportation map. indicating that Omen can only teleport to the highest platform and not below it.

  • Lack of visual identifiers on Omens map that help indicate that you are teleporting to only one level of a 2 level area.
    Mapping > players mental model of the game to the interface given. Affordance > lack there of to identify where the player is actually teleporting to.

Changes:

  • Adding a right mouse click to toggle​ between 'above' and  'below'. This is not a standard convention used in FPS games but Valorant in of itself is unique since it combines both abilities (not utility) and conventional point-and-shoot models derived from older FPS games.

  • Create a mouse control option to toggle above/below areas that have 2 levels.

  • Adjust mini-map design to showcase what areas have 2 levels.

mouse-right-click-icon-0.png
OmenRadial2lvl.png

Map areas that have 2 levels have a dark radial outline indicating a see-through effect to showcase 2 levels.

OmenUltPing.png

When selecting an area with 2 levels and using the new right-click mouse toggle, the map mouse pointer will toggle between a light centered circle (original design) for above area teleport. Below area teleport will have a dark contrasting center circle indicating the bottom level has been selected.

valorant logo.webp

4. Issue

Skye's Trailblazer Ability: Inconsistent line of sight indicators & Camera Obscuring

Skye's Trailblazer ability allows her to send out a tiger to run, jump, and stun an enemy, with the player being in control of the tiger for a maximum of 6 seconds. However the ability has a limited vision radius of 22.5 meters, beyond that the player's view is blocked by a flat green color. This can be frustrating to players, as the mini-map will still display the enemies past the 22.5 meter range, which creates inconsistent line of sight indicators, as well as the limited view creates a camera obstruction.

  • Field of view (FOV) while using Trailblazer is limited.

  • When trailblazer is in an open or large area it cannot see enemies past 22.5 meters, but enemies can easily spot it and kill it, creating player frustration and negatively impact the player's view and their ability to make informed decisions.

  • There is no visual crosshair to help players navigate the terrain and use the jump attack. The camera angle during trailblazer is changed to a lower/bottom-up view. This lack of a visual crosshair to help players navigate the terrain and use the jump attack can make it difficult for players to accurately aim the tiger's jump attack. Affordance, Visibility

Changes:

sky crosshair camera.png
  • Camera should provide players with a clear view of the gameplay screen, allowing them to see and understand the environment.

  • Increase field of view to remove distance obstruction.

  • Add a crosshair to help players target and navigate the change camera view/environment.

Thank you for reading my Valorant Case Study!

I came into this case study with little knowledge about the 3C Framework, but I approached it with an open mind and a desire to learn and grow. Through my research and analysis, I have gained a wealth of knowledge and understanding about video game UX design. This experience has been incredibly valuable for me, and I am grateful for the opportunity to learn and expand my skillset. I look forward to applying this newfound knowledge in future projects and continuing to refine my approach to video game UX design.

 

I have been active since Beta in the Valorant community and have accomplished a lot:

  • Competing in community based tournaments.

  • Help moderate and admin lobbies of Riot/Gen.G sanctioned Tournaments.

  • Moderate and organize events for the Galorants discord server, where we serve a community of 20,000+ marginalized gamers.

  • Became an LGBTQ Outreach Lead in Galorants.

  • and playing the game WAY TOO MUCH ...see proof below.

BigSpoon.png
bottom of page