Valorant Patch Notes
Patch Notes re-design
Valorant is a FPS game launched its newest agents: Harbor, Gekko, Deadlock, and Iso in the year of 2023. This project is a fan concept inspired by the cyberpunk aesthetic while trying to stay true to the Riot Games UI Design created for this game. While keeping the brand colours of the game, I wanted to make this design a bit more colourful to speak to each agent that the design covers. This redesign aspires to attract valorant players and enjoyers who are looking for a refreshing change in the interface design.
Product:
Product:
Product:
Gaming Interfaces
Gaming Interfaces
Gaming Interfaces
Year:
Year:
Year:
2024
2024
2024
Role:
Role:
Role:
UX Design, Research
UX Design, Research
UX Design, Research
Skills:
Skills:
Skills:
User Research, Interactive Prototyping, End-to-end design
User Research, Interactive Prototyping, End-to-end design
User Research, Interactive Prototyping, End-to-end design
Key screens
Challenge
How might we transform the way patch notes are communicated to Valorant players, ensuring accessibility and interest?
Take a look at my approach
↓
Research & defining target audience
When coming up with this project for myself, I wanted to design something for a game and immediately thought of Valorant. It is a game that I personally do not play but I enjoy watching various streamers play it and that is how I gained an interest in the game itself. Throughout seeing videos of the gameplay, I came to recognise that the interfaces are very consistent. This is something that I thought would be interesting to change, to make it more obvious to the players that these agent notes are important and somehow attract them to look at it. The game itself has some cyber aesthetics to it that are very subtle, and I wanted to highlight that by making them obvious and colourful. The design aims to attract both young adult men and women, though the design itself might speak more towards the large community of young men playing this FPS game. But with the rise of female players in shooter games, I ensured for a gender neutral design for both genders to enjoy.
Research & defining target audience
When coming up with this project for myself, I wanted to design something for a game and immediately thought of Valorant. It is a game that I personally do not play but I enjoy watching various streamers play it and that is how I gained an interest in the game itself. Throughout seeing videos of the gameplay, I came to recognise that the interfaces are very consistent. This is something that I thought would be interesting to change, to make it more obvious to the players that these agent notes are important and somehow attract them to look at it. The game itself has some cyber aesthetics to it that are very subtle, and I wanted to highlight that by making them obvious and colourful. The design aims to attract both young adult men and women, though the design itself might speak more towards the large community of young men playing this FPS game. But with the rise of female players in shooter games, I ensured for a gender neutral design for both genders to enjoy.
Ideation Process
My ideation process consisted of making a visual board of all the colours and aesthetics I wanted to focus on. By doing that, I could get a good sense of colours that would work together. I took all the agent images and picked out their signature colour palette that riot games has developed for them. Taking the colours on a blank page, allowed me to easily make a harmonious colour palette that would represent each agent. After I had decided on my colour palette I moved on to sketching the overall layout and flow of the design.
Ideation Process
My ideation process consisted of making a visual board of all the colours and aesthetics I wanted to focus on. By doing that, I could get a good sense of colours that would work together. I took all the agent images and picked out their signature colour palette that riot games has developed for them. Taking the colours on a blank page, allowed me to easily make a harmonious colour palette that would represent each agent. After I had decided on my colour palette I moved on to sketching the overall layout and flow of the design.
Low Fidelity Prototype
The design is focused on showing information since it is a sorts of an Agent overview and requires text boxes to display said information. To achieve this I brainstormed for an adequate layout that would allow for easy information display without overstimulating the user. So I initially planned on having the landing page be two Agents displayed at a time and when the user clicks on the arrow below it would animate to a new frame where the other Agents are shown. From the landing page, they would then be able to access the skill overview page. But after some consideration and ideating, I chose to stay true to Riot Games' current Agent selection screen and replicate that in my own concept. I chose to do that, because it would feel more natural and of habit to my target audience, which are players of the game.
When ideating for the skill overview page, I came up with three design choices and I ended up choosing the third option, because it made the screen feel less overcrowded than the two other options. So, I chose to leave the left side of the frame empty to display the Agent's photo and name.
Low Fidelity Prototype
The design is focused on showing information since it is a sorts of an Agent overview and requires text boxes to display said information. To achieve this I brainstormed for an adequate layout that would allow for easy information display without overstimulating the user. So I initially planned on having the landing page be two Agents displayed at a time and when the user clicks on the arrow below it would animate to a new frame where the other Agents are shown. From the landing page, they would then be able to access the skill overview page. But after some consideration and ideating, I chose to stay true to Riot Games' current Agent selection screen and replicate that in my own concept. I chose to do that, because it would feel more natural and of habit to my target audience, which are players of the game.
When ideating for the skill overview page, I came up with three design choices and I ended up choosing the third option, because it made the screen feel less overcrowded than the two other options. So, I chose to leave the left side of the frame empty to display the Agent's photo and name.
High Fidelity User Flow
After finishing my prototype I established a User flow based on how the navigation of the interface works and tested my work with 2 users before adding finishing touches. Both users were able to navigate the website easily and efficiently without needing any guidance.
Unique assets created
Elements such as skill icons, Agent images, and videos were taken directly from Valorant, but all other components were made by me. I stuck to colours that corresponded to each character and also keeping the brand colours of the game itself, which is Aquamarine and Folly. I used those colours in the starting page specifically, to connect my design with the game. I added hover effects to the wallpaper and video frames, as well as, the skill icons and buttons. The agent frames in the landing page also have a hover effect in which the frame will glow and have a slight difference effect when clicked on. The glowing effect works really well with the cyberpunk/core concept so I chose to implement it throughout my design. The fonts for the title, agent names and body of the text are all taken from Riot Games as well and the ones that are not, were chosen because I thought it would match well with my concept.
Unique assets created
Elements such as skill icons, Agent images, and videos were taken directly from Valorant, but all other components were made by me. I stuck to colours that corresponded to each character and also keeping the brand colours of the game itself, which is Aquamarine and Folly. I used those colours in the starting page specifically, to connect my design with the game. I added hover effects to the wallpaper and video frames, as well as, the skill icons and buttons. The agent frames in the landing page also have a hover effect in which the frame will glow and have a slight difference effect when clicked on. The glowing effect works really well with the cyberpunk/core concept so I chose to implement it throughout my design. The fonts for the title, agent names and body of the text are all taken from Riot Games as well and the ones that are not, were chosen because I thought it would match well with my concept.
Reflection
Doing this project in my free time from university studies was a challenge for myself but also a joy and a learning experience. With my passion and love for games, I really wanted to design something for a game that I enjoy watching. I don't play that many games myself except for casual mobile and farming games, but I like watching streamers play shooter and horror games. Watching others play these games that I am too scared to play myself is a way for me to appreciate and experience it in a different light. Additionally, as a former art student I really enjoy the art style that Riot has for their games including League of Legends. After watching their Netflix show "Arcane" I particularly grew interested in their games. As for the reason why I chose to design for Valorant, is because I do not know LoL that well and I have more interest in the aforementioned game . After seeing that they released four new characters in late 2023, I decided it would be fun to design an overview for them in which I would present the patch notes in a new concept.
I learned…
The main takeaway that I experienced during my design process is the struggle of coming up with various layout designs and meeting user expectations. I learned that it is important to consider user flow and ensuring that the user does not get overloaded with information, as the human brain can only focus on a few things at a time. It is important to make information easily visible and button actions expected, so that the user can be confident when they navigate the interface.
Reflection
Doing this project in my free time from university studies was a challenge for myself but also a joy and a learning experience. With my passion and love for games, I really wanted to design something for a game that I enjoy watching. I don't play that many games myself except for casual mobile and farming games, but I like watching streamers play shooter and horror games. Watching others play these games that I am too scared to play myself is a way for me to appreciate and experience it in a different light. Additionally, as a former art student I really enjoy the art style that Riot has for their games including League of Legends. After watching their Netflix show "Arcane" I particularly grew interested in their games. As for the reason why I chose to design for Valorant, is because I do not know LoL that well and I have more interest in the aforementioned game . After seeing that they released four new characters in late 2023, I decided it would be fun to design an overview for them in which I would present the patch notes in a new concept.
I learned…
The main takeaway that I experienced during my design process is the struggle of coming up with various layout designs and meeting user expectations. I learned that it is important to consider user flow and ensuring that the user does not get overloaded with information, as the human brain can only focus on a few things at a time. It is important to make information easily visible and button actions expected, so that the user can be confident when they navigate the interface.