FIFA 23 Ultimate Team Redesign
Enhancing the Player Substitution Experience
(2 Days)
Photoshop
The Challenge
Usability evaluation and redesign
As soon as I received the design challenge, my mind immediately went to my boyfriend's constant complaints about the headaches he experiences when playing FIFA 23 Ultimate Team mode.
For the past eight months, he's been grappling with the frustrations of substitute players, and this challenge presents the perfect opportunity tocome up with creative solutions for others who are facing the same problem. Let's put our heads together and dive in!
The Background
Image source: https://www.youtube.com/watch?v=cgDlmvU2sA4&ab_channel=Throneful
FIFA's Ultimate Team(FUT) is one of the most popular game modes, where players can build their ideal team from thousands of football players worldwide by selecting virtual cards that represent players and managers.
It's not just about having top-rated players. In FUT, how your players relate based on club, league, and nationality affects your team's chemistry. A higher chemistry boosts players' in-game performances. Strategically aligning players that have natural links (like being from the same country or club) is key to a successful FUT squad.
Image source: https://www.eurogamer.net/fifa-23-chemistry-changes-team-individual-9041
The User Interface
The Squad Screen is where you assemble and manage your active team, the eleven players who will represent you on the pitch during matches.
The Club Screen is the behind-the-scenes inventory of all your assets in FUT. It's your collection vault, storing every card you've acquired.
Yes! As you may have already noticed, there is NO Team Chemistry Chart on the club screen. The only indication of chemistry is an overall score located at the bottom of the players’ stats chart(which is also oddly moved from the right side of the screen in the previous Squad screen to the left).Things can get very frustrating when you want to substitute multiple players from the club - you have to go back and forth between the squad screen and the club screen to view the Team Chemistry Chart, which makes the substitution experience frustratingly long.
Design Decision 1- Constancy Across Screens
A crucial aspect of the design is to maintain consistency throughout all screens. To achieve this, I added the Team Chemistry on the left side of the Club screen and placed the players' stats on the right side - which is the same layout used on the Squad screen. The consistency will help reduce the amount of information players need to remember when switching between screens.
Design Decision 2- Dynamic Card Sizing
In order to fit the Team Chemistry Chart onto the Club screen, I had to create additional UI space. I considered two options:
(1) shrinking the size of the cards
(2) reducing the number of cards on the screen
But why not offer both options? Option 1 lets players view more cards at once, while Option 2 allows players to see the card design and view more details.
However, the challenge here is how do I let users know that they can switch between views?
Exploration 1- Navigation Through A Slider
I was inspired by my camera's zoom-in and zoom-out buttons, which allow me to view photos in different grid views such as 2x3, 4x3, and 7x6. As the photos become smaller, the slider sizes become bigger, indicating different views. Therefore, my first solution was to add a slider bar to the Club screen to indicate the different grid views.
Exploration 2- Navigation Through Toggle
Currently, players can switch between list view and grid view by toggling the L3 button on PS5. So another solution would be to add a "toggle small grid view" option to the L3. This would allow players to switch between three different views: large grid view, small grid view, and list view.
Design Decision 3- Navigation Through Toggle
After weighing the options, I decided to go with option 2 because the slider could potentially cause control conflicts with the new team chemistry chart slider that I added to the club screen.
Design Decision 4 - Simplifying Attribute Comparison
Organizing the list view was challenging as it was quite long, leaving limited space on the UI. Therefore, I had to make a trade-off decision by removing the players' attribute comparison chart since all the attributes were already listed on the screen, but the team chemistry chart was not.
Ultimately, I fixed and highlighted the selected player's stats at the top of the list and displayed the stats differences when users hover over the other players on the list.
This way, users can effortlessly compare 2 players stats and team chemistry changes caused by substitutions.
The Final LOFI Wireframes
Outcome
“ Unlike PC games where I can use the mouse to navigate the UI, when I’m on the console, I prefer to finish actions with minimal input. With the new design, I have found that it’s more informative and allows for more efficient substitution decisions with minimal input! ”
Reflection
Console players appreciate efficient control schemes. The goal should always be to achieve tasks with the least number of inputs.
The initial problems with the FIFA 23 FUT substitution experience highlighted how even in a well-established franchise, there can still be oversights that affect the user experience.
Enhancing the user experience in games goes beyond just aesthetics! It's about understanding user pain points, iterating on solutions, and implementing changes that make gameplay smoother and more enjoyable.
Thanks for scrolling! Let's get in touch ;)
Let's work together and create something amazing!