Valorant: Mobile

Time: October 2023 - Present

Info: Passion project!

‍

How might we transform a mechanics-intensive PC shooter into a mobile-friendly experience?

Intro

VALORANT is an impressive 5v5 character-centric tactical shooter, skillfully crafted by Riot Games. Since I absolutely love the game and its community (go 100Thieves!), I wanted to conceptualize a mobile adaptation of the game. That way, players could carry their favorite game right in their pocket. 

Guided by these considerations, my exploration began with three fundamental questions:

1. What are the essential facets of the gameplay that must be preserved in the mobile adaptation?

‍

2. How have other mobile game adaptations successfully accommodated players' needs and expectations?

‍

3. What innovative design approaches can be employed to seamlessly reimagine VALORANT's intricate mechanics for the mobile platform?

‍

>>With these inquiries driving my design endeavor, I embarked on a mission to reimagine Valorant's intricate mechanics for the mobile platform.

Research

Information Architecture

Out of all of Valorant’s features, I wanted to focus specifically on the in-game interface. My previous experience working with Try Again sparked my interest in starting in-game first.

>>By methodically organizing my priorities, I aimed to ensure that the essential elements of Valorant are thoughtfully integrated into the mobile adaptation while maintaining the flexibility to address secondary features in due course.

‍

Keyboard Inputs

‍

In the realm of Valorant, swift reflexes and ingrained motor responses reap their rewards.

The intricate gameplay involves a complex array of around 24 interactive keys at the user's disposal. The majority of these commands pertain to movement functions like crouching, leaping, and sprinting. This distribution tilts heavily towards the keyboard's left side, as players primarily wield their mice with their dominant right hand.

The role of mouse inputs within first-person shooters (FPSes) is of paramount significance. Precision in aiming is the cornerstone, complemented by the aptitude to seamlessly toggle aiming down sights. The ability to swiftly pivot and survey the surroundings assumes equal importance to promptly respond to adversaries.

‍

HUD (Heads-Up Display) Breakdown

Beyond the conventional, "special interactions" such as the spike planting process and engaging with environmental elements on the map constitute vital components of objective-centric gameplay.

‍

Potential Mobile Inputs

I began by evaluating my personal range and grasp, subsequently observing the actions of ten additional players. A thumb interaction heatmap could be developed from all data:

‍

Notable Insights

Players don't use their index fingers extensively. This behavior obstructs a considerable portion of the screen's valuable real estate, demanding a shift in grip that, in turn, compromises the phone's stability in hand.

‍

It’s apparent that pivotal interactive elements, like shooting and movement controls, should ideally align with the "natural" arc that thumbs trace during a horizontal grip.

‍

Thumbs are better at flexing inward rather than outward. Consequently, strategically situating frequently utilized buttons in closer proximity to the bottom corners and edges of the screen, as opposed to the top, could considerably enhance ergonomic usability.

‍

Player Interviews

My next objective was to delve into the intricate tapestry of player play styles and experiences. I interviewed 10 other players.

‍

I classified the players I interviewed in Valorant according to the duration of their gameplay and their previous gaming background.

Market Analysis

During the interviews, numerous allusions to various other FPS mobile shooters emerged. I analyzed all with greater depth, comparing them to each other.

Prominent mobile FPS games prioritize situating system indicators and settings controls at the screen. Essential attack and movement commands find their place near the screen's lower corners.

>>In unraveling the distinct dimensions of VALORANT players and dissecting ingenious design strategies of analogous mobile shooters, I forged a comprehensive foundation for a user-centric mobile adaptation.

Ideation

I began with designating what controls are on which sides of the screen. In future iterations, placement should be made completely customizable (just like in the game, keyboard inputs can be changed). 

Upon rapidly creating a prototype for preliminary field testing, I aimed to gauge the prototype's feasibility. Although I acknowledged the natural arc thumb range as a strong starting point, uncertainties lingered around button sizing and visual element legibility. 

As previously mentioned, Valorant uses up to 24 controls on the keyboard. The decision to have all the features grayed out in the first prototype was driven by a deliberate intention to see where users assigned controls on the screen. I created two options, shown below, and took it to user testing.

Player Testing

With player testing, I found both Option 1 and Option 2 to address specific problems.

I thus proceeded with a mixture of both. From Option 1, I took the top portion information split. From Option 2, I took the more rounded out button layout in the lower right corner. The testing also led to some really interesting insights:

Notable Insights

Participants' thumbs naturally rested near the center of the screen when holding their devices horizontally. I realized the importance of designing button placement to align with this natural resting position; a curve is better than a straight diagonal.

‍

Fitts' Law played a pivotal role in user satisfaction. While participants acknowledged the benefit of larger and closer buttons for ease of interaction, they also appreciated a certain level of challenge that prevented accidental actions.

‍

Participants' diverse thumb sizes led to intriguing discussions about accessibility. Some players with larger thumbs found the prototype interactions comfortable, whereas those with smaller thumbs expressed minor difficulties in reaching certain buttons. This diversity highlighted the importance of an adaptable design that accommodates a wide range of users.

‍

‍>>These insights from player testing provided a comprehensive understanding of the intricacies of adapting gameplay to the mobile platform. The observations shed light on the nuanced relationship between user behavior, design choices, and the unique challenges that come with crafting an engaging and user-friendly mobile gaming experience.

Final Design (and continuing...)

This is still a work in progress, but I illustrated the ability icons and placed them into the layout. Currently, I'm working on implementing the rest of the HUD, as well as login screens for the app. Stay tuned for more! :)

Reflections

What I could’ve done better:

User experience should come first before aesthetics. In the beginning, I was caught up with Valorant's amazing design system when I should've focused on the bigger picture.

‍

But speaking of design systems, I'd like to do a full design system evaluation of the game and implement Valorant's pixel perfection into my work.

‍

Lessons Learned

Meticulously researching how people hold their phones seemed obvious at first, but my findings greatly informed me later in the design lifecycle.

‍

Hyperfocusing on just the in-game interface rather than the entire game allowed me to target more specific objectives and stay on track.

‍

Notable Highlights

Putting players first will almost always result in success :)

‍

I never thought I'd be able to translate such a huge game into a tangible mobile version. But dreaming big and being hungry with my analysis allowed me to fully understand the game and its players!

‍

Thanks for reading, and stay tuned for the final prototypes! 

‍