Riot Crystal Ball
Riot Games
Feeling mystical? Predict what achievements or moments will happen, tracking stats as the League of Legends World Championship 2026 evolves in the Crystal Ball!
Purpose
The goal of this project was to provide users with stats that help them keep track of predictions they made as the tournament goes on. We partnered with Riot Games to give them the best access and insights through our data warehouse as we collect this directly from the tournament as it happens, format them, and ingest them into our data feed.
Responsibilities
Riot Crystal Ball was first handed to Grid for MSI 2026. Here we initially did an embedded widget into lolesports.com, which worked phenomenally and set us up to advance our widget section. See here for more on that.
But Crystal Ball’s stats view needed to evolve slightly. So we did three things:
- Create a lab where a customer could configure their Crystal Ball.
- Advance the backend to provide a clear rubric on how to load questions into future iterations of the stats viewer
- Update the look and feel of the old Crystal Ball
To start with, the backend had a few changes. We would parse questions through a google sheets project, where we would field the questions, link them to the correct data source, and validate whether the question had been resolved.
Our API would evolve to support this setup, but we needed a centralized system to bring everything together for a specific tournament. Introducing “Catalogs”, which contained tournament information and tournament generic statistics, as well as which questions were introduced and bound to which question stat document. All of these would be uploaded to our CDN automatically, updating the existing json files as new data would be fielded in, and providing them to a consumer.
To prepare the consumer, I’d built an integration lab. Here we’d determine the data source, the environment we’re working in, the catalog we need to look for, any branding related adjustments or overrides. I set up Unleash as a feature flag to handle any emergency overrides, which the client could also parse through the config itself, as well as to remotely close the widget interface in case of emergency bugs. The integration lab also configured how the client integrated the iframe, so that it serves the right use case and communicates the right information.
After all configuration is done, the output eventually just needs to be a copy and pasteable widget code snippet that a client can paste somewhere, and out of the box the widget should run!
The lab had several different template UI themes, as well as fixture data to mock stats. Each component had a lot of reusable tools, including a table that formats content without a strong dependency on a data structure.
All this was done in the span of just two weeks, given a strict deadline before the Play Ins phase of the championship began. It also overwrote the look and feel of MSI to keep things consistent without breaking the content.