PAUL BERG
Paul Berg
Product Designer

Designing a custom esports platform for Rocket League

Company
Epic Games
Industry
Esports
Deliverable
Website & CMS
Timeframe
Jun 2021 → Jun 2022
My Contributions
UX Design, UI Design, Interaction Design, Information Architecture, Solution Discovery, User Research & Testing, Design Systems, Product Strategy, Workshop Facilitation
Team
2 Product Manager, 2 Designers, 7 Engineers

Problem

Rocket League Esports is a growing professional esport with hundreds of teams and millions of dollars in prizing. Unfortunately, as the esport grows the software they use to run tournaments is holding them back. Fans and players have to use multiple websites to watch and participate in tournaments, admins are limited in the format and scale of tournaments they can run, and Epic Games is concerned with the security of player data that is stored on other websites.

Solution

Build a custom esports tournament platform that will act as a single destination for fans and players to participate in and follow tournaments, manage professional teams, view current and historical stats, and access official news. This includes a streamlined and tailored admin portal to create, publish, and moderate tournaments and manage player data.

Research

We started by interviewing key stakeholders and users, researching the esports landscape, and auditing the current Rocket League Esport experience. This laid the foundation for our project by making sure we understood business goals, constraints, and the Rocket League culture before making any design decisions.

Screenshot of research

User Groups

Next, we distilled our research and identified 5 user groups that would use the platform. With a focus on players and admins, we surfaced goals, pain points, key activities, and opportunities for each. The 5 user groups were Players, Coaches, Fans, Admins and Moderators.

Admin user group

Concept Model

We also created a concept model detailing the structure of a tournament. This allowed us to visualize our understanding and align our mental model with the clients.

Concept model

Sitemaps, User Flows, and Wireframes

Feeling confident in our understanding of user needs and mental models, we created sitemaps, user flows, and wireframes to quickly ideate and get early feedback.

Sitemap
Example user flow
Example wireframes

Art Direction

This was also when the Rocket League Esports branding project was put on hold. To make sure we still had a strong look and feel for the platform we created style tiles and workshopped with the client to establish a visual direction. We landed on a direction called Terminal that was a modern and simple take on the broader Rocket League brand with a slightly futuristic feel.

Oculus style tile
Regal style tile
Terminal style tile

Mockups

As we refined our thinking and converged on a single direction, wireframes transitioned into high-fidelity mockups to work through interaction and interface details. This allowed us to get higher-quality feedback from the client.

Home page
Tournaments page
Backet page
Match page
Team profile page
Edit tournament page in the CMS

Prototypes

User tests were run to get feedback from players, coaches, and admins using clickable prototypes of primary scenarios.

Starting screen for prototype

Design System

As components and patterns began to emerge we created a design system to keep our work consistent across multiple designers and speed up development.

Example pages from design system

Documentation

Designs were documented and shared with our engineers. We provided development support through Slack, weekly demos, and QA testing.

Bracket design documentation

Testing

Private tournaments were organized throughout the project to get feedback from users and make sure the software was working properly.

Playing a tournament at the Postlight office

Outcome

It is estimated that the number of admins required to run a tournament will be reduced by 75% based on results from the private tournaments, saving money and reducing coordination, training, and onboarding time for admins. The website is also expected to grow the player and fanbase by making esport news and information more accessible and simplifying the team creation and tournament participation process.

Endorsements

“Looks fantastic. I love that you pulled out all of the key features from Smash.gg (their current platform) and made them better. I really appreciate all the awesome stuff you create!”

Murty Shah - Esports Operations Manager, Epic Games

“🏎💨 Working alongside Paul is akin to driving a sports car on an open road. The possibilities are endless, it’s surprisingly faster than expected, and you feel limitless! Paul is hard-working, talented, insightful, empathetic, collaborative, supportive, and downright prolific! Goooooooaaaaaaaaal ⚽️”

Frēz Ferrino - Senior Product Designer, Postlight