A UX/UI redesign of the spray inventory system in Valorant developed in Unity using UI Toolkit, focused on improving filtering and browsing. The goal was to help players quickly find sprays in a growing collection (800+ items) without unnecessary scrolling.
UI/UX Designer
UX / UI Systems
Solo Project
PC
4 Weeks
2025
The existing spray system only includes two filters (Favorites and Hide Unowned), which does not scale with the increasing number of sprays.
This project focuses on improving:
Visibility of spray types
Speed of browsing
Alignment with player expectations
Analyzed current spray inventory
Identified key UX issues:
No filtering for usage timing (mid-round vs pre/post)
No filtering for animated vs static
Increasing clutter with large collections
Framed the problem using:
Norman principles (visibility, mapping, simplicity)
User-Centered Design (context of use, user needs)
Designed new filter system:
Usage: Mid-Round / Pre-Post
Type: Animated / Static
Owned / Favorites (kept existing)
Created Figma prototype:
Open Collections → Spray Wheel → Filters → Apply filters
Focus: keep UI simple but more useful
Link to Redesigned Feature Figma Prototype
Built functional prototype in Unity (UI Toolkit)
Key systems:
Spray data model (ScriptableObject)
Grid-based inventory UI
Toggle-based filtering system
Real-time update of spray grid
Filtering logic:
Each spray must pass all active filters
Supports combined filters (e.g., Animated + Mid-Round)
User Test Setup
Tested with an experienced Valorant player
Think-aloud method
Observed interaction and confusion points
Key Findings
Filters were immediately understandable
Animated/static filter improved speed
Overall system felt more intuitive
Read my reflection on this project
A UX/UI redesign of the spray inventory system in Valorant developed in Unity using UI Toolkit, focused on improving filtering and browsing. The goal was to help players quickly find sprays in a growing collection (800+ items) without unnecessary scrolling.
UI/UX Designer
UX / UI Systems
Solo Project
PC
4 Weeks
2025
The existing spray system only includes two filters (Favorites and Hide Unowned), which does not scale with the increasing number of sprays.
This project focuses on improving:
Visibility of spray types
Speed of browsing
Alignment with player expectations
Analyzed current spray inventory
Identified key UX issues:
No filtering for usage timing (mid-round vs pre/post)
No filtering for animated vs static
Increasing clutter with large collections
Framed the problem using:
Norman principles (visibility, mapping, simplicity)
User-Centered Design (context of use, user needs)
Designed new filter system:
Usage: Mid-Round / Pre-Post
Type: Animated / Static
Owned / Favorites (kept existing)
Created Figma prototype:
Open Collections → Spray Wheel → Filters → Apply filters
Focus: keep UI simple but more useful
Link to Redesigned Feature Figma Prototype
Built functional prototype in Unity (UI Toolkit)
Key systems:
Spray data model (ScriptableObject)
Grid-based inventory UI
Toggle-based filtering system
Real-time update of spray grid
Filtering logic:
Each spray must pass all active filters
Supports combined filters (e.g., Animated + Mid-Round)
User Test Setup
Tested with an experienced Valorant player
Think-aloud method
Observed interaction and confusion points
Key Findings
Filters were immediately understandable
Animated/static filter improved speed
Overall system felt more intuitive
Read my reflection on this project
A UX/UI redesign of the spray inventory system in Valorant developed in Unity using UI Toolkit, focused on improving filtering and browsing. The goal was to help players quickly find sprays in a growing collection (800+ items) without unnecessary scrolling.
UI/UX Designer
UX / UI Systems
Solo Project
PC
4 Weeks
2025
The existing spray system only includes two filters (Favorites and Hide Unowned), which does not scale with the increasing number of sprays.
This project focuses on improving:
Visibility of spray types
Speed of browsing
Alignment with player expectations
Analyzed current spray inventory
Identified key UX issues:
No filtering for usage timing (mid-round vs pre/post)
No filtering for animated vs static
Increasing clutter with large collections
Framed the problem using:
Norman principles (visibility, mapping, simplicity)
User-Centered Design (context of use, user needs)
Designed new filter system:
Usage: Mid-Round / Pre-Post
Type: Animated / Static
Owned / Favorites (kept existing)
Created Figma prototype:
Open Collections → Spray Wheel → Filters → Apply filters
Focus: keep UI simple but more useful
Link to Redesigned Feature Figma Prototype
Built functional prototype in Unity (UI Toolkit)
Key systems:
Spray data model (ScriptableObject)
Grid-based inventory UI
Toggle-based filtering system
Real-time update of spray grid
Filtering logic:
Each spray must pass all active filters
Supports combined filters (e.g., Animated + Mid-Round)
User Test Setup
Tested with an experienced Valorant player
Think-aloud method
Observed interaction and confusion points
Key Findings
Filters were immediately understandable
Animated/static filter improved speed
Overall system felt more intuitive
Read my reflection on this project