Problem
Inconsistent start-to-play page navigation and low discoverability for important actions.
Concept Project / UX/UI Case Study / 2022-2023
VALORANT MAIN MENU RE-DESIGN
A full information architecture and interface rethink focused on one question: how do we get players to their next action faster without losing VALORANT's identity?
Role: Solo UX/UI Designer
Methods: Interviews + Usability Testing
Output: Lo-Fi → Hi-Fi → Motion
Scope: Main Menu + Core Screens
Approach
Research-first redesign validated with lo-fi usability findings and then refined into a polished hi-fi system.
Signal
75k+ combined social impressions and 96% Reddit upvote rate on the final concept share.
Quick Navigation
Built for recruiter scan speed: jump directly to research, before/after outcomes, or final reflections.
Project Snapshot
Context
VALORANT is a competitive tactical shooter with a high-frequency main menu loop: queue, invite, check progress, browse loadouts, and repeat. This concept redesign focused on reducing friction inside that loop.
Role + Responsibilities
- Solo ownership: UX research, interaction design, visual direction, motion exploration
- Conducted interviews and usability studies
- Created personas, wireframes, lo-fi and hi-fi prototypes
- Produced motion previews and interaction examples
Timeline + Scope
- Timeline: November 2022 to February 2023
- Scope: Main menu and core pages (Store/Battlepass mostly preserved)
- Deliverables: competitive audit, user interviews, IA updates, prototypes, usability results, final mockups
Primary Objectives
- Improve navigation consistency between startup and in-client pages
- Increase discoverability of top-right utility actions
- Replace carousel-heavy browsing with clearer structures (especially Agents/Collection)
- Improve Career data hierarchy and scanability
Product Context in 2026
This redesign was produced in 2022-2023. VALORANT has evolved since then, but the core UX principles in this case study remain relevant: discoverability, consistency, speed-to-action, and clear hierarchy.
What changed in the live product
- Navigation consistency improved across Home and top-level pages
- Queue selection is now more explicit in the lobby flow
- Collections and Agents moved toward clearer browsing patterns
- Social systems improved in visibility and management
Why this case study still matters
- Shows a full UX process from framing → testing → iteration
- Demonstrates design decisions tied to user evidence
- Documents practical tradeoffs between visual style and usability
- Captures transferable thinking for live-service UI systems
Research Plan & User Findings
5
Interviews
18-24
Age Range
5/5
Reported navigation friction
1) Horizontal browsing lacked structure
Users struggled to relocate items in Agents and Collection. Continuous horizontal scanning slowed selection.
2) Accessibility pain points
Contrast, typography weight, and hierarchy produced readability issues in dense interfaces.
3) Redundant startup behavior
The switch from startup navigation to PLAY/top nav introduced unnecessary context shifting.
4) Key features were missed
Most participants did not discover challenges quickly because top-right actions looked passive.
Persona and Problem Framing
Problem statement
Omar needs a more seamless way to jump between queueing, tracking progression, and browsing content across sessions. The current flow introduces avoidable friction that costs time and focus.
Design implications
- Prioritize speed-to-action for repeated tasks
- Make progression and challenges obvious without hunting
- Reduce cognitive load in dense navigation moments
Design Process: Wireframes to Lo-Fi Prototype
I moved from paper concepts into digital wireframes, then into a lo-fi prototype in Figma to test architecture and flow before visual polish.
Usability Study on Lo-Fi Prototype
I tested the lo-fi build to catch friction early. The findings directly shaped the hi-fi iteration priorities.
Collection selection failed key tasks
Users could not reliably select specific skins or buddies with the initial category-first structure.
Social panel behavior felt hidden
4/5 users preferred persistent social visibility over click-to-open popouts.
Career hierarchy needed rebalancing
Rank and progression needed stronger visual prominence relative to dense stat blocks.
Agents screen had redundant information
Duplicate category info was ignored and one key category (Sentinels) was missing in an iteration.
Mode selection needed decision support
Players requested clearer details for unfamiliar modes before queueing.
Action taken from findings
- Reworked Collection to support specific item selection and buddy management
- Returned to persistent social visibility pattern
- Scaled and repositioned Career hierarchy elements
- Simplified Agents information architecture and fixed missing categories
- Expanded game mode context in PLAY flow
Before vs After: Core Iterations
Each redesign pair below maps directly to a usability finding. Drag the slider on each comparison to inspect before and after behavior.
Background and home readability
Navigation consistency (Startup → Main)
Agents browsing model
Collection browsing and skin selection
Career hierarchy and readability
Final Hi-Fi Screens
The final UI direction focused on consistency, visual hierarchy, and speed-to-action while preserving VALORANT's stylistic tone.
Motion & Interaction Proofs
I kept the animation language close to VALORANT's style while introducing interactions for newly redesigned surfaces.
Accessibility & Clarity Tweaks
To improve WCAG alignment and action clarity, I adjusted contrast, visual hierarchy, and button treatment on high-priority controls.
Community Response & Validation Signal
Public reception
- 75,000+ combined impressions across Twitter and Reddit
- 96% upvote rate on Reddit post
- High qualitative engagement around UI clarity and flow improvements
Interpretation
Community response is not a replacement for product analytics, but it provided strong directional validation that the usability-led changes resonated with players and designers.
Takeaways and Next Steps
What this project proved
- Usability-first iteration creates stronger visual outcomes, not just cleaner flows
- Major UX improvements can happen without abandoning the product's visual identity
- Structured browsing patterns outperform long carousels for high-frequency tasks
Future roadmap
- Deepen social browser redesign and test persistence variants
- Redesign Battlepass and Challenges with the same hierarchy system
- Add richer motion + sound pairing for state changes