Game design
Valorant
Game design
Valorant
Game design
Valorant
Reimagined how Valorant, a PC first person shooter game would look like on mobile
Reimagined how Valorant, a PC first person shooter game would look like on mobile
Reimagined how Valorant, a PC first person shooter game would look like on mobile
June 2024
Intro
Valorant, created by Riot Games, is a 5-person shooter game. Each player chooses an agent with unique abilities, combining shooting skills with strategy to win rounds. The game is set in a near-future world and focuses on teamwork, precision, and smart use of abilities, making it a favorite in the gaming community.
Valorant, created by Riot Games, is a 5-person shooter game. Each player chooses an agent with unique abilities, combining shooting skills with strategy to win rounds. The game is set in a near-future world and focuses on teamwork, precision, and smart use of abilities, making it a favorite in the gaming community.



Why
Valorant is currently available on Windows PCs. There is no official release for consoles or mobile devices yet. So, I decided to create pre-game screens for a potential mobile version. And also took up this task to work on improving my interaction design skills.
Valorant is currently available on Windows PCs. There is no official release for consoles or mobile devices yet. So, I decided to create pre-game screens for a potential mobile version. And also took up this task to work on improving my interaction design skills.
Button component
This is the button component I implemented. In the pressed state, I added charming interactive elements to enhance user delight and engagement. These elements are unique to each agent.
This is the button component I implemented. In the pressed state, I added charming interactive elements to enhance user delight and engagement. These elements are unique to each agent.






Card component
This is the player card component. On tap and hold it moves to expanded state. The expanded state reveals detailed information about the agent selected by the player, providing a comprehensive overview for strategic planning and team coordination.
This is the player card component. On tap and hold it moves to expanded state. The expanded state reveals detailed information about the agent selected by the player, providing a comprehensive overview for strategic planning and team coordination.



Prototyping
I used Figma's variables and advanced prototyping features to add interactions and improve the overall user experience.
I used Figma's variables and advanced prototyping features to add interactions and improve the overall user experience.
