UI/UX Case Study
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.
UI/UX. Prototyping, Visuals, Iconography
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?
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?
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.
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.
Knowing the constraints helped me better focus my design decisions.
Similar to Valorant's current design System
Integrate sections from Valorant desktop to Mobile Application
Keep designs familiar to existing Valorant components
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.
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.
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.
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.