Valorant UI Concept

HI, LEGAL

This VALORANT UI Concept project has no association with Riot Games. This is a fan concept that includes some assets owned by Riot Games. Riot Games does not endorse or sponsor this project.

CHAPTER_00 // BRIEF

INTRODUCTION

As a player since the release of Beta, I have held Valorant near and dear to my heart. Experiencing the game through the dual lens of a competitive player and a designer has compelled me to fall in love with the game’s vibrant, near-future aesthetic.

This project showcases two original concepts and custom assets that suit them, all adhering to the style of Valorant. The goal? Create intuitive design solutions that feel like a natural extension of Valorant’s UI.

INDENTIFYING IMPROVEMENT POTENTIAL

As I took a deeper dive into the game’s interface experience, I was able to depict areas that had potential for design improvement.

Information Accessibility

There should be no inconsistencies to accessible content/information within the game’s interface, minimizing the reliance on external platforms for essential game knowledge.

Social Connectivity

Expanding social functionality beyond direct invites and whispers fosters a more active community, increasing player retention and engagement.

Player Expression

Players should be given more creative avenues for customization to express their identity beyond player cards and skins.

Mobile App Utilization

How can the Riot Mobile app be utilized to improve the player’s experience on Valorant beyond 2FA?

CHAPTER_01 // MAP OVERVIEW

CONCEPT: MAP OVERVIEW

A TACTICAL OVERVIEW

Currently, Valorant provides an “Agents” tab giving information about their background, role, and abilities. This feature is useful for players to learn about the next agent they want to learn or unlock, but an important variable feels overlooked: Where am I using this agent? Introducing the “Maps” portal, placed between the “Agents” tab and the big red “Play” button.

Improved Clarity | Maps Selection

Many players are unfamiliar with which maps are in rotation after a map pool change. In just one click to the Maps tab, players can immediately see which maps are in rotation as well as view all the maps in the game.

Visualizing Areas | Preview Points

The addition of preview points, which are accessed via “camera nodes” around the map, allows players to get an idea of what an area of a map looks like.

Toggleable Layers

Customizable layer toggles give players the flexibility to reduce visual load on the map to ensure information is helpful rather than overwhelming.

Direct Map Access

Giving players the option to immediately explore the map themselves in-game eliminates the cumbersome process of setting up a custom game manually.

THE DESIGN CHALLENGE

The ultimate objective was to create something new and intuitive while adhering to the design principles of Valorant. In the early stages, emphasis on function over form was the most important. Once the layout of features were finalized, the integration of the style guide followed.

Display of Map Overview with all layers visible

Display of "Explore Map" button modal

background glitch decoration vectors created for the map concept

"Glitches" and vector ornamentation adding visual depth to the interface

CHAPTER_02 // CALENDAR

CONCEPT: CALENDAR

EMBRACING SOCIAL CONNECTIVITY

Valorant’s in-game social aspect is currently limited to whispers and joining parties. This calendar concept explores broadening the connection between localized play, scheduled outreach, and official events. By allowing players to organize and schedule all things Valorant within the interface, player engagement and utility are directly improved.

Customizable Event Scheduling

Players can create events on any day, set times, icons, descriptions, and invite anyone on their friends list to the event, encouraging social engagement.

Straightforward Invites

The left-side bar displays all incoming invites from other players which can easily be accepted or declined in one click.

Integration of Official Events

The calendar displays upcoming events for VCT, Premier, and update patches establishing clarity and player awareness.

Riot Mobile Utilization

Scheduled reminders across devices, via push notifications, expand on the utility of the Riot mobile app and engage players beyond the in-game interface.

Display of calendar concept showing creating a new event

Display of creating a new event on a selected date

Display of calendar concept showing incoming invites module

Display of incoming calendar invite modules

Calendar notification settings modal

Display of invite friends to event on calendar modal

Invite friends to event modal

Vector ornamentation outlining main calendar element

ENHANCING VISUALS

Since both projects required a specific set of icons that didn’t currently exist within the game assets, I created custom iconography to support the project’s features while maintaining visual consistency. Each icon was built on an imposed grid that guided the geometries to match Valorant’s weighted and minimalistic style.

Design process for "Practice" icon

Design process for "Maps" icon

Design process for "Tournament" icon

CHAPTER_04 // EPILOGUE

TAKEAWAYS

A FULFILLING CHALLENGE

This project was a great opportunity to immerse myself into the design language of Valorant and create two functional concepts aimed to improve the player experience. One of the biggest challenges was reverse-engineering the vision and direction Riot Games had for Valorant; however, since my concepts were supported by real player patterns, I was able to confidently make stronger design decisions.

While this began as a passion project, I was able to take away a stronger set of visual and practical design skills, making it a significant milestone in my development. As I continue to follow the game, I harbor an even greater appreciation for its design experience and look forward to the next chapter of Valorant’s journey.