Val Case10_edited.png

Valorant

Mobile

UI/UX Case Study

 
Summary

Valorant is a 5v5 character-based tactical FPS where precise gunplay meets unique agent abilities developed and published by Riot Games. As a huge fan of Valorant myself, I wanted to experiment with what Valorant's interface on mobile would look like visually.

 

This is a personal project of my concept for Valorant mobile and what its user interface design would look like. Designs, the prototype, and ideas are created before the upcoming announcement of Valorant mobile coming later this year. I decided to design in Ipad format rather than a phone format to showcase my ideas on a bigger screen.

Role

UI/UX. Prototyping, Visuals, Iconography

Tools

Figma, Illustrator

Duration

May 2021

1 Month 

Team

Solo Designer

Idea

Valorant is a first-person shooter game for PC players with an estimation of 12 million monthly active players. Popular FPS games like Call of Duty: Mobile, Fortnite, PUBG Mobile, and more started off on PC platforms. Since FPS mobile games are popular, what would Valorant Mobile look like?

Valorant Mobile

Design Challenge

What will Valorant’s interface look like on a mobile platform? How can I retain Valorant’s current visual interface and expand on it to be more mobile-friendly?

Solution

Throughout my journey and countless experiments, I created a prototype of Valorant mobile using Figma. As I stayed true to Valorant’s current color pallet for the interface on PC, I used Valorant’s display font on mobile for titles and subtitles. This creates a hierarchy and more personality for the interface. I also challenged many current patterns that exist on the PC version to become more mobile-friendly. Sections that were challenged include the home screen, the shop, agents, and the collection. I kept into thoughtful consideration when it came to button sizes and the visual layout since users will be experiencing the application through a small device.

Val Case8.png
Final Prototype

During this personal project, I focused on important sections including the home screen, battle pass, store, collection, and agents. Pop-ups I prototyped on the home screen include a friends list, messages, and settings.

Home Overview.png
Home Screen

FINAL SCREENS

Home
Home

press to zoom
Battlepass
Battlepass

press to zoom
Collection l Sprays
Collection l Sprays

press to zoom
Home
Home

press to zoom
1/7

DESIGN PROCESS

Constraints

Knowing the constraints helped me better focus my design decisions.

Visual Design

Similar to Valorant's current design System

Experience Type

Mobile Experience

Integration

Integrate sections from Valorant desktop to Mobile Application

Feasibility

Keep designs familiar to existing Valorant components

Sketches

Before jumping into prototyping, I planned out several screens and layouts by sketching ideas on paper. After figuring out what belongs into every section, I began sketching icons and assets I needed to create for the prototype.

Sketches.png
Iconography

During the project, I realized that icons were essential when it comes to the mobile experience to save space. Below are the icons I created & designed using Illustrator and Figma.

Iconography.png
Visual Design

I wanted to stay true to Valorant's current color pallet for their desktop interface. As for the type, I went along with Helvetica for small text and Valorant's display font for the title and subtitles.

Visual Guidelines.png
Val3_edited.jpg
Reflection

As a huge Valorant player and fan, I absolutely loved working on this project. When I first started playing Valorant, I admired the clean and modern interface and was shocked by how different it looked compared to other FPS games. During this design journey, I definitely found myself learning and thinking a lot when it came to concepting ideas. This project was a lot harder than I thought it would be, but I liked the challenge!

 

One thing I learned throughout my experience designing this side project would be to stay considerate of how mobile users will be interacting with the buttons and interface. For example, during the beginning phases of user-testing, my friends gave me insight into how the buttons should be bigger since it may be hard pressing on small buttons with a phone.

 

Overall, I’m glad I got the chance to have fun with this personal project. Working on this side project made me realize how much I would love working on gaming products and how I should follow my passions career-wise.