Enabling fans with a viewer experience which is as good as the game itself

Context:

A bit of context, for the uninitiated — Valorant is an FPS (first-person shooter) game released by Riot Games in June 2020. As Valorant describes it is — a 5v5 character-based tactical shooter game, where the agent you choose is one of the most important elements of the game as each agent has its own set of abilities, utilities, and ultimate ability unique to them.

Within months of launching the game officially, in September 2020 Riot announced their first Valorant e-sports tournament — First Strike. Scheduled for December 2020, the gaming community was ready to see yet another Riot e-sports masterclass (considering their history with League of Legends).

The event was held on Twitch where the broadcasting team overlays the graphic elements over the game footage from the actual match and streams it for the viewers. So this is the part where I come in. This combination, of game footage and overlay elements, is where the problems mentioned below lies. I am trying to solve the issue of these overlaying elements and the value they provide to the user.

My Role:

I took up this project as a solo designer and was responsible for everything in this case study, which includes conducting user research, competitor analysis, UX trials for various wireframes, designing the UI and testing the final designs.

Duration: 6 weeks (≈ 100 hours)
Date: 28th January — 6th March, 2021

Comparison (Before/After):

Problem:

During this event, the majority of the viewers faced the same issue — Not being able to consume and track the utilities, abilities, and ultimate ability for any of the players/agents in the match. It prompted viewers to pay more attention to the casting team and their brilliant commentary.

Goal:

This project aims to improve the viewer experience for Valorant e-sports by giving them the agent statistics in a much clearer and intuitive way. It also includes researching any other problems and fixing them to overall boost the viewer experience.

Current Experience:

The following images showcase viewers’ problems after a series of surveys, interviews, and secondary research. Apart from the central issue of not being able to track the statistics of each agent’s abilities, I recognized other problems following a series of user interviews, secondary research in online gaming communities and user surveys.

Some of the problems with current experience:

1. Not being able to track agent abilities, utilities and ultimate ability.
2. No clear indication of a player who has achieved his ultimate ability.
3. Not being able to recognize which player is the spike carrier.
4. No information on which team’s agent has deployed a particular utility (in case each team has similiar agents eg. Killjoy, Cypher )
5. No clear distinction between attacking and defending team in scoreboard.

Competitor Analysis:

Since this was the first event by Valorant, I decided to look at the competitors and see what worked well with the viewers and what didn’t. I looked at events from few of the most popular first-person shooter games.

Conducting this analysis gave me an understanding of what viewers are already accustomed to while viewing e-sports events and providing insight into various layouts used by different games.

Takeaways:

1. There are two conventional ways stats are structured — either vertically using a sidebar at either side or horizontally, at the top.
2. E-Sports aren’t just about the players and the viewers; casters are as crucial as the screens which viewers see. They control the narrative of the matches and micro-events within the games.
3. Events stick to the conventional placement of maps and other sections and try not to create a massive difference between player experience and viewer experience of any given game.

Wireframes:

There are two main micro-events in the actual gameplay — the round phase and the buy phase. These two events make up about 85% of the entire viewing experience apart from Pre-Match events, Agent Selection phase, Post-Match events, to name a few.

Trust the Process:

While designing the wireframes for the in-round phase, I initially decided to skip low-fidelity wireframes and jump to high-fidelity wireframes instead cause I assumed that e-sports viewers are more accustomed to seeing vibrant colours, and it will be impossible for them to understand what the low-fidelity designs are meant to be.

This was a huge mistake.

High-fidelity wireframes are not only time-consuming, in the sense that making many iterations or versions of a single screen is a tedious process, but also making changes to them based on user feedback takes a lot of time.

Users can usually understand low-fidelity wireframes without having a design background, especially IF the wireframes are well designed. So don’t jump to high-fidelity wireframes, even for user testing.

What I mean by this is that low-fidelity wireframes not only save time but also test the intuitiveness of the screen. If the wireframes are well designed, the users WILL understand what it is and give you good feedback.

Low-Fidelity Wireframes:

After wasting three days trying to make high-fidelity wireframes, I finally decided to go with the actual process and create low-fidelity wireframes. The following are the wireframes I designed to get user feedback and decide what to go ahead with.

Top-Bar Layout takeaways:
The horizontal layout at the top is kind of a radical approach. When I tested this wireframe, there were a few concerns from the users:

1. It seemed very “top-heavy” with fundamental changes to the layout that people are used to from their player experience.
2. The map at the bottom left and kill-feed at the bottom right produces cognitive stress.
3. Apart from this, it has a functional error. The huge top-bar reduces visibility when viewing from the player’s POV, which is a considerable detriment especially considering how much Valorant involves verticality aspect in their maps.

Side-Bar Layout Takeaways:
Users were more receptive towards this approach, and it didn’t challenge their previous interactions with Valorant’s First Strike event. There were still a few iterations to be designed to make this side-bar variation a better experience for the viewers, but these were some of the insights:

1. Having the stats on the side was highly beneficial as it didn’t hide any part of the actual gameplay. Professional players have an excellent aim positioning so having enemy players on the sides is highly unlikely, making this a better alternative than the top-bar layout.
2. The player experience resembled the viewer experience, making for a better visual structure.
3. This was also because the majority of the player and the viewer base had come from a single competitor — Counter Strike: Global Offensive.

Design Iterations:

Following the user feedback and choosing to go ahead with the side-bar layout, I started designing the first screens of the in-round phase and the buy phase.

In-Round Phase:

The in-round phase screen is undoubtedly the screen that viewers see for the longest time during an e-sports event. For this screen, I made a few variations of both the agent stats and the scoreboard. Below are a few of the variations I came up with. After designing the few variations, I did user interviews and A/B testing to develop the final design.

Scoreboard Variations Takeaways:
Testing these variations gave a few insights. Trying to fix a problem and making it evident that you have solved the problem is not always the best way to do things (i.e. in 3rd variation). There has to be a balance between things.

Agent Stats Variations Takeaways:
Giving viewers the exact health and shields’ count seems like a good idea but isn’t as most of the gameplay in professional leagues is a one-shot or two-shot interaction. So if the viewer can see that agent’s health is low, it doesn’t matter if the health is 40 or 78; the player is one-shot away from death for most circumstances.

Another thing that is usually followed in games is placing the health bar at the bottom, especially in the gameplay. In e-sports, viewers are used to seeing health bars up top, especially when the layout is a sidebar layout rather than a horizontal layout on the top.

Complete In-Round design:

Buy Phase:

The buy phase is a 30-sec period between two rounds where teams can buy guns and abilities and plan their course of action for the next round. For a long, most FPS games have been giving the former more importance, and understandably so, as the buy zones in most FPS games are very small, but for Valorant this is a crucial differentiator.

Valorant provides ridiculously huge buy zones for each team, making the team’s initial player and utility set-up an even more vital element for the match narrative and is still an untapped feature in the viewer’s experience.

Viewer behaviour in the buy phase suggested, they care about the initial team/utility set-up and want to see that in a much better way than a small map on the top left. Following are a few of the different variations for the buy phase, which can be used on a case-by-case basis. The first two designs should be ideally used for the first 20 secs of the buy phase, and the last design should be used for the last 10 secs to provide player POV once the buy phase has ended.

User Testing:

Once I designed the above variations, I tested the designs with 10 different users. Following are the details:

Goal:

To provide users with agent statistics in a much clearer and intuitive way.

Test Metrics:

1. Task Completion Rate
2. Satisfaction Rate
3. Qualitative Feedback

Tasks:

1. Find the number of abilities an agent has remaining.
2. Find the number of points needed by an agent to unlock the Ultimate.
3. Find the agent’s positions at any given time.
4. Find the location of the spike carrier at any given time.
5. Find the economic value of the team during the buy phase.

Results:

Overall, my designs increased the average ease of overall task completion rate from 5.1 to 9.2 (1 being hardest, 10 being easiest)while enabling viewers with a much more intuitive experience in finding all of the agents’ statistics.

Additional Designs:

Insights Gained:

1. As mentioned earlier, this project gave me one of the biggest learnings I have had until now — TRUST THE PROCESS. All the design processes are time tested, they do work, and trying to go past them based on personal choice can prove detrimental.
2. E-Sports is not up-and-coming. It’s already here! The sheer number of hours watched in few months despite being the game’s first official e-sports event is staggering. Giving time and resources to improving these experiences is a necessity.
3. Iconography. This was a bit of a surprise. Throughout the design learnings, I have always seen experienced designers talk about icons. It’s always talked about in the context that all icons in the project should look good together, have the same round edges or square edges, and have the same stroke widths. But during this project, I realized the good icons are scalable, they need to convey their value at 16px as well as it does at 96px.

What about the Valorant Champions Tour ?

I had started and finished this case study 2 weeks before Valorant Challengers Tour had started with its first match. As we know, VCT has shown an improved experience compared to Valorant First Strike, but there are still issues with it, which are addressed by the designs in this case study.

Next Steps:

Now, I plan to connect with the designers at Riot and get their feedback and reviews on this case study. I want to know more about their thought process, how and why they designed the event in the way they did. Were there technical issues that prevented all this? Time constraints?

If any other e-sports designers are reading this, I would love to have your feedback as well. Connect with me with the links down below:

Sumeet Pandhare | itssumeetp

LinkedIn | Instagram | Twitter | Let’s Talk

I want to thank

Disclaimer: This article is based upon my experience, all views are my own and do not represent the opinions of any entity whatsoever with which I have been, am now, or will be affiliated.