A redesign of the FIFA Fantasy app, a competition between millions of football fans during the 2018 World Cup.
One million users were religiously on the FIFA World Cup Fantasy app every day this month. We created teams, transferred players, and competed with our beloved coworkers for the best playing XI on the fields of Russia.
As a product designer, I noticed a few app interactions that could improve while building my team. I’ll focus on the “Manage Team” page. This screen is the heart of the game — where you add, remove, substitute, and transfer players who are still in the tournament.
How Fantasy works 👋
Just before every round in the World Cup, I’m a Fantasy coach who gets to select and drop players from my team. Players can be from any country that’s still in the tournament, and should fit in my formation. Based on how individual players perform, their Fantasy “avatar” will get points.
The catch to this entire system is beautiful — play Fantasy, watch matches, and perform better in Fantasy based on how the guys are performing on the pitch. A flywheel to blow up World Cup engagement 🏆
What’s gud 😎
Let’s start with what’s working well on the Fantasy app.
- You can go back and view formations for all previous rounds easily with the tabbed group at the top. It can help to see a player’s performance over time.
- Players on the field are symbolized by their jersey, last name, and next match. Simple and sufficient. The next match is important because if they are facing a tough opponent, it’s better they are replaced by someone who is playing a weaker team (better probability to rack up points).
- Captain is clearly marked with a “C.” Easy to catch the eye. Captain is important because his points in the team are doubled.
- Substituting a player is done with drag-and-drop. You can only substitute in a player that plays the same position. Eligible players are highlighted during the drag functionality. In this example, Lloris (goalie) can only substitute in for Courtois (another goalie).
- Useful push notifications from the app when a transfer deadline is coming and the points table is updated.
What could be better 🕵️
1. Make it easier to browse and transfer players
After every round in the tournament, my job is to decide which players to keep on the field and which ones to replace (i.e. transfer).
Browse performance of existing players
Good players stay, underperforming players go. In order to figure out how each of my players did, it would be great to quickly tap on each player’s jersey and see how many points he accumulated in the completed round.
In the current UI, tapping on a player opens a pop-up that gives me player performance, option to remove player, or make him captain. Each pop-up has to be opened and closed, making it tedious to review my previous rounds. It should be easier to take actions on a player.
Transfer new players
When I am exploring what players to buy, it’s important to have the existing playing XI on the field in front of me. The goal is to create the most comprehensive team, and while picking new players I need to have a holistic view of to field. The current UI opens a list view where I can see the top players in a certain position followed by a button to “View all.” The field is completely hidden. As a user, I end up going back and forth between the list of players and the field to make strategic decisions.
Below is my proposal for replacing or adding a player on the field with potential candidates. I stuck with the idea of showing top players first, because I’m more likely to choose them as the tournament goes on. Choice reduces as teams get eliminated and budgets are slightly increased.
2. Use better hierarchy for the buttons on-screen
There are 5 actionable buttons on the screen, each doing different things. When I first opened the fantasy app, I thought they were labels! I had to tap on a button to understand that the app styling was being applied. “Make Transfers” is probably the most important button, while “Share” is least.
Also, there are two different states to this screen. One state is when I’m just viewing the team and making substitutions amongst the players. The second state is when I’m editing the team and making transfers. Different buttons should have prominence in these two states.
In my proposed redesign, I made two big changes. I flipped the colors of the primary and secondary buttons, and I changed buttons based on the state of the page (default vs. transfer state).
Why did I flip colors of primary and secondary buttons? The white background has more contrast and greater prominence on the screen, making it a better primary button. “Make Transfers” and “Exit Transfers” stand out now. The gold background color actually looks more subdued, and I’m using it for secondary buttons like “Share.”
3. Make confirmation pop-ups more informative
Maximum Captain and Bench Boost — These features can only be used once in the entire tournament. It’s not clear on the confirmation message. And unless I carefully read the rules of the game, I didn’t know what these features do! I think it’s useful to 1) give the user a tidbit about what the feature, and 2) tell them that it can only be used once in the tournament.
In the end, fantasy became a reality ❤️
Using the FIFA Fantasy app during the World Cup was exciting and interesting. I participated in my company’s Fantasy League (and came second!). I was able to analyze the usability of the app as a new and existing user.
To top it all off, I flew to Russia (pronounced Rossiya) and lived out my World Cup dream by watching two live matches! I watched a round of 16 match and a quarterfinal match. I visited the beautiful cities of St. Petersburg, Moscow, Sochi, and Kazan. Loved the country, loved the experience, and loved the football! Vive la France 🇫🇷