Project Description

RIVAL GAMES

I worked as Lead UX/UI designer on the Development Team for a variety of Esports apps. Two of them being, the main tournament app, which is white labeled & used by a variety of major sports associations & a CMS for companies to manage their esports platforms.

What I worked on:
  • Esports Tournament Platform

  • Tournament Management

  • Wagering Platform

  • 500+ User Interface Designs

  • Interaction Design

SEE WEBSITE

Situation

Our app allows users to participate in Esports tournaments. Gamers face off against each other for all kinds of prizes.

  • (1) Senior UX Designer

  • (6) Front & Backend Developers

  • (1) Product Manager

  • (1) Head of Engineering

  • (1) Co-founder

Tasks

I needed to come up with a workflow for how users would play against each other for online tournaments.

  • Competitor Research

  • Workflow Development & UX / UI

  • Update based on User Feedback after live testing

How it Works

  • Users picks a game & console to play & create a match

  • User gets paired with another online player and the match begins

  • Players set up the match, enter scores & receive prizes after the match

(Above) Users can create a team match, tournament or 1-on-1

Competitor Research

After receiving the task from product, I first started by looking at how our competitors were running their matches and played in some tournaments to see what the experience was like.

(Above) Feature Set Analysis

Competitor Research Key Findings

  • Some interfaces were complicated and confusing, often requiring YouTube videos to learn how to use them

  • Step based interfaces were far more easy to use as a first time user, but took longer to complete

  • The workflow was different depending on the game & rules being played.

Initial Designs

After the competitive research findings, I started sketching some ideas. I also used the existing style guide for the UI. I collaborated with a product manager to generate some ideas and created the 1st version of the UI to be developed and live tested with users.

(Above) Version 1

Collected User Feedback

Feedback was collected by game moderators who answered help tickets during a match. I was given the feedback from the help tickets and documented those pain points.

  • The set up instructions took too long to read and users were skipping them, which lead to confusion around how to start and complete a game.

  • Used old UI, needed to be updated for accessibility and branding

  • Users were trying to cheat the game

  • Users were waiting too long between games in the tournament and were dropping off.

(Above) Moderator View I designed for the Admin CMS

Results

Updated designs to solve for the feedback we received from the initial designs. I proposed 2 different solutions. The 1st was creating a step by step solution to cut down on the instruction reading time, a higher development effort. effort but more helpful with user confusion. The 2nd was a light weight update to the existing flow, while still addressing as many of the issues I found. The team decided to go with the lower effort design. So far it has proven to reduce cheating, improved readability & we have received less help requests.

(Above) V2.0 Phase 1
  • Hired game moderators to reduce cheating attempts and to answer questions through live chat to make tournaments run more efficiently

  • Updated to have new gamer focused branding, also implemented an accessible dark mode to the app, since we found users were using the application more regularly during evening hours.

  • Added ability to upload photo proof of score submissions

  • Added email notifications to notify users when it’s time to play their next match

(Below) V2.0 Phase 2
Click to view live