VALORANT Replay is a feature I designed to allow players to capture and analyze their best gaming moments.
Challenge
How might we make it easier for players to watch, review, and gather clips from their past games?
The Objective
VALORANT Replay should allow players to access their recent games, watch and review plays from different POVs, and export or download clips to share with others.
My Role
Design a replay system for the VALORANT community to use for learning and entertainment.
The VALORANT community has expressed interest in the development of a replay system since it was first announced. Many other games like Overwatch, Fortnite, Apex, and League of Legends have seen success in developing replay systems for their community. It is important to design the logistics and the interface to match the existing game UI to allow the best experience for the community.
The replay system is something that users have been asking for since the games release. As a personal project, I wanted to design the feature that would give the community a way to easily analyze and capture moments of gameplay.
Personas
Who would use the replays? There are already many existing programs to clip and record gameplay. What new features can a VALORANT replay system provide users to optimize learning, pro players, and content creation?
Competitor Analysis
Analyzing the tools and features from other games replay systems and clipping software allowed me to incorporate features that the VALORANT community could benefit from. I used coaches, professional players, content creators, and casual players to help me analyze and gather insight on the successes of other competitors. I chose to evaluate Fortnite Replay, Squad OV, and Insights to see what features I liked.
Squad OV
Lets players record full vods
Includes drawing feature
Users can click on kills in the timeline to get to the event in the vod
Fortnite Replay System
Allows users to create cinematic sequences
Does not let players toggle UI HUD
Players cannot export form the in-game replay
Lots of camera angles and allows users to toggle between different players POVs
Insights
Allows players to bookmark and add comments during a game
Users can share with others using a link
They have an interactive map to diagram plays
User Flows and Story Mapping
User flows were utilized to examine how users would utilize the different. It allowed me to focus and streamline the experience, organize the navigation, and figure out which features different users would utilize
Testing and Iterations
Because VALORANT has an very minimalistic UI, it was challenging to fit all of the ideas that I had into one screen. It was extremely important to figure out what features users needed vs. what would "be nice to have" and narrow down the information is essential for users to be able to use the replay system. I compiled a list of things that were required for the system to function properly and iterated on those designs. While designing from wire frames to Hi-Fi screens, I had to update the UI elements and styles to match with the new VALORANT interface.
Final Screens
Final Prototype
I edited together a prototype video of how a user would utilize features to review highlights from their gameplay.
Settings
Users can access the settings page from the home menu or while viewing their clips. This allows them to adjust views, change key binds, and hide interface elements to cleanly record and save their gameplay.
Switching POVs
Players can swap between first-person, third-person, and observer mode to capture cinematic sequences and player POV’s from their team and enemy teams. They can also set up cameras and key binds to switch views and toggle settings quickly and easily.
Reflection
I felt very proud to work on a feature for a game that I really love and want to see flourish. This is my first game design project and it really challenged me to think creatively to match the style of the game.
Some things I learned:
Importance of brand Identity and style in how the feature functions. The VALORANT UI is very clean and minimal. It was hard to include all of the features while matching the rest of the screens. I didn’t want it the design to feel cluttered
Prioritize insights over process expectations. Some of the features like the ‘Kill Feed’ on the replay page was not desired by participants. It is important to rely on research insights to validate decisions.