02: Statsbomb

Football analytics UI platform design:


Started out as a popular football statistics and analytics blog. Overtime it built up a picture of the football landscape that they saw an opportunity to build a business based on football data and knowledge they had developed.

wireframe image

Client goal

Create online analytical platform that provides a way for customers to incorporate data into their workflow via visualisation and interactivity.

Design challenge

Competitor football analytical tools used on a daily basis are incredibly utilitarian, functional and dry. Often with little or no thought to the user experience or engaging visualisation of data for users who are not used to analysing data on a regular basis.

My role

Lead UI Designer working remotely

Our UI principles

The ethos was to use familiar layouts and UI patterns where possible to make the web app experience enjoyable and easy to use.

Our process

As the subject is so detailed and highly specific I created an initial wireframe to work from and collaborate on. Using google docs as a basic wire framing tool it allowed us as a team (me, product manager, dev and football analyst.) to bounce ideas off one another, openly edit the wireframes and leave notes until we felt happy to move onto the high fidelity design using sketch.

wireframe image

I used sketch to create a simple design system as we knew from the wireframes what UI patterns to use to help make up the first phase of the interface: radio buttons, sliders, drop down menus etc.

ui pattern

Once I had established a few designs in sketch of the interface, I would then link them together to create a simple clickable prototype in Invision. This gave us a platform to collaborate and add additional comments to refine the design before build started.

zoomed out sketch file

Designing visuals to show data

It was a great challenge working on data visualisations. I would either get a wireframe or a minimal viable coded product to play with. My approach to the visuals was like a new user who would needed to be able to understand them with a minimal learning curve as possible so they could utilise them for work.

Below is an example of a visualisation of the most popular spots a ball gets passed to around a pitch from a specific spot. We worked from a wireframe and did about five iterations of the UI design before we got a final design. We had to establish a hierarchy using larger / smaller circles, thicknesses of strokes with a clear colour code and which worked using red to reflect stats bomb brand colour as being the most active.

wireframe of data
final design of data
colour charts

Minimum viable product

A minimal viable product developed so Statsbomb could statt offering access to the service to get user feedback.

Images below: first image was the first iteration of the product. Last shot is how it looks today.

first MVP design
today current design

Results so far

Statsbomb is used today by well known UK and International football teams and scouts. Majoirty of sers have commented on how simple, easy-to-use it is to find teams or individual players stats regarding key games in the season.

It was such an enjoyable experience working on such unique product in a remotely collaborative way.