Index MP

Product & Visual Design · 2019

One home for esports fans: discover, track, and watch every event in one place.

A gamer in headphones and glasses, lit in ReadyUP orange, with the brand pattern tiling the background

Competitive gaming is enormous and completely fragmented: events scattered across organizers, streams, and calendars. ReadyUP was built to be the single hub where fans discover tournaments, follow their teams, and never miss a match, with a tools layer for the organizers and orgs who run the scene.

The audience is hundreds of millions strong, but being a fan means keeping a dozen browser tabs open to track every detail. ReadyUP’s job was to make following esports feel like one consolidated experience.

435.7MGlobal esports viewers.
$1.2BIndustry revenue.
$80MPrize pools in play.
1 hubReplacing a dozen scattered sources.

Industry figures from 2019 market data, the year the project was launched.

TL;DR The 2-minute version

From a dozen tabs to one home for esports.

The whole story, top to bottom. Open any step for a quick deeper read, or jump straight into the full section.

0global viewers, 2019
0platforms: one for fans, one where organizers post events
1 hubreplaces a dozen tabs
  1. 01

    ReadyUP is one place to discover tournaments, follow teams, and watch matches across every game, with a tools layer for organizers and esports orgs. Built in 2019 and launched with ESL and Collegiate StarLeague listing their events.

  2. 02

    Schedules buried on organizer sites, streams split across platforms, results chased through social feeds, no reliable way to never miss a match. The bigger the scene gets, the harder it is to follow. Read the full section →

  3. 03

    Fans follow specific teams as much as the games themselves, and don’t want to miss what matters. That single frustration set the north star: nobody should miss the moment. ReadyUP had to turn following the esports scene from active effort into something the product does for you. Read the full section →

  4. 04

    Discover every event in one feed, track teams with calendar sync and notifications, watch streams in context, plus community, tickets and merch, and viewing-party tools. Read the full section →

  5. 05

    A hub only works if the events are real and current. Every fan-facing feature had a matching question on the organizer side: who keeps this accurate, and why would they bother to? ESL, a major esports organization, partnered with ReadyUP and listed its events on the platform. Read the full section →

  6. 06

    Every component was designed in all of its states before any screen used it. The clearest example is the fixture card: one card, four states (TBD → Upcoming → Ongoing → Finished). Read the full section →

  7. 07

    ReadyUP set out to do for esports what a great sports app does for traditional sports: make following the thing you love feel effortless. After launch the work stayed fan-driven: the community that grew around it ran user tests and pitched the features that went into the roadmap. Read the full section →

(02) The opportunity

A massive audience with no home base.

Esports rivals traditional sports in scale, yet the fan experience is held together with tabs and guesswork: tournament sites for schedules, Twitch and YouTube for streams, social feeds and Discord servers for results, a separate calendar to remember it all. The bigger the scene gets, the harder it is to follow.

We ran surveys and interviews with gamers and esports fans from all over the world, sourced through Discord and Reddit. When asked how they watched their team’s latest important match, nearly half of the fans had missed the stream: a quarter forgot the date and time, and a fifth never knew the team was playing in the first place. Half of the people interviewed say they watch every week, and more than half say they have been watching esports for over five years, so this is a committed audience losing matches to logistics. Almost eight in ten prefer watching with friends, which no schedule page serves at all.

Before ReadyUP

  • Schedules buried on organizer sites
  • Streams split across platforms
  • Results chased through social feeds
  • No reliable way to “never miss a match”

With ReadyUP

  • Every event, searchable in one place
  • Watch & track from a single hub
  • Follow teams; results come to you
  • Calendar sync + notifications

(03) The viewer’s voice

Grounded in how fans actually watch.

The research asked three plain questions: what pulls fans in, what frustrates them, and what would make them show up more. The recurring themes were simple: fans want one reliable source, they follow specific teams as much as the games themselves, and they don’t want to miss the moments that matter.

“Sometimes I find out my team played after the match is over. By the time I hear about it, I’ve already missed it.” esports fan, research

Two more things came up in nearly every conversation. Following is selective: fans keep up with the major events and lose interest in the rest of the competitions. And watching is social: friends set up watch parties on private Discord servers, because the Twitch chat at big events runs too fast to take part in, and the conversation there is chaotic and meme-focused Kappa, the Twitch emote rather than match-oriented. Both shaped the platform, the calendar and notifications for the first, the viewing-party tools and community features for the second.

“There are a lot of Dota 2 competitions throughout the year, but I can’t keep track of all of them and usually end up watching just the majors.” esports fan, research
“On large events the chat on Twitch is way too erratic to follow, so I hide it. It’s a pity, because I like to interact with others.” esports fan, research

That single frustration set the north star: nobody should miss the moment. ReadyUP had to turn following the esports scene from active effort into something the product does for you.

(04) The platform

Discover, track, watch, and belong.

The product is organised around what a fan actually does, end to end:

The ReadyUP hub, annotated: filters by game, genre, organizer and event type, organizer-set calls to action, add to calendar, search, notifications, and the event card
The hub · discover, filter, and track every event in one feed.
Discover

Find every event

Search, filter, and save tournaments across games and regions in one feed.
Track

Never miss a match

Follow teams, sync events to your calendar, and get push notifications before they start.
Watch

Streams in context

Jump to the live stream from the event itself, no tab-hunting.
Belong

Community & gamification

Viewing parties, fan–team interaction, and rewards for showing up.
Support

Tickets & merch

An integrated store for event tickets and team merchandise.
Organise

Viewing-party tools

Spin up a watch party and bring your people to the same match.

Find every event

Discovery is one search across events, teams, and organizers, with live filters for game, genre, and event type. The magnified detail shows an ESL One event surfacing straight from search.

ReadyUP search and filters, with a magnified detail of an ESL One event surfacing in the results
Find · one search across events, teams, and organizers.
A ReadyUP game page: Destiny 2, with where to buy, a description, and every event running on it
Where search lands · a game page.
A ReadyUP team page: Natus Vincere, with a live match, achievements, rosters per game, and the social feed
Where search lands · a team page.

Never miss a match

Following a team is one click on an event card; the match lands in your own calendar, and the reminder reaches your phone and your watch before it starts.

The add-to-calendar flow: an event card action ending in a phone calendar entry and a smartwatch reminder
Follow · from event card to calendar, phone, and watch.
The ReadyUP calendar: a week of tracked events, filtered by game, type and organizer, with export to any calendar
Track · a week of followed events, exportable to any calendar.

Join in

Tickets live on the event itself. The buy action routes to the organizer's ticket page, so going to a match starts in the same place as discovering it.

The tickets flow: a buy action on an event card routing to the organizer's ticket page on mobile
Join in · tickets bought from the event itself.

(05) Two sides of the platform

Fans on one side, the people who run the scene on the other.

A hub only works if the events are real and current. So ReadyUP is two-sided. Fans get the experience above; event organizers and esports orgs get an admin layer to publish events, manage teams and rosters, run widgets, and reach an audience that’s actually looking for them. ESL, a major esports organization, partnered with ReadyUP and listed its events on the platform.

AudienceWhat ReadyUP gives them
FansDiscover, track, and watch every event; follow teams; calendar sync; notifications; community.
Event organizersPublish and manage events, widgets, and content, in front of an engaged audience. (events at the scale of Riot, Valve, and Blizzard.)
Esports orgs / teamsManage teams, rosters, and social presence; reach and reward their fans. (the world of NaVi, Team Liquid, Fnatic, FaZe, Cloud9, G2.)

The Data API

The twelve services of the ReadyUP Data API: Data API, Admin Interface, Calendar, Events, CTA, Notifications, Search, Publishing, Syndication, Private Instance, Federated Syndication, Global Catalog Index
The Data API · twelve services partners build on, from calendar and notifications to syndication and private instances. Click for the full page.

The organizer side went further than a console. The ReadyUP Data API exposed the same domain model, collections, organizations, games, events and series, widgets and topics, so a partner could publish once and syndicate everywhere: their own site, mobile, social, a private instance, or another ReadyUP instance through federated syndication. Twelve services sat on top of it, from calendar and notifications to search, publishing and a global catalog index. ESL and Collegiate StarLeague ran their schedules on their own pages this way, with the ReadyUP cards underneath.

Collegiate StarLeague schedule page with ReadyUP event cards embedded, marked Powered by ReadyUP
Syndicated · the events widget on Collegiate StarLeague’s schedule page.
ESL Mobile Open page with ReadyUP event cards embedded, marked Powered by ReadyUP
Syndicated · the same widget on ESL Mobile Open.

The organizer console

Designing for two audiences at once kept the work honest. Every fan-facing feature had a matching question on the organizer side: who keeps this accurate, and why would they bother to? Calendar sync only works if organizers publish schedules early, so the editor asks for dates and streams up front and the widget pays them back with traffic to their own site. A follow button only works if rosters stay current, so rosters live on the team page the org already promotes. Notifications are only welcome when they come from the source, so organizers send them from the same console that lists the event. Every fan feature was something an organizer wanted too.

The organizer console: the events list an organizer works from, with filters, status and quick edit
The organizer console · the events list.
The event editor: cover and promo images, schedule, settings and a rich-text description
The organizer console · the editor behind every listing.
A ReadyUP event page: The International 2019, with details, participants, upcoming matches, streams, tickets and merchandise
The fan side of an organizer's event · fixtures, standings, streams, tickets, and merch in one place.

(06) Design system & identity

A bold, consistent system for a content-dense product.

ReadyUP spans a lot of surfaces: feeds, event pages, profiles, an admin console, hundreds of screens in all. Keeping that volume consistent came down to a strict component library on top of the dark identity: every component designed in all of its states before any screen used it.

The direction was tested before it was locked. The type system was built out three ways, in DM Sans, Montserrat, and Inter, and compared on real screens; several colour themes were developed far enough to compare properly, and blue won. Only the winning direction went into the component library.

The match-fixture system

The clearest example is the fixture card: it has to read instantly whatever state a match is in, so it was designed once, with four states:

The match fixture card from the component library, in its four states: TBD, Upcoming, Ongoing with a live signal, and Finished with the score
Fig. A · One fixture card, four states: TBD → Upcoming → Ongoing → Finished, with default and hover rows.

The same rule applied across the library, which kept new screens quick to assemble and hard to get wrong. The fixture cards also went out through the syndication program, so the same design, with slight colour changes, appeared on partner sites.

(07) The outcome

From a dozen tabs to one place to be a fan.

ReadyUP went live and was well received. ESL and Collegiate StarLeague came on board as partners and syndicated their schedules through the platform. After launch the work stayed fan-driven: an active Discord community formed around the product, ran user tests, and fed feature requests straight back into the roadmap. The community was managed by Greenskull, a well-known gaming streamer.

ReadyUP set out to do for esports what a great sports app does for traditional sports: make following the thing you love feel effortless, and like it all lives in one place.

2 min scan