02: Statsbomb
Football analytics UI platform design:
About
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.
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.
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.
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.
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.
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.
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.