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?
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.
FINAL SCREENS
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.
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.
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.
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.