Back

Feature Design, UI + UX

FIFA 22: Competitive Modes Refresh

Division Rivals is an online seasonal competition with a skill-driven rank system that can be played Solo or Co-Op. Win matches to climb the ladder, increasing your Rank and Division so you can challenge for better rewards. To get access to FUT Champions, you'll continue to earn Champions Qualification Points in Division Rivals. Once you've accumulated enough points, you'll be automatically entered into the Play-Offs, and your Champions run for that entry can begin when you are ready to play.

Problem

The current UI redesign for game modes introduces innovative gameplay mechanics, enabling players to advance through ranks and earn rewards based on their performance. However, the integration of various elements such as rank ladder, rewards, and qualification points has resulted in an overloaded user interface. This inundation of information presents a challenge as it overwhelms players with a multitude of tiles displaying diverse data simultaneously, potentially hindering their ability to navigate and engage with the system effectively.

Role

As an Experience Designer in EA Sports' FIFA 22 Ultimate Team, my primary role involved designing, documenting, and implementing various User Interfaces and elements to enhance the overall user experience. Notable features I worked on was the redesign of Division Rivals and FUT Champions. Throughout the development cycle, I worked closely and collaboratively with other professionals, including Producers, Software Engineers, UX designers, and other experts, to ensure seamless integration and delivery of the final product. By leveraging my expertise and collaborating with the team, we were able to create intuitive and visually appealing interfaces that met the needs of our users while aligning with the game's design and development goals.

Solution

In order to prevent information overload to players, the tiles were scaled down, and the most important information are highlighted in a bigger preview panel, that allows players to browse that information easily. A new highlight state for the tile was also introduced to prevent eye strain for players. Inside the Progress tile, Player are now able to see their progress more easily by combining all the crests (Division + Rank Information) along the same plane on the timeline. This makes it easier for players to see which ranks they are currently at, as well as, which reward is associated with that rank. When browsing, the placement of this information is also consistent, and allows players to expect where to find that information.

01/ UXR Test + Parity

During one of the UXR play tests done for the feature, there were many unclear gameplay mechanics to the players. First, players were not sure which rank they were at and if they have qualified for a reward. To solve this problem, the rewards and win counter were centered in the ladder screen, with a green highlight bar under each to connect the rank and reward itself. In the main hub, the Progress tile now shows only the current reward of the player based on their current rank, which updates as the progress through the ladder.

Since these two competitive modes are connected, once players qualify for FUT Champions, we wanted the experience to be familiar. In order to do this, the same layout of information are almost identical. The progress ladder is visible in the hub and only displays the current rank and reward of the player. This ensures that there is no information overload presented to the players and only focuses on their status when the "season" end. The ladder also imitates the Division Rivals ladder, the only difference is that players cannot "browse" the different divisions, but rather, players are able to switch between the "Play-offs" ladder and "Finals" ladder, which have their own set of rewards and rankings.

01/ UXR Test + Parity

During one of the UXR play tests done for the feature, there were many unclear gameplay mechanics to the players. First, players were not sure which rank they were at and if they have qualified for a reward. To solve this problem, the rewards and win counter were centered in the ladder screen, with a green highlight bar under each to connect the rank and reward itself. In the main hub, the Progress tile now shows only the current reward of the player based on their current rank, which updates as the progress through the ladder.

Since these two competitive modes are connected, once players qualify for FUT Champions, we wanted the experience to be familiar. In order to do this, the same layout of information are almost identical. The progress ladder is visible in the hub and only displays the current rank and reward of the player. This ensures that there is no information overload presented to the players and only focuses on their status when the "season" end. The ladder also imitates the Division Rivals ladder, the only difference is that players cannot "browse" the different divisions, but rather, players are able to switch between the "Play-offs" ladder and "Finals" ladder, which have their own set of rewards and rankings.

01/ UXR Test + Parity

During one of the UXR play tests done for the feature, there were many unclear gameplay mechanics to the players. First, players were not sure which rank they were at and if they have qualified for a reward. To solve this problem, the rewards and win counter were centered in the ladder screen, with a green highlight bar under each to connect the rank and reward itself. In the main hub, the Progress tile now shows only the current reward of the player based on their current rank, which updates as the progress through the ladder.

Since these two competitive modes are connected, once players qualify for FUT Champions, we wanted the experience to be familiar. In order to do this, the same layout of information are almost identical. The progress ladder is visible in the hub and only displays the current rank and reward of the player. This ensures that there is no information overload presented to the players and only focuses on their status when the "season" end. The ladder also imitates the Division Rivals ladder, the only difference is that players cannot "browse" the different divisions, but rather, players are able to switch between the "Play-offs" ladder and "Finals" ladder, which have their own set of rewards and rankings.

02 / Imagery

With this redesign, we wanted to emphasize the new User Interface design, and at the same time, entice players with elegant and shiny rank badges and division crests that look like collectibles. Since there is a new ranking system inside each division, we introduced a new ranking language by integrating various metallic materials and gemstones. In the end, we were able to create some 3D rank badges, divisions crests, and milestone crests using Maya and rendered them using Keyshot.

02 / Imagery

With this redesign, we wanted to emphasize the new User Interface design, and at the same time, entice players with elegant and shiny rank badges and division crests that look like collectibles. Since there is a new ranking system inside each division, we introduced a new ranking language by integrating various metallic materials and gemstones. In the end, we were able to create some 3D rank badges, divisions crests, and milestone crests using Maya and rendered them using Keyshot.

02 / Imagery

With this redesign, we wanted to emphasize the new User Interface design, and at the same time, entice players with elegant and shiny rank badges and division crests that look like collectibles. Since there is a new ranking system inside each division, we introduced a new ranking language by integrating various metallic materials and gemstones. In the end, we were able to create some 3D rank badges, divisions crests, and milestone crests using Maya and rendered them using Keyshot.

03 / Item Designs

FIFA 22’s Ultimate Team introduces a visual upgrade to the items. Most of the items design for FUT 22 are done in full 3D composition using Maya, and are rendered out using Keyshot. As a designer who have not touched a 3D and rendering software before, I was fortunate enough to be able to learn the software and create some of the best items design in EA Sports FIFA history (as some of our players have said in online threads). I have worked closely with an art director and senior designer to achieve the results with little support.

03 / Item Designs

FIFA 22’s Ultimate Team introduces a visual upgrade to the items. Most of the items design for FUT 22 are done in full 3D composition using Maya, and are rendered out using Keyshot. As a designer who have not touched a 3D and rendering software before, I was fortunate enough to be able to learn the software and create some of the best items design in EA Sports FIFA history (as some of our players have said in online threads). I have worked closely with an art director and senior designer to achieve the results with little support.

03 / Item Designs

FIFA 22’s Ultimate Team introduces a visual upgrade to the items. Most of the items design for FUT 22 are done in full 3D composition using Maya, and are rendered out using Keyshot. As a designer who have not touched a 3D and rendering software before, I was fortunate enough to be able to learn the software and create some of the best items design in EA Sports FIFA history (as some of our players have said in online threads). I have worked closely with an art director and senior designer to achieve the results with little support.

Let’s work together

Instagram

Linkedin

Email

JOHN LIMIAC

©

John Limiac

2026

Let’s work
together

Instagram

Linkedin

Email

JOHN LIMIAC

©

John Limiac

2026

Let’s work
together

Instagram

Linkedin

Email

©

John Limiac

2026