Valorant Gifting System
| Role
UX/UI Designer
| Skills
Research
Usability Testing
Prototyping
| Timeline
November - December 2024
| Tools
Figma
Adobe Illustrator
Overview
Valorant is a free-to-play tactical first-person shooter (FPS) developed and published by Riot Games in 2020. Since its launch, the game has introduced over 900 unique skins—cosmetics that alter the appearance of weapons—available for purchase with Valorant Points. While many players have successfully acquired these skins for themselves, there has been considerable interest and inquiries regarding the potential implementation of a gifting system.
Problem
Valorant players want to purchase in-game content for others to support the game, reward their teammates, and foster a sense of community and camaraderie among friends. Despite numerous requests for this feature, no system has been put into place leaving many in the community feeling disappointed.
Solution
-
Develop a gifting system on Valorant that allows players to purchase and send in-game content to others.
-
Create intuitive user interfaces that facilitate the gifting process, making it easy for users to select and send gifts.
-
Ensure the gifting feature seamlessly integrates with current in-game systems, such as Valorant Points and skins.
My Role
-
UI/UX and Visual Designer
-
Created user personas, interactive prototypes, image manipulation, and user research
Research & Analysis
During this process, I conducted competitive research and interviews to fully understand the problem, goals, and the target audience. This will be essential in crafting a user persona that encapsulates the needs, behaviors, and pain points of the users.
Competitive Analysis
Many games, such as Fortnite and League of Legends, have developed a successful gifting feature that have been praised for their seamless integration, intuitive user interfaces, and variety in gifting options. It was important to analyze the strengths and weaknesses as well as how Valorant can leverage similar strategies.
.png)
User Interviews
I conducted interviews with five individuals who have gaming experience. The goal was to explore their habits, preferences, and personal experiences with gifting systems across various platforms. During these conversations, I delved into what aspects of gifting systems they found enjoyable, the challenges they encountered, and the features they considered particularly useful or missing.
Focus Questions
-
Have you ever used a gifting system in a game before? What was the experience like?
-
What motivates you to gift in-game content to others?
-
Can you describe a memorable experience with a gifting system in a game?
-
What types of in-game content would you be most interested in gifting on Valorant?
-
What would make a Valorant gifting system stand out compared to others you've experienced?
.png)
According to the interview responses and competitive analysis, it was clear there were some concerns as well as areas of opportunity for this implementation.
With information and feedback gathered, I was able to narrow down 5 key observations to consider:
-
Most participants do not gift regularly, and when they do, it’s usually to celebrate something or a special occasion.
-
All participants have expressed interest in the addition of a feature to Valorant but have also shown hesitation regarding its feasibility.
-
Many expressed concerns with safety and security, offering safeguard suggestions such as having to be friended for up to a certain time or being able to get refunded.
-
Popular features to be considered are an abundance of gift options, an animated gift message, a mystery item choice, and personalized messaging.
-
Participants feel a sense of comradery when gifted an item from a friend.
User Persona: The Generous Teammate
.png)
Prioritization
As part of the re-design process, I had to refine my project goals, pinpoint what features to prioritize and my problem statement.
Project Goals
In order to make the right decisions, I took a step back to think about overall business goals and how it could align with the users. This was an important step in order to understand the broader context and ensure that the feature would not only meet user needs but also contribute to the long-term success of the business.
Card sorting made me realize I should focus on narrowing down key features of the app. In minimizing the amount of content, I was able to streamline the layout and enhance accessibility.
POV Statement
I'd like to explore ways to help players seamlessly purchase and send gifts through the existing Valorant store, enhancing the social experience and celebrate special moments.
HOW MIGHT WE integrate a gifting option within the current Valorant store that allows players to select and purchase items as gifts for friends, ensuring the process is secure, user-friendly, and aligned with existing store functionality?
Feature Set
Putting myself in the position of working in a team, I had to consider: What are the most important things we should do first, and why?
Friend Selection and Verification
A system for selecting the recipient from a friends list or community
Trust Measures
Players need to be at a certain level and be friends for a specified duration
Gift Selection Interface
A clear and intuitive interface for players to choose the item(s) they want to gift
Personalized Message Option
The ability to add a custom message or note for a more personalized experience
Community Safety Features
Measures to prevent abuse or spamming
Gift Confirmation and Notifications
A notification system that confirms when a gift has been successfully purchased and sent
.png)
User Flow
Designing the Gifting Feature
Now that I know what elements to focus on, I made the wireframes to resemble closely to Valorant's usual layout and design in order to align with user expectations.
Low Fidelity Wireframe
I created the layout of the 'User Profile', 'Add a Collection', and 'Discover' page on Figma. I wanted to be simple and intuitive, while also ensuring the interface felt engaging and visually appealing.
Low-Fidelity User Testing
Upon testing the low-fidelity prototype through paper prototyping, I realized there were assumptions I made that did not meet user expectations. There were 2 iterations made in order to mitigate concerns regarding the low-fidelity design:
Gift Icon
Users felt that there should be a specific indicator for the gifting section in order to have it stand out amongst the various tabs on Valorant's homepage.
Unlikely Option
It is not possible for Valorant to allow the gifting of skins from the owner's collection since the rarity of getting skins is part of the appeal to users looking to purchase skins and checking their Shop regularly.
Iteration
To make the Gifting section more visually distinct and immediately recognizable, consider adding a gift box icon next to its label or within its design.
Iteration
Consider replacing ‘Your Collection’ with another category such as ‘Gun Types’ or ‘Skin Edition’
High-Fidelity Prototype
Typography and color schemes from Valorant's official design library were incorporated to create a cohesive and visually polished high-fidelity wireframe.
Additionally, feedback and insights gathered during low-fidelity testing were carefully analyzed and integrated into this prototype to address user concerns and improve the overall functionality and user experience.
High-Fidelity User Testing
After conducting tests with nine Valorant players, additional challenges emerged as users interacted with the more refined prototype.
Although the completion rate reached an impressive 100%, user satisfaction did not meet expectations. I was able to narrow down 3 iterations that needed to be implemented in order to enhance the overall user experience.
Gift Menu Redesign
The gift menu’s layout is exactly similar to their ‘Shop’ screen which received mix feelings during user testing. Many believed Valorant would not do the exact same screen for each section.
Iteration
In order to address these concerns, implementing subtle design variations could help distinguish the Gift menu from the Shop screen while maintaining consistency with Valorant’s overall UI.
Screen Order
Users noted that players often initiate gifting from a friend’s profile, but the current prototype requires them to select the recipient twice when doing so, leading to unnecessary inconvenience.
Iteration
To improve intuitiveness, the Friend Selection screen appears first after selecting ‘Gifting,’ aligning with common game layouts and removing the need to re-select recipients.
Another Unlikely Option
A notable observation from feedback revealed that most players do not purchase skins based on the Skin Tier Edition. Many users mentioned prioritizing other factors such as design or rarity instead.
Iteration
Replace the option to gift Skin Editions with Gun Rotations. By offering gun skin choices tied to rotating selections, players would have access to more varied and appealing options
Final Design of Valorant's Gifting System
Key Project Takeaways
Here are some things that I have achieved and learned from this project:
.png)
-
The importance of not making assumptions about the user. It became clear that users' needs, behaviors, and preferences can often differ significantly from initial expectations. This project emphasized the value of conducting thorough user testing and gathering direct feedback to inform design decisions.
.png)
-
Designing within the framework of an established brand has helped me grow as a designer by enhancing my ability to work within defined brand guidelines and design systems. This experience has strengthened my capacity to innovate within constraints and deliver impactful, cohesive design solutions.
-
Asking the right questions at every stage is essential. Whether in interviews, meetings, or testing, the quality of questions directly impacted the insights gathered. There were moments when I wished I had asked certain questions earlier, highlighting the importance of proactively collecting the right information early on in the process.