Introduction
One of my big passions is football, and FC Barcelona in particular is the team I follow and support dearly. Over the last few years, professional football from a fan perspective has become a lot more professional with the introduction of statistics like expected goals, expected assists, ball progressions, ball recuperations, etc.
Football statistics are on the rise and I was lucky enough to find a group of like minded people. So we set ourselves the challenge of helping more people to get easy access to, understand and use player statistics in football discussions.
The project was just getting started when I was brought in as the designer. The core group working on it consisted of 5 people:
- A project manager
- A product designer (me)
- 2 junior developers
- 1 senior developer
The senior developer acted mostly as a troubleshooter for the developers and a soundboard for me and the project manager. This was a continuous project that went through multiple product iterations, with a focus on UX research.
Despite never leaving beta, the product was used over 10,000 times by hundreds of people strictly by word-of-mouth. It was shut down mid-August 2023.
Problems
This was a bigger success than we expected, because the big problem with player statistics is that they are difficult to understand and filter through.
Football is a tactical game and not only do different positions have different priorities when it comes to their attributes, in different tactical setups the managers can require players in similar positions to do completely different things.
This means it’s easy to get overwhelmed by all the statistics and filtering out the ones you need. And once you’ve done that, you still have to interpret these statistics correctly.
Opportunity & Goals
The opportunity here lies in making these statistics easily accessible. This is a layered challenge and opportunity because accessible here means the statistics should be relevant, clear and easy to understand for everyone who looks at them.
Not only do different positions have different priorities when it comes to their attributes, in different tactical setups the managers can require players in similar positions to do completely different things.
On top of that, they should also allow for a clear and easy comparison between players, which brings its own set of challenges.
Card Sorting, Card Sorting and More Card Sorting
And one of the quickest and easiest ways to get clarity is via card sorting. A lot of it.
A competitive analysis of the most popular sources for football statistics on the internet — think Opta and FBref — resulted in a wide variety of statistics and a first round of card sorting grouped these in 3 categories:
- Ball Progressions (on-the-ball actions)
- Chances/finishing
- Defensive actions
The remaining attributes were grouped in a fourth category. These include general stats in passes and pass completion, but also progressive passes received and turnovers.
The next step was picking the right stats for the right players. And this required — you guessed that right — more card sorting. We settled on 3 presets that were automatically applied to players based on their position: forwards, midfielders and defenders.
User Flow, Wireframes & MVP
We got to know each other in an FC Barcelona and football themed discord server so it was an easy decision to start the development as a discord bot for the members of the server to use.
The developers came up with a user flow that had users go to a couple of dropdown menus to find the player and statistics they were looking for.
This comes across counter intuitive at first because you find players by going through their current team and you can then go back in time to previous seasons when they were potentially playing for another team.
This was done because not all stats are available for all leagues. So the dropdown menu to select the season only shows the available seasons for a player once the player is selected.
If players opted to start a comparison rather than a profile plot, they just had to go through the same flow to select a second player twice before an image was created.
Statistics should be relevant, clear and easy to understand for everyone who looks at them.
All that was left to do now was deciding how we would bring these statistics to the users. We went through a lot of the popular ways to visualize stats, like bar graphs and tables, before settling on a radar-like style that gives immediate visual data and a table for a more in-depth look at the statistics.
And then it was finally time to start testing an MVP. We started out by setting up a private discord channel in the server and inviting 8 people to test the bot out. Based on their feedback, we adjusted some of the stats, opened the bot to the entire server, and started thinking about product updates and new features.
For the MVP, we were limited by the developers knowledge about and interest in the visual representation so the first version wasn’t pretty, but it worked. And it allowed us to move forward.
Iterative Design and Product Vision
Opening the bot to the entire server meant rapid growth. One of the first things we did was add a QR code to the radars with an invite to the discord server. A very simple, yet very effective addition that saw hundreds of people join the server.
This also meant a lot more feedback. And one of the things that became clear almost immediately is that running this via a discord bot was really holding the product back. Especially from a UX point of view.
So we moved away from a discord bot to a web application. This allowed us to really start expanding the product. And the first thing we introduced were custom radars where people could select the attributes they wanted.
This was a direct response to the limited presets we started out with and a much requested feature. We didn’t lose track of the accessibility for new users though, so player attributes were filled in based on our presets and could then be adjusted at will.
Centre backs aren’t fullbacks, and you have multiple midfield profiles that prioritise different aspects to their game. Strikers aren’t wingers. Wingers can stay wide or cut inside. And then you have supporting strikers too.
And all these roles prioritize different attributes.
By the time we stopped working on the product, radars looked like this. We paid a lot of attention to the details to make a visually appealing product. Smooth corners, spacing, minimal design for minimal distractions. Even the QR code used a dotted pattern because hey, a football is round. We were very pleased with the result and we like to think people were too.
Over 10,000 radars were plotted by hundreds of users. But most of the people on the team couldn’t find the time anymore to develop the product further so when the server got rebooted, we decided to pull the plug.
One of the few features left on the roadmap was re-introducing presets, but better this time. An improved search interface to find the right player(s) and the introduction of stats for goalkeeper were the other features left on our roadmap.
Other than that, it was mostly visual refinements like adaptable color schemes that were based on the selected player’s team, or updated typography in the tables for player comparisons.
Conclusion
This was an amazing experience. The feeling of building a product, seeing it catch on and grow, is something I will never forget. This has formed me and confirmed my entrepreneurial mindset. This experience is the reason I decided to become a freelance product designer.
It also gave me an opportunity to work in an international, fully remote team and discover the things that work best for me.
This included things like synchronous and async communications, including a lot of Loom videos detailing my designs. But also prioritizing the right things.
I learned a lot, and I take all of that with me in my journey as a digital product designer.