<aside> đź’ˇ
Building Statistics dashboard for StreamersClash League of Legends tournament in 5 days
In collaboration with Jiřà Vrba
</aside>
Streamersclash League of Legends tournament brings together the League of Legends Twitch community in the Czech Republic. The most popular streamers are chosen as captains and with their budget of 1000 Blue Essence get to buy smaller streamers to their team. Together they practice before the official tournament starts. Five days before the start of the tournament I got the idea of why not to create a statistics dashboard for the tournament bringing more information to the viewers? I got together with a friend and made it happen. We successfully made an admin dashboard through which the tournament organizers can input data and a website aligned with the organizer’s identity (font, colors) displaying all the data.
Data from the tournament used during an official Twitch stream
The first step was to make sure we understand what we want to display at our dashboard. We used Excalidraw for quick lo-fi prototype of which data we would like the display and how they are going to be entered in the admin part of the website.
Initial structure of the admin
The best way to input the data would be by using Riot API through which we could directly fetch our data. However, this tournament is played on Tournament Realm for which we would need a special API access, which is hardly given away to random developers. Tournament Realm is a server on which the biggest tournaments and leagues are played. They grant the player an account with all champions and skins. Most importantly the games played on this server grant an extremely low latency.
Because of this, all the data had to be manually placed through the admin part of the website. The organizers were very enthusiastic about our tool, so they wanted to give it a shot and decided that they are going to manually input the data
The admin part of the website, used to input the data, was not pretty, but functional. This form could have been improved a lot, because it would not alert the user which fields are mandatory. From UX point of view it is horrible at the moment. The form doesn’t store the data locally in any way so in case the website would be refreshed or the computer/mobile would lose signal, all the prepared data would be lost. This is a problem because this form is put together from different time frames in the game and it is important to have this form up the whole game.
Admin overview
The data collected were displayed on the organizer’s website https://streamersclash.cz/statistiky/ driving more traffic to website, the official stream and social media (Instagram).
Data embedded on the organizer’s website
Data used during the official stream
Instagram post including tournament statistics
Instagram post including tournament statistics