Carly | TLC Go

X-Sight Homepage

ViacomCBS, 2020

Valorant User Profile Redesign

personal project, 2021

Project Overview:

I spent a lot of time playing Valorant, Riot Games' first person shooter, during lockdown. Riot is best known for League of Legends, and although that game has been around much longer, it still feels like they didn't put as much consideration into designing Valorant's user profiles, an integral part of personalizing the user experience, as they could have.

I focused on improving the visual design of the user profiles with the intention of making them more personal.

Interestingly enough, it's been nearly 2 years since I completed this project and the profiles look more or less the same.

Tools: Miro for organizing research, Figma for wireframing

PROCESS

Complete a thorough audit of Valorant's user profile design
Research how other similar games approach their profile designs
Evaluate which of the competitors' features
Outline how navigation elements and links are organized within TLC Go and compare to competitors, selecting effective design trends that can be applied to TLC's UI.
Lay out wireframes
Consider possible next steps for refining the wireframes and UI

Goal

Develop a new direction for Valorant's user profiles that makes them feel more personal.

Valorant Audit

difficult to read this this copy, no contrast.

The icons in this section denote the type of game mode for each match, but there is no way to filter someone's profile by type of match.

The rank on the top of the page refers only to how well the user performs in competitive matches, but the summaries below include all types of games with no option to filter.

If I came to someone's page to see how they perform competitively, it's difficult to parse that when there's so much information here that's not directly relevant to rank.

There's so much negative space and all of the information is crammed into one box in the middle of the page.

my profile

This is my friend's profile. There isn't any indication of whose profile I'm looking at. It doesn't even include the username.

The only things that change between his profile and mine, besides the content, are the removal of navigation bars and my friends list is no longer visible on the right for some reason.

another user's profile

competitor: overwatch

This user profile uses the space on the screen effectively and makes information about the user and their playing habits easily accessible.

The user's ranks are displayed here, by season

riot's own:
league of legends

Although League of Legends is made by the same studio that made Valorant, there is a stark contrast between how the user profiles are designed.

final mockup of valorant profile

I added a User Profile page, accessible from the new bottom navigation bar, as a place for all the personal recommendations and settings to live. The intention is to make the user experience more personal.

Currently within the live application, these options are scattered among the links on the left side panel and it takes a too long to find them.

I also added a user icon feature, that I imagine would offer users the option to change it on a click.