Design and User Interface in StatsBomb IQ

statsbombIQ update

Our StatsBomb IQ analytics platform is designed for business users and customers include everyone from owners to managers, through coaches, and analytics and recruitment teams. However, we also have broader business customers and the incredibly important consumers and fans who gobble up our work on twitter, Instagram and via the StatsBomb blog.

I spent many years working inside b2c operations with a huge focus on beautifully designed websites and online applications for customers, yet the business tools that football teams use on a daily basis are incredibly utilitarian and functional with little-to-no thought to the user experience or the lack of delight in using the products. I’m referring to likes of SAP, Atlassian, IBM’s Coremetrics… even Google Analytics. This is changing as businesses place more importance on user experience for their teams - the suite of Adobe tools and modern solutions like Hybris have improved this - but ‘back end’ tools are still a far cry from the slick, intuitive, beautiful experiences that are created for consumers.

At StatsBomb, we want every customer interaction with our product to be exciting, easy, visually stimulating and inviting. We want all our customers, whether they are businesses or consumers or both, to not only rely on our product for useful football analytics, but we want the experience to be enjoyable so that customers use it because they want to.

So what have we done that is different? Here are the key design/UI principles that we have tested and iterated over the last year and have enabled us to develop a product that we are very proud of and our customers love.

1 Use layouts that everyone is comfortable and familiar with.

Think Instagram, Twitter, Pinterest, Amazon - these global platforms have a huge budget for Design and UI and people are used to them. Regardless of your age, occupation, culture, or location in the world, chances are you will be familiar with these products and experiences.

Here is our latest team dashboard…instantly recognisable screen and menu layout and completely intuitive that you click on a tile to get the detailed/in-depth view.

"Team dashboard"

2 Make sure the analytics and datavis takes up the majority of screen space, not menus and navigation

"Shot map"

We spend a lot of time thinking about what filters need to be hidden/collapsed and what needs to be visible for ease of use. These considerations are important, and contribute towards a slick interaction.

3 Think hard about Colour.

This is incredibly important and probably the thing we are argue about the most when designing new features! Colour is important, and can make or break a product experience. The StatsBomb brand primary colour is a bold red. This is of course intentional - our brand is strong, bold, deliberate and deserves attention. In many of our data visualisations, the Statsbomb red is the ultimate goal or the very best, in whatever measure you are looking at - in passing for example….

"Engine Room"

However, often in Analytics, especially in dashboards (think traffic lights), red is used as a warning/danger/or typically a loss. Whilst we intentionally use the StatsBomb red as ‘the best’ in so many places, we also realise that there are some ingrained relationships that people have with colour that we can’t and don’t want to change. So, here is our new dashboard feature showing fixture results - red in this case is a loss - of course, this is what the football world expects. But it’s not the same red as the StatsBomb red - a subtle yet important decision.

"Fixtures List"

4 Do not ever lose sight of what your user is trying to do.

What filters do they need access to in each chart? What features need to be hidden in some views to enable the user to focus exactly on the task at hand. Take our player radars for example. When you’re looking at a single player, or team, there are so many filters you can play with to get exactly the data you are interested in.

"Radar overlay"

However, when you are comparing two players side by side, the only thing you care about is what is similar/difference between these two players. By changing the colours in the radar and isolating everything else on the screen, the Compare function allows to do one thing only - Compare!

"Compare Radars"

5 Be incredibly pinickity about visual clues and icons

We spent a lot of time making sure a cross, a back arrow or an expand/collapse icon is intuitive, has the action that you’d expect it to have AND that we don’t have confusing clues or multiple icons that do the same thing.

This principle extends all the way from header menus and navigation to individual filters and options on a data visualisation. For example, we carefully decide where to use a switch, a slider or a drop down menu vs radio buttons. Our platform includes all of these interactions and every single one is deliberate and depends on what the user needs to do in each case, whilst retaining consistency for ease of use.

"Filters UI"

In our first year, the IQ platform has undergone 3 main upgrades in user experience and we are constantly making improvements. We know it won’t stop here - a great product requires continuous improvement and we are genuinely excited to develop our analytics and our data visualisations!

If you have any feedback or would like to find out more about our analytics platform, StatsBomb IQ, please do get in touch….

Article by Charlotte Randall