GENERATIVE RESEARCH

Problem Space

⚡️The Challenge: How do we encourage players to continue to use and purchase different skins?

Coming into the competitive tactical FPS game space, VALORANT has two main competitors - CS:GO and to a lesser extent Rainbow Six Siege. What sets VALORANT apart from these games are the variety of abilities players have access to, as well as a more accessible and approachable aesthetic. This difference in aesthetic and setting allows Riot to create amazing gun skins with wildly different looks and effects. These skins are selling well too - a report in 2021 showed that VALORANT had finally eclipsed CS:GO in month-to-month revenue.

However, currently VALORANT only allows you to equip one skin to use in a game. This can be discouraging to VALORANT “dolphins” who only look to purchase one or two skins per gun. Unlike in CS:GO, where you can trade or resell skins, VALORANT skins are bound to an account. In order to promote continued skin sales, it is important to encourage users to buy more skins by making it easier for players to swap and even shuffle between their skins.

 GENERATIVE RESEARCH

Competitive Analysis

One similar feature that is brought up often in this discussion is CS:GO’s shuffle skin feature. CS:GO lets players add desired skins to a shuffle.

While this setup is easy to use, there are a few problems and incompatibilities with the VALORANTcollection architecture that make this solution not a 1:1 fix for VALORANT’s skin issue. Namely:

• VALORANT skins have many more variants - a single skin can have up to four color variants that may or may not be unlocked

• VALORANT buddies add another layer of complexity to this, are you shuffling through buddies or keeping them constant on the gun?

• While for CS:GO, it is easy to click between guns and turn shuffle on and off, clicking on a skin in VALORANT’s collection takes you to a gun-specific screen, which would make setting up shuffle this way more cumbersome

 DESIGN

User Flow

I began my design process by creating a simple box and wire flow to document player actions, needs, and feelings for the current state of VALORANT skin selection. I interviewed players as they moved through the process for changing a gun skin and had them speak their thoughts out loud. This allowed me to visualize where in the flow players’ actions might change.

I then created a box and wire flow for a future state of skin selection - one that incorporated the player wants that I identified through generative research.

This flow accounts for two additional player wants - quickly swapping between skin loadouts and a randomization element for their skins.

 DESIGN

Low Fidelity Wireframes

After mapping out the user flow, I began creating low fidelity structural wireframes to test out different ideas. I first tried a per-gun shuffle similar to CS:GO. However, the complexities I outlined in during the competitive analysis made the menu a little too crowded and complex. I then moved to a loadout style, which while limited the amount of skins you could shuffle through, provides an easier way to swap whole sets of guns at once. Loadouts also allow users to create whole sets of skins with the same theme. The unique agent and weapon design of VALORANT can be enhanced and emphasized using loadouts

“The celestial fan just doesn’t feel right on Omen, but it’s an amazing skin for Sage”

- IMaveriCK, VALORANT Player

DESIGN

Mid-Fidelity Designs

I then created rough mockups of what the actual UI would look like. While these designs are rough, they represent more accurately what they would look like in game.

I created tabbed navigation for the player to select different loadouts, as well as a random loadout option which shuffles they are using. Not only does this allow users to create themed loadouts for their favorite agents and equip them easily, it also gives users some shuffle functionality.

DESIGN

High-Fidelity Designs

I then recreated the screens using high fidelity assets, and refining the UI elements to match the in-game aesthetic and design language!

A Closer Look

The tabbed design places heavier emphasis on the selected loadout, while also including a visual indicator letting the player know which loadout they have currently equipped. In addition, if you are viewing an equipped layout, the “EQUIP” button is disabled, adding another element that denotes an equipped layout.

I moved away from the shuffle icon and toggle I had in the mid-fi designs, to better fit how VALORANT denotes these types of selections. VALORANT buttons often call out exactly what happens via text, which helps with user clarity.

Clickable Prototype

You can click around and explore the interactions in this prototype I made too! (I didn’t mock up Loadout 3 for this prototype)

User Testing and Next Steps

I had some of my friends who play VALORANT click through the prototype, and they provided some useful feedback. While the UI of the design was clean, there were some small usability issues that could be fixed up:

• The active tab might be too large, moving the other tabs when clicking on an existing one makes switching back and forth between tabs more difficult than it needs to be.

• It is not immediately apparent how players would change the name of the loadouts, as well as how to add or delete them.

• Some players just want the ability to shuffle through certain skins rather than set up whole loadouts

Moving forward, I want to redesign the size of the tabs, and think more about how this loadout feature could integrate into the rest of the playing experience (being able to swap loadouts during agent select is an area I want to explore). Using the Collections tab as a potential showcase of skin setups as well.

This was definitely a super fun exercise for me! I enjoyed taking a more analytical look at the game that I love so much, as well as recreating the assets in Figma. It definitely showed me some of the challenges that come with game design - namely accommodating all your playerbases’ wants is much harder than I thought. It’s really difficult to address the wide variety of use cases and user wants! I’m glad I was able to bring the experience that I have gained from almost 3 years of professional UX design to this project - it was cool to apply traditional UX methods and design theories to something as awesome as VALORANT.