Problem

As an esports tournament platform, Battlefy caters to two main user groups: Players and Organizers. For Players, all required critical information to successfully participate in a tournament lived on different pages:

• Player profile page
• Tournament page
• Match page
• Left sidebar

As a result, players spent time and energy trying to understand our platform instead of focusing on the tournament that they're playing in, their own performance, and the competitive experience. Players were missing critical information, which often led to disqualifications. 

This also generated extra burden to organizers who have to deal with player support requests during the tournament when it should feel like the tournament is running on auto-pilot.

Over time, we’ve added tech and design debt since the majority of features were built in isolation due to tight deadlines and necessary compromises. This made it more difficult to build new features or optimize old ones. Ultimately, we couldn't create the best experience for our users.

Context

Tech and design debt: When I joined Battlefy, the platform was developed over 5 years ago using an older version of Angular. This made it extremely difficult to build features on top of the core product. Because of this, the team had been discussing the re-architecture of the platform on React. This migration of languages is still one of the major blockers Battlefy faces today.

High user churn: Battlefy had low player retention rates overall. We knew from data that a user's first tournament experience either brought them back for a second, third, and fourth tournament (good experience) or turned them away forever.

B2B client and revenue-focused: In the last few years, Battlefy's focus was to increase revenue, which meant activating more B2B client deals. This involved not only marketing landing pages but some custom feature requests as well. Due to the tight deadlines that came with client contracts, there was almost no design or technical documentation for previous work. This added debt in the product.  

Battlefy's future hinges on its ability to create a marketplace that is self-sustaining and a profitable revenue model. With some of these B2B engagements driving hundreds of thousands of players to the platform, a strong association of Battlefy as a trusted and frictionless product is essential for a successful relationships with our users and clients.

Goals

Players must know their critical information and actions for upcoming tournaments. They should be able to access this easily. Players must also be informed of the actions' context. Due to the amount of confusion and frustration from players, we followed 'clarity > speed' principle throughout the design process. We would know if this is true if our missed check-ins decreases by 15%.

We know we have been successful if the number of player disqualifications due to inaction on critical information (check in) decreased. 

Solution

A complete end-to-end player experience that included Global Player Guide (alerted users of critical actions they needed to take) and the Local Player Guide (from registration to reporting their game scores, the tournament experience was designed to be used in a singular place to remove any previous confusion).

Although we were only able to ship the Global Player Guide platform-wide and the Local Player Guide only on Hearthstone Masters and the National PUBG League's tournaments, the team has carried this solution and product strategy forward to the College League of Legends and Apex Legends Global Series league experiences. Both case studies coming soon.

Results

In the first month of the Global Player Guide's release, missed match check-ins decreased from 42% to 29%. However, we noticed that our tournament check-ins only improved slightly. Since this feature relies on the browser notifications, we proved our hypothesis that the users who are still missing tournament check-ins are away from their computers and 15% of users have their ad blockers turned on which means that they are not receiving check-in notifications (via data, user interviews, and surveys). 

Process

We had a major decision to make:

1. Only solve design blockers, which would create more tech debt;
2. Rebuild the current player guide in React but keep design; 
3. Or redo the entire design based on known issues and build it properly in React.

We believed #3 was the best option. With the amount of risks and unknowns (cost and scope) with this project, we decided to run a 3-day design spike. This business decision must be informed by our users so we aimed to answer these questions:

• What are our players' current end-to-end experience on our platform? Where are their biggest pain points? How are they working around those today?
• What are their motivations for competing? 
  
• What critical actions are they missing? (Player behavioural and quantitative data)
  
• Is there a way to solve 80-90% of the problems, with only 20% of the cost? Versus solving 100% of the problems with 100% cost.
• What is the highest level cost (<1month, 1-2 months, 2 months+) of option C?

There is a chance that after the design spike, our conclusion would be that those are indeed our only options, and that option #3 will take 3+ months to design & build. However, we believe that the 3 days is worth it endeavor to significantly de-risk our choice to do option #3. By understanding the entire problem set and their contexts, we will gain confidence in our decision to move forward with a redesign.

I also decided to participate in a tournament. This helped me empathize with players, identify frustrations, and communicate this visually with the team. We used this user journey to align on what our ideal experience should look like.

The design spike resulted in two high level user flows that I presented to stakeholders with each solution's pros and cons. Through feedback and iteration, the stakeholders and the team were aligned on the ideal experience which was a combination of the two.  

The Solution

Wireframes

I conducted usability studies on both players and internal users using low-fidelity Invision prototypes to de-risk the design. We discussed each iteration as a team and moved forward with testing wireframes v3 and v4 (see below). We received positive feedback, which made us confident to move forward with high-fidelity mockups. Some adjustments included drawing attention to these new features when users log in for the first time. 

I used Principle to show the interaction design (see prototype below). These subtle animations made the solution feel like everything is moving forward in design. 

Mockups

To make sure that the design is scalable, I worked on the team-based games play experience as well. The main difference was the player's ability to create, edit, and invite a team to compete with. This posed many questions to existing tech debt on how the teams feature was built previously. Below are some of the mockups I presented to the team and stakeholders in order to show the adaptability of the design laws.

We chose to ship Global Player Guide first platform-wide -- the improved notification system that is easily accessible to users. It alerts the user as to when there's a critical action they need to act on. We believe that the Global Player Guide would answer a lot of our users' confusion on where to find their tournament and what their next action is. As a team, we went through all the notifications and removed any non-critical ones to increase the importance of the ones they do receive. 

Anywhere on the platform, users will see their avatar turn from blue to red. This lets the user know that there's something very important they need to attend to. This colour change is something players are used to seeing in video games. Gamers' peripheral view and depth-of-field are much more developed due to paying attention to multiple things on the screen at the same time. We added "My tournaments" as we found that users were looking for their joined tournaments in the Global Player Guide during the usability studies. We also learned that this is where players expected to see their past tournaments. First time users will see an onboarding tooltip to let them know about this new feature.

Today, we have shipped the Player Dashboard and Lobal Player Guide in key game titles and developers such as the National PUBG League (Bluehole Corporation), Collegiate League of Legends (Riot Games), Apex Legends Global Series (EA, Respawn).