eSports tournament engine redesign

Through gathered insights, we identified key areas for improvement to the tournament engine of our white-label eSports platform. Strategic design adjustments were made to enhance the overall user experience and platform efficiency; in-line with both business and user needs.

My role:
Lead ux/ui designer

As the lead UX/UI designer on this, I led the redesign from conception and final design, and to design QA.

the team

Project manager
Junior designer

Duration

2 months

Background

Our eSports platform features a versatile tournament engine designed for white-label deployment. It is utilized by clients in Canada, India, New Zealand, and previously, in Malaysia.

Its tournament engine empowers users to create tournaments for a wide range of popular eSports games, supporting both single-player and team formats. Users can opt to make their tournaments open to all platform members or restrict access to friends and invited participants, offering a flexible and customizable competitive environment.
What the site currently looks like (delete this section?)

Insight gathering

To understand user challenges, we collaborated closely with our clients, who collected user complaints from their end. Additionally, we engaged directly with users to gather their feedback and experiences, ensuring a comprehensive view of the platform's inefficiencies.

While we did not conduct formal user interviews, these interactions provided valuable insights reflected in the user quotes below.

"I'm not sure what info I need to prepare for my tournament setup."

"Understanding the different tournament formats from text alone is challenging."

"Setting up tournaments on the platform is really time-consuming."

Analyzing insights

Our analysis revealed several key areas for improvement in the tournament setup process. Firstly, users lack a clear way to gauge the effort and time required to complete the setup. Secondly, the absence of visual aids for the six different tournament formats makes it difficult for users to understand how their tournament would progress through the different rounds. Lastly, the current flow of the process can be confusing, as the information entered does not flow in a natural and intuitive manner.

These insights highlighted the need for a more streamlined and user-friendly approach.
No overview of the tournament setup process.
Tournament formats are hard to comprehend.
Setup process is not organized as per user expectations.

problem statement

"Users setting up tournaments on the platform face challenges in understanding the necessary information and navigating the complexities of tournament formats efficiently, leading to time-consuming processes and potential setup errors."

Proposed solution

To address the identified areas of improvement, we implemented several targeted solutions. We introduced a stepper to provide users with a clear overview of the tournament setup process, helping them gauge the time and effort required. Visual aids were added for each of the six tournament formats to enhance user understanding. Additionally, we reorganized the setup process to follow a more logical flow.

Clear Overview of the Setup Process

To provide users with a clear overview of the tournament setup process, we introduced a stepper. This UI element displays the number of steps involved and highlights the current step the user is on, allowing them to gauge the time and effort required. This change aims to make the setup process more transparent and less daunting, reducing the likelihood of user drop-off due to uncertainty.
Before; users lack a clear way to gauge the effort and time required to complete the setup.
After; a stepper was introduced to show the steps in the setup process and indicate the user's current progress.

Improved Comprehension of Tournament Formats

We added visual aids for each of the six tournament formats, providing users with clear diagrams and examples. These visuals help users quickly grasp how their tournament could flow from one round to the next, making it easier to choose the most suitable format. This enhancement aims to improve user understanding and reduce confusion during the setup process.
Before; the absence of visual aids for the six different tournament formats makes it difficult for users to understand how their tournament could progress.
After; visual aids were added to help users understand the six different tournament formats.

Streamlined Setup Process

The setup process was reorganized to follow a more logical flow based on findings from user flow testing. We discovered that users often skipped the "optional" fields initially, opting to fill out the "more important" fields and settings first before scrolling back up to complete the optional fields they had passed earlier. Instead of jumping from game selection to date and time, and then to tournament format, the process now follows this more intuitive order. This reorganization helps users enter information in a natural sequence, reducing confusion and making the setup experience smoother and more efficient.
Before; users found the current form flow of the process to be confusing, as the information entered does not flow in a natural and intuitive manner.
After; the setup process was reorganized to follow a more logical and intuitive sequence, and the stepper helped sequester the optional fields into a single skippable step.
Maybe show how the proposed solutions affect the user flow? If there's not much change to the actual user flow, then can just delete this section I guess.

Our Solution

For Penny, we

For Amon, we

Impact

Our success metrics include: the time taken to set up a tournament, the tournament setup drop-off rate tracked via Google Analytics, and the average monthly number of user-created tournaments. This comparison helped us gauge the effectiveness of our changes while considering external factors like increased user sign-ups.

Time Taken to Set Up a Tournament:

Avg. time taken to set up a tournament decreased from 4m 17s to 3m 46s reflecting a more streamlined and intuitive process.

Tournament Setup Drop-Off Rate:

Drop-off rate in the tournament setup process has been reduced by 18%, demonstrating that fewer users are abandoning the setup process midway.

Average Monthly Number of User-Created Tournaments:

Since deploying the new design, the average monthly number of user-created tournaments has increased by 23%. While this increase can also be influenced by factors such as a rise in user sign-ups, it nonetheless suggests that the changes have made the platform more engaging and user-friendly.

Other projects