.png)
THE PRODUCT
Valorant is a competitive tactical shooter video game made primarily for PC. This case study focuses on re-designing its Main Menu for a better user experience.
MY ROLES & RESPONSIBILITIES
UX Researcher, Visual Designer, Interaction designer, and Motion designer.
​
My responsibilities include wireframing, prototyping, conducting a competitive audit, usability studies, creating personas, user map journeys, and designing basic visuals such as Iconography, choosing color schemes, and manipulating images.
THE PROBLEM
The current UX has navigation and visual and navigational problems that lead to confusion and redundancy, and it isn’t optimized for a potential console port.
PROGRAMS USED
Leonardo for sketching, Photoshop for raster image editing, Figma for wireframing and prototyping, & Adobe Illustrator and After Effects for motion graphics previews
THE GOAL
To create a dynamic main menu that provides the most optimal user experience for PC and a potential console experience through many different input types, whether it’s through a mouse or a controller.
PROJECT DURATION
November, 2022 - February, 2023
INTRODUCTION
This project will be a redesign of Valorant's main menu in order to improve the user experience (UX) and user interface (UI). The goal of this project is to create a more enjoyable and intuitive experience for the users of the game as the current UX seems to lack that in many aspects.
The redesign will include an overhaul for certain pages along with a few adjustments on other pages that need a little fixing regarding the layout and navigation in the hopes to make access key features and content easier for users, incorporating more engaging and interactive elements, and improving the overall visual design and providing visual consistency.
This project will be undertaken by a single person rather than a team. I will be responsible for researching user needs, sketching out design concepts, prototyping and testing different designs, and implementing the final version of the redesign.
UNDERSTANDING THE USER
-
User Research
-
Competitive Audit
-
Personas
-
Problem Statements
In this section, I will delve into the process of identifying the target user demographic and creating a detailed persona. This includes a thorough understanding of their needs, goals, and pain points.
By creating a persona, we will be able to more effectively design a solution that addresses the specific problem statement of our target users, resulting in a more efficient and user-centered design process.
Research Plan
Conducted 5 interviews and gathered opinions and struggles about the current main menu.
I conducted five interviews with users aged 18-24, comprising three males and two females, using voice chat. My initial assumptions regarding the main menu user experience were confirmed by the feedback received, with several users expressing frustration and stating that they had simply "gotten used to" the poor design. However, the participants did praise Overwatch’s UI for its visually appealing design and intuitive user experience, and noted that Valorant's main menu appears to be heavily influenced by Overwatch's design.
User Research
Pain Points:
- Horizontal scrolling is confusing
- Certain colors lack contrast
- Redundant main menu design
- It's not controller friendly
- Challenges are not too visible for new players
According to the interviews I had with those 5 users, I was able to pin down 5 pain points that affected their user experience negatively:
-
The horizontal selection method in the agents and gun selection menu lacks structure as it’s easy to lose or find the items users are searching for.
-
Accessibility is not a strong part of valorant’s menu design as it struggles with color contrast, fonts, and hierarchy.
-
The current main menu is redundant and somewhat confusing due to the opening page and the top navigation bar that shows up when users press the PLAY button.
-
Valorant’s UI isn’t controller/console friendly on its own so many UI and button layouts should be changed
-
During the interviews, it became clear that the majority of players were unaware of the challenges available in the game. This was likely because they did not realize that they could interact with the buttons in the top right corner of the screen by hovering over them. As a result, the challenges were not on their radar as something that they could access or complete.
Persona
Persona: Omar, a university student who enjoys valorant
Problem statement: Omar, a second year university student is seeking a more seamless and enjoyable way to play Valorant across multiple platforms (e.g. PC, console, and phone) due to constraints on his time and space caused by his university workload and part-time job. Omar would benefit from a solution that simplifies the navigation and gameplay experience in Valorant.
Objectives of the redesign
As part of the redesign process, I will focus on improving the navigation between the startup screen and various pages within the main menu, and I will introduce more intuitive and visually appealing buttons in the top right corner of the screen that won’t go unnoticed to new users...
I will also address issues such as the infinite horizontal scroll in the "Agents" screen by implementing a more effective navigation system. In addition, I will work on enhancing the visual appeal of the gun collections display and adding more relevant statistics to the career page. Overall, the goal is to create a more enjoyable and intuitive user experience for players.
Competitive Audit
Competitors researched:
-
Direct:
-
Counter Strike Global Offensive
-
Overwatch 2
-
-
Indirect:​
-
Fortnite​
-
STARTING THE DESIGN
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
It's time to start the design process with the paper wireframes now that I have a good understanding of the user type I'm designing for and an understanding of how the competitors' menus are constructed. I'll import it into Figma to build the initial low fidelity prototype before getting it ready for usability tests.
Paper Wireframes
Brainstorming layout ideas
I created a slideshow that displays the wireframes for my the menus and provides a description of each image as well as an analysis of my design choices. This helps make my thought process clear about elements on the screen and why I made the design decisions I did for the wireframes.
Given that Valorant was initially released with this system and that most players are already used to it, it makes the most sense to use it for the main menu. Additionally, the horizontal layout gives background animations more room to breathe, which can enhance the menu's visual appeal.
Digital Wireframes
Converting paper wireframes to digital wireframes
Here's the slightly refined version of the paper wireframes with a selected font and basic design choices.
For the digital wireframes, I chose the JetBrains Mono font because it is a monospace font that goes well with the design of the digital user interface for Valorant. The digital UI for Valorant is more aesthetically pleasing overall thanks to JetBrains Mono's sleek and contemporary appearance.
Lo-Fi Prototype
Low Fidelity prototype using Figma
For the Lofi prototype, I have identified each element that will include an image or icon by applying a gray background and adding a descriptive label. As previously mentioned, the Battlepass and Store screens will remain unchanged, but all other screens have been modified. One main issue with Valorant's main menu is the transition between the starting screen and the play screen. The original menu has a redundant vertical list of options that changes to a different navigation style when users click the "Play" button, as shown in the following example. This can be confusing for users as they must adapt to a different navigation style for the same function. To address this issue, I have made changes to the menu's layout and navigation to improve its usability and eliminate any unnecessary redundancy.
Usability Study
Lo-Fi prototype usability study findings
-
Collection page menu navigation error
-
Social Popout is less desirable than the original approach
-
Career page has a lot of unused space and certain elements are too small
-
Redundant information was found and a category was left out by accident
-
Game mode selection didn't have information about each game mode
During our usability study on the Lofi prototype, several areas of difficulty or frustration for users were identified. These pain points may indicate areas for improvement or further investigation in the design process.
Findings:
-
Collection page: It was found that the list on the left hand side, which displays item categories, does not allow users to select specific items within those categories. As a result, users were unable to complete tasks such as changing the skin of a phantom gun. Additionally, users were unable to change the gun buddies as this new system solely focuses on choosing gun skins. These issues may have caused frustration and hindered the user experience. To address this, it may be beneficial to consider revising the interface to allow users to directly select specific items within categories.
-
Social popout: 4 out of 5 users pointed out how they would rather have the default social tab that shows online users without the need to click on it as it makes for a much more convenient tool.
-
Career page: Users have generally given the career page positive feedback, with the majority expressing satisfaction with its overall layout and functionality. The rank and rank rating progress bar's size has drawn criticism from 2 users, who claim it may be too small compared to the rest of the page. The size of these elements could potentially be changed to address this, which might enhance the user experience for those who have noticed this as a problem.
-
Agent category info: During testing, it was observed that users were not utilizing the information button provided beside each agent category. Upon further investigation, it was discovered that this was due to the fact that the same information was already being displayed on the right side of the screen. This led to the realization that the agent category information on the right side of the screen may be redundant and could potentially be removed. This would allow for a clearer presentation of the information and may encourage users to utilize the information button provided on the left side of the screen as intended. Removing this redundant information could also potentially improve the overall user experience by simplifying the layout and minimizing the amount of information displayed on the screen at any given time.
A few users pointed out how the agents screen is missing the sentinels category, which needs to be included in future design iterations. This omission was due to a design error from my end, but thankfully it’s a simple fix.
-
Game mode selection information: It has been noted that some users might find it helpful to have more information available when choosing a game mode to play, especially for those who might be unfamiliar with some modes like escalation and replication, as pointed out by some users. This indicates that there may be a chance to enhance the user experience by offering more data and resources especially those pertaining to these less popular game modes. Users may become more engaged and satisfied as a result because they will be better able to choose which game modes to play because of this.
Usability Study Analysis
Insights, analysis & what to improve upon
Overall, the findings from this case study indicate that there are a number of areas for improvement in the user experience. These include addressing issues with the “Collection” screen, re-introducing the social browser, making adjustments to the “Career screen” hierarchy and placement, removing redundant information from the right side of the “Agents” screen, and providing additional resources and information about game modes to aid users in their selection process before queueing for a match. Implementing these changes could potentially enhance the overall user experience and increase engagement with the menu.
REFINING THE DESIGN
My favorite part of the process is finally here. In this section, I will begin applying what I learned during the usability studies while I refine the design into a more presentable and usable variant.
-
Mockups
-
High-fidelity prototypes
-
Animations
-
Accessibility
Mockups
Addressing pain points and adding detail
The following slideshows show the product before and after the usability study and visual design modifications in side-by-side comparison. Each image is accompanied by a descriptive analysis that identifies the problems that needed to be solved and details how they were done. This not only exemplifies the modifications made, but it also shows how they support a more user-centered design methodology.
Collection Screen
Collection screen: The collection screen has undergone several design updates in order to improve the user experience. The gun categories have been separated from the guns themselves and listed above each section, allowing users to easily browse and select their desired weapons. Once a gun is selected, users can either click the “Equip” button or double click to equip the skin of their choice, which will be highlighted with the label "Equipped." Additionally, users can change the skin variant by right clicking and selecting from a pop-up list, and they can change their respective gun buddies by clicking on the buddies button, which transitions the gun view to a gun buddy selection screen.
​
Several users have noted that they appreciate being able to view their entire collection at once, so an arrow button has been added between the gun preview and the left-hand side list. This button allows users to toggle between the new, streamlined design and a visual display of their entire collection, which can be useful for viewing or sharing with friends. This update eliminates the need for the previous, cluttered design and streamlines the overall user experience.
Social Browser
Social browser: The original social browser will take the place of the social button, as the original social browser was previously well-liked, so this change was made in response to user suggestions and preferences. By simply hovering over the user icons in the social browser, users can see the current activities of their friends. Users have demonstrated a preference for this straightforward and understandable design, making it a useful improvement to the main menu experience.
Career Screen
Career screen: In order to optimize the layout and functionality of the career screen, the position of the match history and statistics were adjusted. The match history was moved to the right side of the screen, and the statistics and rank were placed on the left side. This rearrangement allowed for the effective utilization of previously empty space and also enabled the rank information to be enlarged slightly for improved visibility. The rank icon was made the largest element on the screen, drawing the user's attention to the left side and helping to guide their understanding of the dense information being presented. These design changes aimed to improve the user experience and enhance the overall effectiveness of the career page.
Agents Screen
Agent screen: To optimize the layout and functionality of the agents screen, the agent category information on the right side of the screen was removed in order to eliminate redundancy and improve the overall user experience. The size of the [i] button beside the agent category was slightly increased, and users can now hover over each button to view a description of the selected category. Additionally, the sentinels category was added to the screen, as it had been mistakenly left out in the low-fidelity prototype. These updates aim to provide users with a clear and intuitive interface for accessing relevant information.
Mode Selection
Game mode selection: The descriptions and estimated play times for each game mode have been added to improve the user experience when choosing a mode. This enables users to quickly and simply understand the nature and duration of each mode, especially those who may be new to the platform or looking to play for a specific amount of time. This change seeks to increase user satisfaction and engagement by giving users the knowledge they need to choose which game modes to take part in.
Features Added
Showcasing the polished features I've added
Below I have included a preview for each feature I've added to improve the main menu experience according to user needs and feedback:
1. Patch notes popup:
A pop up tab has been added to the bottom left of the opening screen, which allows users to access detailed information about the current patch update whenever they desire. By clicking on the tab, users can expand the information, resulting in a more organized and efficient experience. This addresses a common problem of the cluttered main menu screen, resulting in a more user-centered design and visually appealing opening screen.
2. Notification system:
To inform users of significant updates and events, like the release of new patches, skins, and store items, a notification system was put in place. This feature enables the developers to effectively communicate with the users and make sure they are aware of the most recent developments in a non intrusive way. This feature also promotes new events like the night market, giving users a sense of exclusivity and enticing them to participate, which increases engagement.
3. Hover over button:
In the agents screen, an intuitive hover-over feature was implemented for the [i] button. This feature displays an overlay containing the name and definition of the selected agent category, providing users with immediate access to relevant information without having to navigate away from the current screen. This improves the user experience by maintaining continuity of the user's cursor and line of sight within the selection area, allowing them to efficiently access and understand the meaning of different categories. Additionally, this feature also enhances the overall usability by eliminating the need for redundant placement of agent category information on the right side of the screen under each agent's information.
4. Act performance statistics:
In order to provide users with easy access to their performance statistics, a dynamic display was implemented on the bottom left corner of the career page. This feature updates with each competitive game played and resets every act, allowing users to track their progress over time and identify areas for improvement. By providing users with real-time access to their statistics, this feature empowers them to make informed decisions about their gameplay and enhance their overall performance. Additionally, this feature also promotes engagement by encouraging users to strive to improve their statistics and reach new milestones.
5. Double click to equip:
As previously mentioned, an additional functionality was added to the collection page's UI to improve the ease and convenience of skin and gun buddy selection. Users can now choose to either press the equip button or double-click to equip a skin, providing them with more flexibility and control over their in-game experience. This feature streamlines the skin selection process, allowing users to quickly and easily make their selections, which enhances the overall usability and user-centered design approach.
Console Optimization
Showcasing a possible way to use a controller to navigate the new menu
As mentioned earlier, the goal of this redesign is to make it compatible with a range of platforms, including console and mobile. This is taken into consideration when designing the layout and input method. The general breakdown for each distinctive screen is depicted in the following few diagrams:
For example, on a console, the main horizontal menu at the top of the screen can be navigated using the L2/R2 buttons, while horizontal sub-menus within the screen will utilize the L1/R1 buttons as shown in the battle pass and career screens. Navigating within the screen itself will be accomplished using the D-Pad. The same input system will apply to the play screen, agents selection, collection, and battle pass screen respectively.
The options menu can be accessed using the start button, and the social browser can be accessed using the select button and navigated using the D-Pad. The circle button will serve as a "back" or "undo" button for navigation history. The top right corner menu can be accessed using the triangle button and navigated using the D-Pad.
The distribution of vertical and horizontal menus allows for flexibility and the potential for further optimization and implementation on a variety of platforms
Animations
Animated the agent screen using After Effects
The animation style in the redesigned menu will be largely similar to the current animation style, although I have provided an example of ways to animate new elements such as those found in the new agents page.
Accessibility
Accessibility considerations:
Color contrast and hierarchy.
To improve accessibility and adhere to WCAG guidelines, certain buttons in the prototype were redesigned. The new green buttons feature a shadow, a darker green background, and a bolder font, enhancing the visual appeal and user-friendliness of the design as shown in the following slideshow:
Store Page - Purchase Bundle button
.png)
In addition to these changes, visual hierarchy has been carefully considered in the redesign to facilitate an easier visual experience for users. By guiding the user's eyes through elements of the screen, more complex and cluttered screens are made easier to navigate and understand. These updates aim to create a more intuitive and user-friendly interface.
Going Forward
-
Community Feedback
-
Takeaways
-
Next steps
Despite how long and taxing this project has been, it has been my favorite to work on as it's on something I personally enjoy. This final section will discuss any takeaways and it will setup the project for any future steps to be taken if I decide to pick it up again.
Community Feedback
Overwhelmingly positive feedback from the VALORANT community
My posts showcasing the re-design on Reddit and Twitter have collectively garnered over 75,000 impressions with an overwhelmingly positive 96% upvote rate on Reddit. The community expressed its approval and overall enthusiasm for the re-design. This demonstrates that my usability studies and approach to the re-design were effective in enhancing the user experience and overall satisfaction with the main menu.
Reddit Insights
Twitter Insights
Takeaways
I enjoyed this project and hope to come back to it someday!
Impact:
The redesign of the Valorant main menu was a success, as evidenced by the positive feedback received from interviewed users as many were pleased with the final result. The updated design was preferred over the old one and was praised for its ability to enhance the user experience by making it more enjoyable and engaging. These findings align with the initial assumptions made about the current Valorant main menu and demonstrate the effectiveness of the redesign efforts.
What I learned:
This project has been an invaluable opportunity to expand my understanding of UX/UI design within the context of video games. It has been my most extensive UX/UI project to date and I am grateful for the opportunity to work on a subject that I am passionate about.
​
During the course of the project, I learned that the UX/UI design approach for video games is unique in comparison to other mediums. One significant aspect is that the target audience is already determined by the gameplay of the game, which makes it much easier to identify and conduct user research and interviews with the right user group. This realization highlights the importance of understanding the user pool and tailoring the design to their specific needs and preferences.
Next Steps
Added a list of potential aspects I can focus on whenever I decide to pick up the project again
The design has room for further improvement, as the menu should be adapted to multiple screen sizes with smaller screens using bigger text and icons for better visibility, and a slightly modified version for console platforms as previously mentioned in the study as the next step in this redesign. Additionally, there's a chance that additional enhancements will be made, such as a better social browser (or even page), a store that's easier to use, a redesigned battle pass page, and animations that have more impact.
​
The user experience could be improved even more with these changes, building on the success of the initial redesign. The redesign has successfully enhanced user experience overall and improved the mood before games.
Next steps including, but not limited to:​
-
Improving the social browser
-
Redesigning the battle pass page and the store
-
Enhancing the challenges UI
-
Greater focus on animations and sound
-
The ability to view the main menu in-game
-
Adapting for multiple screen aspect ratios and sizes
-
Continuing to adapt for a console port