General / 07 November 2023

Independent UX Case Study: Valorant UI

1. Description & Prombt:

I wrote in my thesis about #uidesignsystems in the game genre shooter, and 1 example was #valorant.

In this project I will detaily display my version of a Menu Flow for Valorant and a new menu, to get the styles consistent as well as the control in the menus. I will show how Valorant can handle User Experience Design Methods and actual player experiences from my Master thesis.

With the following portfolio I will show some issues I found while playing, researching and asking players and designers for they knowledge and opinion.

2. Times:

09/10/2022 - 03/28/2023 Full Time. 7-9 hours a day

09/10/2022 - 12/01/2022 Research, Questions Experts, Survey Players

12/02/2022 - 02/21/2023 Writing, Designing, Corrections

03/01/2023 - 03/28/2023 Presentation, Training

3. Overview:

a. WYSIWYG - What you see is what you get - charts, short, precise and summarized input

b. UX in Valorant, target groups, problems

c. solving UI and UX problems

d. making UX better with UI and UX principles


3: UX in Valorant

The target audience of Valorant are the following: Lovers of shooters with a tactical note in the mechanics and flow. I saw some mechanics for new and returning players, but not as much as in Overwatch 2. This leads to the issue of an high start for new players and female players. Cause to reasons of toxicity against LGBTQ+, female players and under presentated player groups, some of them never even tried Valorant or will never again after toxicity in matches.

This is a community issue, which I see in at least two of Riot Games actual Games. Problems like this leads to extreme and complicated community and communication in those, which can lead to players leaving and de-installing Valorant

So let's take proto-personas to use for the UX in Valorant:

The following proto-persona where seen in Valorant and Playertest. Names and Personal Information were changed to protect the people and players. We will re-use the Personas we forged in the Blog Post about Overwatch 2 (see Portfolio Page: Blog: Design Systems in Overwatch 2 and resulting UX ).
This will show us directly how the same issues impact the players.

  • Profile 1 competetive type: 
    • Name: Brit - Female, 22 - open to talk in video games
    • plays since 2018
    • likes and main Reyna and has an overall KDA of 20/3/11 with her. 
    • She is the competitive type and likes to play against actual players and people.
  • Profile 2 social type: 
    • Name Josh - Male, 45
    • talks in video games
    • came to Valorant in 2022 as free to play gamer
    • likes and main Brimestone and has an overall KDA of 10/10/3. He likes the social aspect of games.
  • Profile 3 fun and immersive type: 
    • Name: C. - Male, 15
    • does not talk in video games, cause to flame and toxicity in previous games
    • came to Valorant in 2022 as free to play gamer - likes to main Sage and Killjoy and has an overall KDA of 5/ 10/46. 
    • He likes the immersive aspect of games and plays for relaxation and fun.

All the player types and proto-persona above are part of the target group of shooters like Valorant. - We changed abit of the mained Agents here.


3: solving UI and UX problems

  • Individualizations for Weapons, Sprays etc.

In this example I saw the same responses of the players. Most where unaware of the possibilities for individualizations for crosshair, outlines, sound and sound effects and weapon skins. This can be found in all proto-persona types mentioned above. But in valorant addtionally you can be trolled for even your crosshair. Some lines like: 'OMG. Your crosshair. change it!' can easily scares the player type 3. C. would never play any matches after this or considering mute the team mates in all the matches. Valorant matches is all about communication and tactical knowledge about you, your team mates, the map, sounds and the enemy. Without information from your team mates you misses alot of important intel, that can lead to good played rounds and matches. This issue seems small, but can have a huge impact on your match quality in all fields.
Solution for this issue: Implemented option function in the main menu, a crosshair collection from other players more prominent. 

  • No match system for complete new players

Like Overwatch 2 Valorant has also some options for new players, but sadly Valorant lacks a Match-System against KI-controlled agents.
Valorant has training grounds to test skills, weapons and situations like planting the spike. The Last point has different difficulty levels.
For completly new players it is difficult to train their own skills and moveset without being harasst for bad decisions, lack of knowledge about the map or weapon mechanic. Same with communication and sound effect that can help communication (pings etc). A implementation of a system like in Overwatch 2, where players match against KI-controlled agents, can benefit all proto-persona profiles.
Solution for this issue: Implemention of a system with matches against KI-controlled agents.

  • Option menu again

Also like in Overwatch 2 Valorant only uses the wheel-Icon to represent the option function on the main screen of the game.
Some complete beginners may do not know this symbol, so It would not hurt to implement an option-function in the main menu.
Valorant does not hide this function, but does not highlight it either.
Solution for this issue: Implemention of the option function to the main menu


  • double functions: payable functions in 'Shop' and 'Battlepass'

In Overwatch 2 Blog Post I told you about my point of view how I am not found of this state of the Main Menu, here in Valorant I see the same issue with it: I am mostly a free-to-play user of those games and want to keep it that way. A double implementation annoys me more that it leads to use of one of the functions of Shop or Battlepass. I understand why Riot might have done the implementation this way: Riot wants to earn money. All good with me.  - So this issue is might me smaller than I made it. BUT one of the UI Design Principles is to minimize options to the core value. 
Riot can be benefit from it, and the player types 1 to 3 will not be annoyed by advertisement in games (application).
Solution for this issue: combination of Shop and Battlepass into just 'Shop'


3: How to make the best out of the findings

In this Blog Post we do not have the Charts, like in Overwatch 2 Blog Post, but I will link it: Here you can find the Charts of Valorant and above.
But have the issues above this section, so we will use these.

1. Consistency

Valorant's Design can be improved. Here help consistency in design, so users know where in the application we, the users, are currently are.

  • more is less: payable options in Main Menu can be reduced and combined to one item

  • implementation of the option-function in main menu or as text

  • Design-wise valorant do not need to improve or re-design as much as Overwatch 2

2. Usabiliy and accessibility

  • 'Option' as Menu-item in Main Menu, so user can access options and Individualizations more easily

       This 1 point looks like not much, but it can improve alot of issue Riot is facing in their games.

3. Other possible improvements needed

  • community management
  • ticket system and report system
  • under represented groups need a save place in games of Riot Games, and NO banner design, which are support those, are not enough!
  • twink accounts problems

After some changes the menu also can look like this.

Click Dummy: Valorant - this will open a new tab in your browser.

More Improvement on other projects, web pages and menus will follow. Stay tuned.