Designing a Pokédex for Football Players
Part 1 in a series on how I’m designing a Companion App for Sports Interactive’s Football Manager
Hi! I’m Lissa and I friggin’ love football. I also dig playing Football Manager. On top of that, I’m a designer re-imagining the game’s awesome (and massive) amount of information as a mobile companion app.
Other parts in this series:
OK, but why?
First things first, let me tell you why the Football Manager database is awesome and important. No, better yet, just read what Sky Sports (who are currently using the FM database to support their football stories) are saying:
The Football Manager database is ‘the most comprehensive collection of data relating to professional football in the world’.
Over 1,300 scouts have analysed more than 600,000 players and coaching staff. There are at least 250 attributes per player, detailing everything from their ability to tuck away a one-on-one or pull off a reflex save.
The database is global, too — roughly 2,250 clubs from 116 divisions in 51 countries are fully researched.
The information powers the Football Manager computer game — but also provides a thorough statistical analysis of players across the world.
Source: Sky Sports.
So here we have a video game database so complete and realistic that it’s being used to back up news stories about football worldwide. And anyone who has purchased the Football Manager games has complete access to it, too. It has an astounding level of detail and accuracy.
So you can see why visualizing this information in an easy and convenient way would be interesting, not only for Football Manager players, but for most people interested in football.
But accessing information through the game implies in booting it up, waiting for it to load, loading a save or creating a new one, and unless you’re on your way to actually playing it, that’s not very effective.
I mean, you’re in the pub with the lads trying to make the point of Hazard being clearly faster than Raheem Sterling and you need that kind of information ASAP or the next round is on you, because that’s the kind of bet you make.
What, Who, Why
What will it be?
A mobile app that displays football players and clubs information, using data from the FM database. It needs to be easy to use and beautifully designed.
Who would use it?
- Football Manager fans
- Fantasy Football players
- People who like football in general
Why would they use it?
- It’s a quick and easy reference for accurate and real attributes;
- To create shortlists for future reference, be it for FM or Fantasy Football, or just because;
- It’s basically a Pokédex for Football Players.
Initial Research
I haven’t found any app with the exact same functionalities, so I decided to try and find apps of the same general category (football), and apps that had some sort of data visualization focusing on stats and attributes. I also did my research on console games, as well as interface concepts from Behance. I’ll finish off with an overview of how the Football Manager games present their information.
Apps from the App Store:
Dribble: Mobile draft fantasy football game, with focus on betting and competition between friends. The only player statistics presented are real stats from the current Premier League season. It has a very sharp and clear, minimalist design which I really liked.
BS LiveScore: It’s an app that displays live football scores from many different leagues all over the world. It does have a player view that shows a brief profile and their statistics from each competition played, as well as news and player history. It looks crowded and busy, the user flow is inconsistent and it’s filled with ads, making the experience not so pleasant.
Arsenal: The Arsenal app displays scores, the Premier League table, news and various information about the team. The player profile screen shows an in-depth profile and bio, a summary for the player’s performance in every past month, and statistics on every appearance for the team.
FC Barcelona: Mobile companion app for the FC Barcelona team, with news, scores, calendar, and other pertinent information about the team. Because it’s licensed, it’s heavy on pictures and branding. The player view shows a small Technical Profile with description and links to the player’s social networks. It also shows the player’s stats in a more interesting way, using charts to show games won vs. lost and number of minutes played.
FIFA 16 Companion: The FIFA 16 Companion app is the only mobile app that displays fictional attributes. It serves as a companion to the Console or PC version of the game, serving as a manager to the FIFA Ultimate TEAM. The player attribute view displays the attributes with a badge, just like the game, and uses the screen space mostly for the actions around that player.
Console Games:
FIFA 16: The player attributes in FIFA are very similar to those in Football Manager, and overall the presentation is the same, using tables to display numerical attributes. What I like the most about the latest versions of the FIFA interface is how they managed to display useful information in a way that’s fun and interesting.
PES 16: I don’t own the game, so I had to resort to Google Images, which didn’t really help. What I managed to find was some Player Info screens for the Create / Edit player and what I’m guessing is the Player Info at the Squad menu. The player info screen has different graphics for some of the player attributes (such as which foot they use, area of play and a radar chart) but mostly uses tables to display the numerical attributes.
Behance:
FC Olympiacos iOS App: The Olympiacos App concept design is very much like the Barcelona app, showing team news, scores, and the squad. Since the app hasn’t been developed yet, Behance was the only source for information and images. There seems to be at least a squad view where the user can see the player’s stats and attributes. One cool feature is that it displays the number of people who “liked” the player.
FIFA Interface Concept: This interface recreation is much simpler and cleaner than the usual FIFA interface, but doesn’t show any specific Player Info screen, unfortunately. It displays some statistics in the proposed Career Dashboard. The overall look and feel, as well as the icons, are very appealing and would translate well to a mobile context.
FIFA Legend Web App: This proposed project is intended to be an encyclopedia of sorts about past and present legendary football players. It does have an attributes page, that shows statistics and players skills. The search page is also interestingly designed. It also displays the number of people who “liked” the player, and the overall look and feel of the app seems sharp and well thought.
Football Manager 2015 and 2016:
The main inspiration and reference for this project is the Football Manager series by Sports Interactive. I own FM15 for PC and Mobile, so my focus will be on that game, but I also looked for images from FM16 that were available online. The interface hasn’t changed that much when it comes to displaying player attributes, though.
What I’m looking for here is how they chose to display the information, using tables, graphs, pictures and illustrations. The game is very conservative in the way the interface is presented. I assume this is because the information is dense and detailed, and needs to be clear and easy to understand. There is indeed a lot of room for improvement but overall the interface serves its purpose and has been completely redesigned over the last few years, and it’s already a lot better than before.
But my project isn’t about the game’s UI anyway, it’s about how to translate the data to a mobile context, making it not only work as a mobile app, but also be interesting to look at, beautiful to use, and, more importantly, fun.
Next Step
My next step will be figuring out what kind of information I’ll be showing in the app, and what features it will have. I’ll be documenting the entire process here on Medium. Stay tuned, and thanks for reading!
Disclaimer: I’m in no way affiliated to Sports Interactive. This is a personal project and a design concept. Football Manager is very dear to my heart and I love data visualization design, so why not study both at the same time?
Find me (and follow me!) on Behance: http://behance.net/capeleto
