Valorant | Chamira Perera

VALORANT STORE TRACKER

OVERVIEW

Valorant is an FPS game created by Riot Games. It offers cosmetic enhancements known as gun skins, which enhance the visual aspect of gameplay. These skins come in various styles and animations, allowing players to customize their in-game experience. Skins can be acquired through purchases made by players.

Skins in Valorant can be purchased from the in-game store. The store offers a main gun skin bundle available for approximately two weeks, as well as four random gun skins that refresh every 24 hours. To view the available skins, players must start the game on their computer whenever the store resets.

Valorants-sunny-new-map-Breeze-is-out-now.main.jpg

PROBLEM STATEMENT

Accessing the store is limited to launching the game on a PC, which inconveniences players without immediate access. This setup poses obstacles for checking the store and may lead to missed skin purchases. Is there a possibility of implementing a more accessible and reminder-based system for store updates?

IDEATION

I propose a Valorant store app that allows players to access the store on their phones, eliminating the need for a computer. The app could also incorporate other features currently exclusive to PC.

The features I implemented for the application are as followed:

Notifications for when your store has been refreshed

View entire gun skin collections

Purchase in game currency to buy skins

Battle pass page that shows players current tier

Purchase skins and upgrades through app

After identifying accessible sections, I created wireframes in Figma. I selected color palettes and fonts to enhance the app's design, maintaining consistency with the desktop version of the game for a familiar player experience.

#000000

#FF4654

#425D88

#75B5A7

#E1E5AB

#EDE7DD

RESEARCH

Interface research involved learning various Figma techniques. I explored Figma forums, reached out to tutorial channels on YouTube for specific interface interactions, and even received a dedicated tutorial video from one of them.

After completing the initial iteration of the app, user testing was conducted. I contacted six Valorant-playing friends and asked them to run through the mobile store app I designed. The process began with a pre-test interview, where I asked questions about their experience with Valorant, such as their frequency of checking the store, if they forget to check it, and if they desire an easier way to access it.

Participants were introduced to the app and given various tasks, such as navigating to specific skins, viewing featured items, purchasing Valorant points, and go to the 20th item in the battle pass. Following the tasks, a post-test interview was conducted to gather their feedback, including suggestions for improvement. The interview provided valuable insights for implementing new ideas and redesigning less user-friendly interface elements.

Notable Post Evaluation Interview Comments

DESIGN

STORE

Featured shop item

Select item in your shop

View skin variations & upgrades

View skin collection

COLLECTION

Featured shop item

View skin effects

Purchase skin variants

Zoomed in artwork view

BATTLE PASS

Scroll option 1

Purchase Battle Pass

Screen Recording 2023-06-13 at 1.09.46 PM.gif

Scroll option 3

Scroll option 4

Scroll option 2

SKIN COLLECTION

Equipt purchased skins

Toggle collection view

All skins available

Filter different

skin types

NOTIFICATIONS

Screen Recording 2023-06-13 at 1.40.20 PM.gif

Screen Recording 2023-06-13 at 12.01.26 PM.gif

Screen Shot 2023-06-13 at 1.45.18 PM.png

Receive Notifications for:

New skin releases

Store resets

New battle passes

New Night Market

PURCHASING VALORANT POINTS

Select point bundle to purchase

Confirm purchase to get Valorant points

RESULTS

The project resulted in a prototype showcasing a potential interface for the Valorant store. Post-test interviews inspired new ideas to enhance the app's engagement opportunities. Potential future features include player stats and match records, as well as an interface for the Night Market sales event, which offers discounted prices on six skins for a limited time.

Check out the interface by clicking the button below:

VIEW PROTOTYPE

LESSONS LEARNED

During the project, I significantly enhanced my Figma skills. I acquired knowledge on creating animations, such as in the battle pass interactions. Additionally, I discovered numerous valuable tools and resources through platforms like the r/Figma Reddit page. These resources facilitated my learning of user-friendly design and deepened my understanding of Figma.