Real-Time Dashboards to Support eSports Spectating

This must have been my favorite project during my time at academia.

This article is also available on Medium.

The League of Legends and Counter-strike: Global Offensive dashboards in action! Read on to learn more.

My PhD was funded through multiple (European and smaller) projects, on topics such as Learning Analytics, Digital Humanities, and Unemployment. And they were interesting: I designed data visualizations on tabletops, desktop, and mobile, I researched the user’s perception and experience… all fun and games.

But no, not games.

I’ve always had a soft spot for games. I moved abroad for two years (and had my wife give up a great job) just so I could live the dream and be a game developer (a story for another time perhaps). And combining my research with games was something I had dreamed of for quite a while.

Alas, no funding to support this research. But life finds a way, right? ;)

Students to the Rescue

Students! Of course! Every year we had new Master in Engineering students working on both fun (and sometimes boring) Master thesis topics. So I introduced a new one: eSports dashboards to support spectators. The high paced action of different players across large battlefields is not easy to follow. So how could we help spectators get better insights in what was going on, real-time, during these hectic games played by professional gamers.

A huge success among students, but sadly enough spots were limited, and two students “won the lottery” (we have no say in the matter. It’s quite random): Hans Cauwenbergh and Bram Luycx.

And we got lucky. This turned out to be one of the best collaborations with students ever.

The Dashboards

Hans jumped on League of Legends, while Bram took on Counter-strike: Global Offensive. We designed and set up a couple of surveys on Reddit in order to get insights in spectators’ motivations and perceived usefulness for different statistics provided by the respective games to inform the design of the dashboards. And then, they were off!

Viewer preferences (167 responses for League of Legends, 596 for Counter-strike: Global Offensive)

League of Legends

a) Gold distribution, b) Damage dealt, c) Vulnerability.

The dashboard is the result of five iterations: two digital non-interactive designs, two interactive prototypes, and the final fully functioning prototype developed with React.js and D3.js. Iteration one to four were developed using the interface design tool Figma. 22 participants took part in the evaluations of the iterations of the prototypes.

The main view is split in three modules: Gold, Damage, and Vulnerability. All modules are continuously updated in real-time. Gold and Damage are quite obvious. Let me explain Vulnerability.

Vulnerability provides an indication of how vulnerable each player is. A simple linear equation combines the position disadvantage of the player to the rest of the team and/or enemies, current health and mana points, defensive statistics and summoner spells availability. These values are combined and visualized around the player icon as a summary indicator. This view lets spectators make predictions regarding the state of the game.

Hans also added an interesting Jungler visualisation:

Counter-strike: Global Offensive

a) Round progression, b) Economy button, c) Map button, d) Scoreboard, e) Money Distribution, f) Average Damage per Round

This dashboard is the result of three iterations: a paper prototype, a non-interactive digital prototype designed using Figma, and a fully functioning prototype developed with React.js and D3.js. 14 participants took part in the evaluations of the iterations. The dashboard consists of Round Progression, Economy, Map, Scoreboard, Money Distribution, and Average Damage per Round.

Results

Through semi-structured interviews and eye-tracking we managed to get further insights into the perception and experience of participants spectating these eSports games while using our dashboards. It resulted in an interesting list of design goals for spectator dashboards that we published and presented at CHI PLAY 2018 in Melbourne, Australia.

LoL and CS:GO eye tracking results from each participant after the evaluation. The attention heatmap indicates the areas of interest where participants focused more during the whole match.

I’ll refrain from turning this digestible blog post into a long scientific article. But if you are interested in the guidelines, you can find the article here. Or go through the slides below!

If there is enough interest, I’ll post a summary of the guidelines on Medium ;) Just let me know in the comments!

Hans (full-time) and I (freelance part-time) haven’t stopped here though and are working for GRID eSports Gmbh where a lot of eSports data magic is happening!

Next to that, I’m a Freelance Data Visualisation Experience Designer/Adviser. I’m for hire, so if you have any dataviz needs, send me a message!