✳ In this project I was tasked with
✳ In this project I was tasked with
✳ In this project I was tasked with
Exploring a redesign of Valorant Agent Unlock Interface to enhance clarity, add personality and better communicate its purpose to players.
Exploring a redesign of Valorant Agent Unlock Interface to enhance clarity, add personality and better communicate its purpose to players.
Role
Role
Role
Role
Product Designer
Product Designer
Product Designer
Product Designer
Tools
Tools
Tools
Tools
Figma
Figma
Figma
Figma
Timeline
Timeline
Timeline
Timeline
4 weeks
4 weeks
4 weeks
4 weeks
Disciplines
Disciplines
Disciplines
Disciplines
UX Design
UX Design
UX Design
UX Design
•
•
•
UX Research
UX Research
UX Research
UX Research
•
•
•
Interaction Design
Interaction Design
Interaction Design
Interaction Design
Setting the stage
Setting the stage
Setting the stage
What is Valorant
What is Valorant
Valorant is a tactical first-person shooter where players control agents with unique abilities, engaging in strategic 5v5 matches.
Valorant is a tactical first-person shooter where players control agents with unique abilities, engaging in strategic 5v5 matches.
Valorant is a tactical first-person shooter where players control agents with unique abilities, engaging in strategic 5v5 matches.
The game emphasizes precise gunplay, team coordination and objective-based gameplay.
The game emphasizes precise gunplay, team coordination and objective-based gameplay.
The game emphasizes precise gunplay, team coordination and objective-based gameplay.
🎯 Project Goals
🎯 Project Goals
🎯 Project Goals
Enhanced Usability: Simplified navigation and clearer agent unlock flow.
Enhanced Usability: Simplified navigation and clearer agent unlock flow.
Enhanced Usability: Simplified navigation and clearer agent unlock flow.
Improved Visual Hierarchy: Made info easier to scan and understand.
Improved Visual Hierarchy: Made info easier to scan and understand.
Improved Visual Hierarchy: Made info easier to scan and understand.
Consistent Visual Style: Matched Valorant’s existing UI style.
Consistent Visual Style: Matched Valorant’s existing UI style.
Consistent Visual Style: Matched Valorant’s existing UI style.
⚠️ Project Challenges
⚠️ Project Challenges
⚠️ Project Challenges
Consistency with Game Aesthetic: Enhanced the screen while staying true to Valorant’s visual style.
Consistency with Game Aesthetic: Enhanced the screen while staying true to Valorant’s visual style.
Consistency with Game Aesthetic: Enhanced the screen while staying true to Valorant’s visual style.
Balancing Functionality & Visuals: Balanced clean visuals with a user-friendly, focused layout.
Balancing Functionality & Visuals: Balanced clean visuals with a user-friendly, focused layout.
Balancing Functionality & Visuals: Balanced clean visuals with a user-friendly, focused layout.
✨ The Problem Statement
✨ The Problem Statement
Players struggle with the new agent unlock menu in VALORANT due to its unclear purpose and lack of visual appeal, especially when compared to other menus in the game.
Players struggle with the new agent unlock menu in VALORANT due to its unclear purpose and lack of visual appeal, especially when compared to other menus in the game.
The design’s poor clarity, limited feedback, and disconnection from the game’s aesthetic hinder usability, making the agent unlock process frustrating and less engaging.
The design’s poor clarity, limited feedback, and disconnection from the game’s aesthetic hinder usability, making the agent unlock process frustrating and less engaging.
✨ The Problem Statement
Players struggle with the new agent unlock menu in VALORANT due to its unclear purpose and lack of visual appeal, especially when compared to other menus in the game.
The design’s poor clarity, limited feedback, and disconnection from the game’s aesthetic hinder usability, making the agent unlock process frustrating and less engaging.
Project Feedback
Project Feedback
Spoke to 5 players and scanned community feedback to uncover what wasn’t working in the menu. Here are some key takeaways:
Spoke to 5 players and scanned community feedback to uncover what wasn’t working in the menu. Here are some key takeaways:
Before diving into the redesign, I conducted guerrilla interviews with 5 players and reviewed community feedback to identify key issues with VALORANT’s agent store menu.
This research revealed several pain points, including design inconsistencies and minimal engagement. Here's a summary of the main concerns:
Design Consistency
Design Consistency
Design Consistency
Players felt the unlock menu lacked the polish and energy seen in other parts of the game.
Players felt the unlock menu lacked the polish and energy seen in other parts of the game.
Players felt the unlock menu lacked the polish and energy seen in other parts of the game.
Lack of Incentives
Lack of Incentives
Lack of Incentives
While rewards existed, they weren’t clearly highlighted or motivating enough to drive engagement.
While rewards existed, they weren’t clearly highlighted or motivating enough to drive engagement.
While rewards existed, they weren’t clearly highlighted or motivating enough to drive engagement.
Engagement & Interaction
Engagement & Interaction
Engagement & Interaction
tatic visuals and missing animations made the screen feel unexciting and forgettable.
tatic visuals and missing animations made the screen feel unexciting and forgettable.
tatic visuals and missing animations made the screen feel unexciting and forgettable.
Current Screen Analysis
Current Screen Analysis
Examining the existing in-game screen to identify key issues, areas for improvement and opportunities to enhance the user experience.
Examining the existing in-game screen to identify key issues, areas for improvement and opportunities to enhance the user experience.
Examining the existing in-game screen to identify key issues, areas for improvement and opportunities to enhance the user experience.
Layout & Spacing Issues
Layout & Spacing Issues
Layout & Spacing Issues
Empty space on the left and oversized cards below made the screen feel cluttered.
Empty space on the left and oversized cards below made the screen feel cluttered.
Missing Key Information
Missing Key Information
Missing Key Information
Players couldn’t see contract rewards up front, forcing frustrating backtracking.
Players couldn’t see contract rewards up front, forcing frustrating backtracking.
Agent Name
Agent Name
Agent Name
Too large and blends into the card, lacking clear emphasis.
Too large and blends into the card, lacking clear emphasis.
Unlock Currency
Unlock Currency
Unlock Currency
Important info is too small, making it easy to miss.
Important info is too small, making it easy to miss.
Lo-fi Wireframes
Lo-fi Wireframes
Mapping out the core layout and functionality before diving into visuals.
Mapping out the core layout and functionality before diving into visuals.
Mapping out the core layout and functionality before diving into visuals.
Agent Info Section (A)
Agent Info Section (A)
Agent Info Section (A)
Displays the agent’s name clearly to the player.
Displays the agent’s name clearly to the player.
Shows the VP required to unlock the agent.
Shows the VP required to unlock the agent.
Includes an EXP bar to indicate unlocking progress.
Includes an EXP bar to indicate unlocking progress.
Agent Cards (B)
Agent Cards (B)
Agent Cards (B)
Cards that players can click to select an agent.
Cards that players can click to select an agent.
Each card has two states: Normal and Hover.
Each card has two states: Normal and Hover.
Shows agent name, currencies and lock status.
Shows agent name, currencies and lock status.
Agent Rewards (C)
Agent Rewards (C)
Agent Rewards (C)
Shows rewards players can earn by unlocking the agent: Skins, Gun Buddy and Player Card
Shows rewards players can earn by unlocking the agent: Skins, Gun Buddy and Player Card
Character Portrait (D)
Character Portrait (D)
Character Portrait (D)
Displays the character portrait of the selected agent and also their character logo behind them.
Displays the character portrait of the selected agent and also their character logo behind them.
Final Mockups
Final Mockups
Here’s how everything came together — polished screens that bring the final design, layout and interactions to life.
Here’s how everything came together — polished screens that bring the final design, layout and interactions to life.
Here’s how everything came together — polished screens that bring the final design and interactions to life.
Agent Unlock Screen
Agent Unlock Screen
Agent Unlock Screen
Agent Cards & It's Different States
Agent Cards & It's Different States
Agent Cards & It's Different States
Unlocked State
Locked State
Agent Unlock Screen (In action)
Agent Unlock Screen (In action)
Agent Unlock Screen (In action)
Conclusion
Conclusion
Conclusion
I designed with the player in mind — focusing on clarity, ease of navigation, and a visual style that fits seamlessly with VALORANT’s aesthetic.
I designed with the player in mind — focusing on clarity, ease of navigation, and a visual style that fits seamlessly with VALORANT’s aesthetic.
All character artwork belongs to the talented team at Riot Games. I used some assets as a base to help illustrate my ideas and highlight design changes.
All character artwork belongs to the talented team at Riot Games. I used some assets as a base to help illustrate my ideas and highlight design changes.