Back

Mobile + Web Design

FIFA 21 : Companion + Web App

Create and customize your dream club anytime, anywhere with the official EA SPORTS™ FIFA 21 Companion App. From stadium customizations like walkout music and goal celebrations to evolving your favorite players into club legends, manage every aspect of your team on the go. Track your progress, claim rewards, engage in the transfer market, and tackle squad building challenges directly from your phone to elevate your Ultimate Team experience.

Role

As the sole Associate Interface Designer for EA Sports’ FIFA 21 Companion App team, my primary role involved designing, documenting, and implementing various User Interfaces and elements that enhances our players’ overall user experience on mobile and web. The most notable part of this role was the reskin of the Companion and Web App for FIFA 21 to maintain the same design language as the console game. I also made sure there is some parity between the Companion App / Web App and the console game by translating some new features and bringing them into the mobile interface, such as the new Playtime feature. I have also piloted the use of Atomic Design in the reskin process, speeding up this part of the design process, making it easier for engineers to implement new and existing interface elements.

Approach

As part of my first project, I took the existing process in "reskinning" the app and evaluated it to identify any improvements that can be implemented and speed up the reskin process for the entire team.

In the previous years, the team has been working with a single Photoshop file with hundreds of layers and groups for different screens and states of the Companion/Web App. This made it harder for a designer to reskin individual screens as it was a time consuming task to change individual components in each screen. This was also harder for engineers to implement as they would need a separate styleguide / spec sheets to implement each screens individually.

Working with a software engineer, we slowly identified each individual elements that make up the app. These were implemented slowly, which made them global components. Changing the design of one element is reflected throughout the app, instead of individually and manually being changed by a designer / software engineer.

Result

By implementing the Atomic design process, I significantly streamlined and optimized our workflow, making it easier and faster for our software engineers to iterate on design. This not only enhanced collaboration between design and development teams but also resulted in notable time savings. As a result, I was able to reallocate this reclaimed time to work on other projects within the team, contributing to broader initiatives and fostering innovation across the organization.

This process is still being used by the team year after year.

01 / Atoms

"If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."

By identifying the atoms that make up the Companion App, I was able to individually reskin them based on the styleguide provided by the console team. These will match the interactions found on the console game, such as Hover States and Focus States. This new document also outlines the specs of each elements, making it easier for the Software Engineers to implement, as well as, making it easier for the Quality Verification team to assess the implemented screens to check for bugs and visual quality issues.

01 / Atoms

02 / Molecules

"In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. For instance, water molecules and hydrogen peroxide molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).

In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule."

Once all the Atoms have been identified and "reskinned", the process of creating the "molecules" is fairly easy. This means that, as a designer, I am able to drag and drop elements and combine them to make elements that function together. For example, Header + Pagination indicator + button hover state = an interactive preview tile. This also made it easier for the Software Engineers to cross-reference their build that is being created using the atoms spec sheet guidelines.

02 / Molecules

03 / Organisms and Beyond

“Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. Let’s revisit our search form molecule. A search form can often be found in the header of many web experiences, so let’s put that search form molecule into the context of a header organism. “

The header forms a standalone section of an interface, even though it contains several smaller pieces of interface with their own unique properties and functionality. Organisms can consist of similar or different molecule types. A header organism might consist of dissimilar elements such as a logo image, primary navigation list, and search form. We see these types of organisms on almost every website we visit.