Esports Competitive Gaming Website

A competitive gaming site that hosts eSports tournaments and matchmaking for League of Legends.

This competitive gaming website accompanies the popular online multiplayer game, League of Legends. The goal of this website is to host eSports tournaments and exclusive matchmaking so that gamers of all levels can earn while playing the game.
‍
I was tasked with organizing, simplifying and transforming features that the client had envisioned into usable visual designs for the web.
Project Type
Client Project
Duration
Nov 2020 - Mar 2021
My Role
UX & Visual Design
Outcome
150+ screens designed for web and mobile
What is the problem?

Gamers need an effective way to practice and compete in tournaments at their respective levels, so that they can earn in the process.

Tournaments are usually the main source of income for gamers. However, each year, only a small pool of professional players qualify for official LoL tournaments. While beginner to intermediate players invest long hours training and grinding at the game, they find it difficult to financially sustain themselves in the process.
discovering the problem

I conducted user interviews to better understand the eSports gaming space and the ways users currently address the problem.

Research methodology: Qualitative user interviews
Interviewing friends and family of the target demographic and psychographic revealed these findings:
Only pro players usually make it to official tournaments
Other players want to make a living from playing the game so they look for 3rd party organized tournaments to participate in.
Aspiring pro players spend a lot of hours of their day in-game
To practice full time, intermediate players need a way to support themselves financially.
Bots, smurfs, spam accounts slow down progress
Getting matched with bots and spam accounts slows down skill building since players have to play more matches hoping to find legitimate opponents.

Is there a way for gamers to earn while they play League of Legends?

proposed solutions

Develop a competitive gaming website that will host tournaments for all levels, so that normal players can be rewarded like professionals.

Daily Tournaments
The platform will offer daily tournaments at various rank levels so that all users can participate regardless of rank to win cash prizes.
Trading and re-investing rewards
After winning a match a user earns silver(the platform’s currency). They can invest this silver in the market or trade directly with other players to boost their earnings.
Verified players
All players on the platform will go through a verification process to ensure that smurfs, bots and boosters don’t contaminate the matching pool.
In-house matching
Develop an exclusive matchmaking system that pairs similar level gamers to help them win more games and build skill efficiently.
the process

Organizing & Simplifying Features with User Flows

My first task was to understand, simplify and organize the features required by the client in a meaningful and easily understandable structure.

I started by creating user flows for the main game modes - Ranked Solo, 5v5 and Tournament mode. I've displayed the Tournament Mode user flow here.

Check out all the user flows

Tournament Screens

Hosting daily tournaments is the most important part of the platform. Tournaments are hosted for all levels of players so that all users stand a chance to earn cash prizes. The entry fee rate (amount of silver) decides which users can participate in which tournaments. Higher the entry fee, higher the cash prizes.

Tournament brackets
Player invite to join a team
Main tournaments page
Sign up for a tournament modals

Match Setup

This is the waiting screen till the tournament starts. Here teams can select their playing position, view the tournament brackets, and chat with team members.

Challenge: Staying consistent with LOL's design patterns.
‍
Users reported that the redesigned Match Setup pages added a learning curve to the platform.
‍
To tackle this, I retained the vertical player cards used in the League of Legends client but customized the information and style.‍

Iteration 3
Final Iteration

Match Lobby

When a tournament starts, players remain on the match lobby screen for the entire duration of the match. I broke down the match playthrough into states (eg. Waiting for players, Join a custom game, Match Started and Match Ended states) to streamline the experience from start to finish.

Iteration 1
Final Iteration
design system

I maintained a design system for type, colors, overlay styles and frequently used components.

I followed Google’s Material Design guidelines to achieve the dark theme.

For website colors, I chose blue to convey professionalism and reliability, and a vibrant orange accent to convey energy and competition.

Other Screens

Landing Page
User Profile
Admin Dashboard
Trading Pages
Buy/sell silver
Recharge wallet
Trade silver with another player
Send silver to friends
learnings

What I learned from this project

Working with complex interconnected features

I had to figure out the simplest way to design a platform with complex features from scratch, visualizing smaller details in the platform’s broad structure.

That design systems are clutch

A design system sped up my progress, while giving the developers a single reliable source of truth for styling. Now, I always build out design systems while working on projects.

How to engage in collaborative communication with clients

I got to practice balancing listening, suggesting, ideating and advocating for design decisions while working with clients.

Thanks for scrolling! You might also like:

product, ux & Visual redesign

Grad Goggles

product & Visual Design

Customer Journey Analytics

Get in touch!

LinkedInInstagramBehance
(c) Monica Kawade 2023
I use Hotjar to collect anonymous data about user interactions (e.g. where you click, scroll your mouse, move in between pages). I use these insights to continuously improve the user experience of my site.