StateSpace – empowering proPlayers with stats, analytics and AI

The Tooploox team has built a powerful analytics tool that enables both pro and casual players to analyze their performance using traditional methods and AI algorithms. Having cherry-picked skills to be improved and challenges to tackle, the tool enables the player to recreate various scenarios using Aim Lab software.

This popularity has resulted in pro players earning millions of dollars and gaining a cult following comparable to traditional athletes. Most popular players earn money by participating in competitions, conducting streams, and accepting sponsorships and ads. 

Yet the ecosystem surrounding e-sports is not as mature as in traditional sports. Nearly every traditional discipline is surrounded by specialists that gather data, analyze it and use the outcomes to boost the performance of the player. Yet digital sports, despite the potential to gather mind-boggling amounts of data, lacked appropriate frameworks. 

StateSpace aimed to change that.

StateSpace is a partner of Riot Games, the gaming company behind record-breaking e-sport games like League of Legends (LoL) and Valorant. Both titles enjoy vibrant e-sport scenes with tournaments and pro players enjoying celebrity status. 

Both League of Legends and Valorant are free-to-play titles encouraging thousands of aspiring champions to find their way to the top. By making use of their reflexes, skills, and ability to memorize complex maps, new players can enter the world of professional gaming. 

On the other hand, though, there are thousands of aspiring champions who would benefit from some skill polishing in a more organized manner. Casual players would also have more fun not being killed immediately after the match starts. 

Inviting more fun and spotting the unpolished gems among the gaming crowd was the key motivation for StateSpace to build a platform that would support rising stars in making their style of play shine. And that’s where the Tooploox team entered the game.

The Tooploox team was asked to deliver a product basically from scratch. The starting point was the potential to gather an immense amount of data about matches and the results of particular players. Thus, the data gathering started, and the service based on this data made its way onto the market.

Data Engineering 

The whole product is heavily data-based. The system collects information about the performance of a player who connects their Riot account with their personal account. This allows the system to run regular queries via API about their gaming performance. 

This permitted our team to build a system that collects multiple data points, for instance:

The core of the system is a data processing system based on Clickhouse, an open-source column-oriented database that allows a user to generate reports from data using SQL queries in real-time. The technology aims to generate reports from information that is also constantly changing in time – gaming data harvested during matches (including ongoing ones) is the perfect use case for it. 

The raw data is later processed to display the desired information using tables, heatmaps, and graphs, so the team or individual can gain overall information about performance at first glance. When a more detailed view is needed, one can analyze the tabular data or filter through them at will to mine for greater insights.

Run it back!

The gathered data is prepared in a way that enables one to analyze particular situations during gameplay. These may include deaths, kills, or planting a bomb, just to name a few. 

The platform is closely linked with Aim Lab, a StateSpace key product that serves as a training sandbox for online players.

What is Aim Lab

Aim Lab can be compared to a virtual training field, where players, be they pros or amateurs, can improve their skills and learn new ones in playing online shooting games like Valorant. The game is free to play and comes with a set of exercises that helps a player to focus and train. 

It can be easily compared to warm-ups and various workouts done by sports professionals that aim to improve their overall performance without engaging the whole team or launching a full-fledged game. 

At will, the user can send a request to recreate a particular situation (death, kill, etc.) in Aim Lab, replay it, and analyze the situation to get better results. It can be used to prepare for similar encounters in the future or to perfect a particularly brilliant move to use more frequently.

Design system

With a sophisticated back-end in place, the company was in need of an equally awesome front-end that would deliver results straight to the customer. To make the work on the system smoother and more comfortable for all the parties involved, the team started with delivering a design system. 

The design system is a collection of reusable components and rules governing how they are put together. To create such a thing, the design and development teams need to work closely and be perfectly aligned. These include:

The design was further enriched with dedicated components, including a scalable table that fits into different screen sizes and resolutions. Also, the team delivered interactive elements like information about events during a match or highlights of a particular round, which also serves as navigational elements to make browsing the gathered information easier. 

Having the building blocks like the ones listed above in place, the development team could deliver far less code and make it far less complicated. For example, every repeatable parameter of the button (color, size, shape) can be described once for the whole product instead of making every button different and having separate parameters. 

The design system facilitated all the front-end work done later on, resulting in a huge time and resource saver. 

UX design

The team started with competition benchmarking and gathering knowledge and best practices from competing platforms. Also, the design was delivered to fit both the business needs of the platform and to find a complimentary place in the rest of the company’s products in order to deliver a truly seamless experience.   

The Tooploox team decided to challenge the status quo by delivering data using more visual means than in standard approaches. The players can not only browse their data using tables and filters but also see a summary in graphical form. Competitive platforms force users to read their statistics and numbers carefully every time, while our designs provide knowledge at a single glance. 

To make the experience smooth and pleasant, the team has come up with not only tables and graphs but also heatmaps as a tool to show particular events, like deaths or headshots, which take place during a match.

Overwolf 

The platform is available both as a web service and as an overlay window seen during the game experience by using Overwolf technology. 

The Overwolf platform enables developers and users to enrich their gaming experience by viewing a floating window during the game that delivers desired content. In this particular case, the content was player-and-match statistics that one could track in real-time without the need to switch between windows. 

Thus, one could adjust their behavior in real-time while the full-power analysis remained available in the web service. 

AI support

The last piece of the puzzle was the Artificial Intelligence support provided by the Tooploox team. As mentioned above, the match (or the whole history of a particular user’s games) is described by a tremendous amount of data harvested by the platform. It is possible to analyze it manually, yet this requires a great deal of time and labor. 

The Tooploox team has delivered an algorithm that gnaws through all the data and delivers a graph that shows the winning chances of the user and the user’s team. The algorithm analyzes data regarding the weapon of choice of each team member, their actions, and deaths to calculate the chances of winning a game or a particular round. The model predicted results with an accuracy of up to 90%. This has come as a superior tool to spot winning combinations and game-changers alike during matches. 

The project combined the experience and skills of a Tooploox team of multiple specializations – back end, front end, design, and AI. Delivering a product in the gaming domain was also an opportunity to challenge the status quo and provide gamers and their teams with convenient and pleasant-to-use tools. 

Gaming is a thriving industry that brings great entertainment both for individuals playing in their homes and as an e-sport event. With this product, the pleasure of getting and polishing new skills is available to a wider audience, with no need to do it manually.