Valorant UI Redesign

Overview

Valorant is a tactical first person shooter video game that has garnered a great following since its release. I collaborated with one of my peers on this redesign project because we both shared a passion for video games and design. I was responsible for conducting user research, competitive analysis, designing the UI, and testing the final designs.

Research

We decided to conduct interviews on our own respective friends, as we are both apart of different communities. After conducting interviews with my friends who were avid Valorant players, I had a meeting with my partner to compile our interview results.

Many of the users we interviewed had issues with the chat function, the in-game interface, cosmetics accessibility, and the ping system.

Although there was a multitude of complaints, we ultimately chose to tackle the difficulty of browsing through skins and accessories. Based on our combined interview responses, I concluded that there could be better visual clarity as well as accessibility in the collections aspect of the game.

Goal

Our project aims to improve the experience of customizing ones’ profile and cosmetics load out, and to promote a straightforward interaction with accessories and cosmetics. I believe that an intuitive and effortless user experience will encourage users to customize their profiles and load outs.

Design Iterations

I decided to look at other game UIs to build an understanding of how others approach cosmetic interfaces in their respective games. Conducting this competitive analysis allowed me to understand what is familiar to users and how competitors approach usability issues. However, I also had to take into account the general branding and style of Valorant in order to create a mockup that did not diverge too far from the original theme.

We ultimately chose to draw inspiration from League of Legends, another game by Riot. I believed that the choice for continuity would feel more straight-forward with users.

Ideation

With this design in mind, we drafted two mockups on Figma.

We were uncertain on how big to have certain icons for the gun skins. On the left, the whole skin would be visible, but on the right, it would adhere more similarly to the current theme and branding. We decided to conduct A/B testing to figure out which design to move forward with. We surveyed the same groups as we did in the beginning. Users felt that the square images have a similar look to the League of Legends screens, and therefore liked that familiarity. However, the gun skins were harder to distinguish between with such a small thumbnail. Additionally, our interview groups were also users who played League of Legends so we had to take that bias into account.

This information ultimately led us to proceed with the larger thumbnails, as users articulated that they would be able to identify which skin they were looking at quicker than if they were square.

We were uncertain on how big to have certain icons for the gun skins. On the top, the whole skin would be visible, but on the bottom, it would adhere more similarly to the current theme and branding. We decided to conduct A/B testing to figure out which design to move forward with. We surveyed the same groups as we did in the beginning. Users felt that the square images have a similar look to the League of Legends screens, and therefore liked that familiarity. However, the gun skins were harder to distinguish between with such a small thumbnail. Additionally, our interview groups were also users who played League of Legends so we had to take that bias into account.

This information ultimately led us to proceed with the larger thumbnails, as users articulated that they would be able to identify which skin they were looking at quicker than if they were square.

Final Prototype

To create the high fidelity mock-ups, we used Procreate and Figma. We also pulled assets from online resources and the game itself.

Takeaways + Next Steps

Overall, I received positive feedback from my peers but there can always be room for improvement. Some improvements that were suggested were:

Taking the friends list into account for spacing
Adding a dropdown/screen to create a skin/buddy combination for a specific agent

During the course of this project, Valorant addressed certain UI concerns with an update (5.08 Patch). The current patch has remedied certain issues, so our next possible step could be to tackle the other issues that were brought up during our interviews.