Mainline Esports Platform
UX/UI Design
A robust esports tournament management solution
Mainline’s tournament platform is designed to be a comprehensive white-label solution for esports tournaments. The platfom handles everything from registration to scoring and placement on both the player and the administrator sides. I joined a roughly 5 person product team as they kicked off the next major version of the product.
Goal
The main goal was to transition tournament creation and management from our devs to our admins and lay the foundation for a self-service platform. We also wanted to expand our tournament options and enhance the player experience.
Key Functionality
Flexible tournament creation dashboard
Comprehensive tournament & player administration
Team creation and management
Enhanced match communication and scoring
Process
First, we gathered the stakeholders, tournament admins, and development team leads to set goals, timelines, and brainstorm functionality and features.
Next, the product team worked collaboratively with tournament admins and the dev team leads to iterated user flows and low-fidelity mockups.
As features and flows were finalized we transitioned to high-fidelity mockups and went through our final iterations before handing the final designs off to the development team.
Finally, we worked closely with the dev team throughout the build to address any issues and refine designs as needed.
Tournament Creation Dashboard
Tournament creation was the biggest new feature of the product and where I spent most of my focus. Prior to this version of the product, tournament creation was done in a configuration file so every part of this flow was new.
We also increased the size and scope of tournaments we could support, so it was important to make all aspects and steps of creation very clear. To do this we broke down the process of tournament creation into key building blocks that could be viewed in a dashboard and then configured and set up in their own flows.
Tournament Creation Wireframe
Registration Configuration Wireframe
Tournament Administration
Team Administration
Tournament Administration Dashboard
Integrating tournament administration tools throughout the product was another key feature. This included everything from running the actual gameplay of the tournament to handling the moderation of teams and players.
While this wasn’t assigned to me directly, as the senior designer I assisted and provided guidance for the designer it was assigned to. With administration and creation being so intertwined with each other, both our work needed to inform and integrate with each other.
Match Lobby
With adding new tournament formats along with support for teams we needed to make some key updates to the match lobby to accommodate these changes. This included making the check-in process easier and clearly displaying the check-in status for all participants. To facilitate more participants in the match we added a match chat and clearly displayed the respective team captains so they could coordinate match decisions easier. Finally, we updated our match score submission to support the more complex tournament and match formats we added.
Match Lobby
Match Score Submission
What I Love About This Project
It was challenging, but rewarding to work on a major addition to a product. I enjoyed the process of going back and forth with developers, designers, and stakeholders to iterate and find the best solution. It was also great to work in tandem with another designer and let our work guide and inform each other’s solutions.