Designing the User Experience of Arena Live

A UX Case Study on Building a Unified Platform for Players, Fans, and Industry Enthusiasts in the eSports Arena

Tech Stack Used

Tools and Technologies Empowering Arena Live's User Experience Design

Project Overview

Arena Live is built for eSports enthusiasts who crave an all-in-one platform for both local and international gaming action. Whether you’re a player looking to sign up for local tournaments, a fan wanting to stream events live, or an eSports follower who enjoys the latest industry news and updates, Arena Live is designed with you in mind. With easy tournament registration, real-time rankings, and interactive rating points, Arena Live lets you dive deeper into the eSports community. It’s a place where gamers, fans, and industry insiders connect, compete, and stay in the loop—all in one streamlined platform.

Problem Statement

Alex, an aspiring eSports player and avid fan, struggles to find a streamlined platform that brings local tournaments, industry news, and live event streaming all in one place. Existing solutions are either too fragmented or don't cater to local tournaments, leaving Alex frustrated with having to juggle multiple platforms. He needs a user-friendly solution that enables him to stay informed, register for tournaments, and track his rankings, all while following his favorite eSports events seamlessly.

Goal

The goal of Arena Live is to create an integrated eSports platform that provides players and fans like Alex with easy access to local tournament registration, real-time rankings, industry news, and live event streaming. By offering an intuitive, all-encompassing experience, Arena Live aims to empower users to participate actively in the eSports community, stay informed, and enjoy a seamless viewing experience without the hassle of switching between multiple platforms.

User Personas

User Research

Alex is a passionate eSports fan and semi-professional player who balances college life with gaming. He follows local and international tournaments but finds it difficult to keep track of events, rankings, and news across different platforms. Alex needs a streamlined solution to stay connected to the eSports world.

Goals

Alex aims to grow as an eSports player by joining more tournaments, staying informed, and building his reputation in the community.

Needs

Alex wants an all-in-one platform where he can register for local tournaments, follow event updates, and track his rankings in real-time.

Wants

He prefers a simple, engaging interface that brings his tournaments, rankings, and news into one personalized space.

Fears

He worries about missing tournament registrations, losing track of his ranking, and spending too much time switching between apps.

User Journey Map

This process involved meticulous dedication learning the behaviours of the target user group.

Design System

Design System- Arena Live

This design system was carefully curated using the aforementioned user experience research and the best user interface practices.

30+

Screens

400+

User Testing Sample

Open Design System in Figma

Visual Parameters

The visual parameters of Arena Live's design system are crafted to reflect the high-energy, competitive nature of the eSports community while ensuring a user-friendly experience. The color palette centers around bold, dynamic hues like electric blues and deep purples, symbolizing the excitement and intensity of gaming. These are balanced with neutral grays and whites to provide clarity and focus, making content easy to read and navigate. Typography is clean and modern, with a sans-serif font that enhances readability on digital screens, catering to long sessions of browsing and interaction. Iconography is sharp and intuitive, helping users quickly locate features such as registration, rankings, and live streaming.

Colors

Typography

Grid Layout

User Flows

The user flows in Arena Live are meticulously crafted to accommodate the diverse actions users might take, ensuring a seamless and intuitive experience for both players and fans. From the moment users enter the platform, they are guided through clearly defined paths tailored to their primary needs—whether they’re registering for a tournament, checking the latest news, tracking rankings, or streaming live events. Each action is streamlined with minimal steps, designed to reduce friction and help users accomplish their goals quickly. Key flows, such as tournament registration and live event streaming, have been prioritized to deliver instant access, while secondary actions like viewing news and rankings are positioned intuitively within reach.

User Flows

Onboarding

From the moment the user begins their journey, they have options to sign up through multiple channels or join as a guest.

Registration

Event registration is accessible based on credential validation.

User Interface and Screens

Each screen is organized to prioritize important tasks and financial tracking, reducing clutter and simplifying navigation. The drag-and-drop functionality is a core feature, allowing users to customize their dashboards easily. Visual consistency across screens, including uniform spacing, typography, and color usage, ensures that users can quickly become familiar with the interface.