FC24: Website design

Role
Duration
Production Designer
8 Months
Team
Tools
Design:
1x Senior UX Designer
1x Associate UX Designer
Developer:
1x Content Manager
2x Web Producer
2x Content Specialist
EA FC24 Brand Team
Figma
Adobe Photoshop
Adobe After Effects
Adobe Illustrator
Project Type
Platform
Company Project
Website
The project

EA Sports FC24 is the new installment of the football simulation game series formerly known as the FIFA series. This latest release comes with a change of branding and identity that will set the tone for future products of the franchise.

My role on the project
As a production designer, my role was to create graphic and media assets for the sites across all breakpoints. Taking into account the brand guidelines, UX prototypes, while making sure to follow accessibility standards. Working closely with the design, web devs, and brand team, to receive the latest updates and delivering the assets on schedule. During this process I maintained a clear communication with all the teams to ensure alignment and efficiency.

Visit Live Site

The Impact

FC24 Reveal views:

↑ 31.1%

274k pageviews, vs. 209k for FIFA 23 homepage reveal (4-day period).

Page views:

↑ 173%

20.1M vs FIFA 23 (Sep 2022–Aug 2023) 7.4M.

Organic users:

↑ 31%

2.8 million organic users vs 1.1 million for FIFA 23

Total Users:

↑ 65%

2.1M for FIFA 23 – up +65%.

The Task

The context

The launch of the FC24 Website was planned to be released from July 9 to 13, ahead of the new game's release on September 29. Marking the start of the preorder period. Trying to bring the existing FIFA players to preorder FC24. The first reveal of the page was to show the game had a new brand new cover and new updates.

To reveal progressively responsive sites based on the marketing strategy timeline, ahead of the game release on September 29. Thus showcasing a clear change from FIFA 23 in the brand and the mission of the FC 24 franchise, while teasing the future appealing to the current player base, and motivating them to engage with the franchise's new look and features.

Key Objectives

The launch of the first game with the FC name is of great celebration, to make the best out of this new launch. These were the goals that were decided:

  1. Building from FC Reveal moment, brand new, premium web experience that shows a clear change from FIFA 23.
  2. Drive retention by highlighting innovation story and player benefits.
  3. Working with Comms, elaborating on Gameplay specifics within the features section and a FAQ. Ensure the page is SEO-friendly, which can help show organic search results

Problem Statement

Based on the key objectives and all the preliminary information we stablished what we need

" How can we create a responsive website that is appealing to the player base, introduces a new game to the world, showcases innovation, and keeps the essence of the previous FIFA games? "

Ideation & Prototyping

The preliminary part of the design process, we create the low fidelity wireframes to make sure of the amount of content that will be put out and the distribution of it. We also separate each one by the release date. During promotions we sometimes have to progressively release more pages so keeping track of the wireframes are priority.

Wireframe breakdown

Moreover, so we can identify the assets that will be neeeded from the brand & marketing team. FC is a big franchise that works closely with many different futbol teams, so we need to be very detailed about each and every asset and copywritting what will be needed. This also helps the brand area to check if there's more content needed in some pages or any other changes they have in mind.

Design System

We use this as the first building block for all of the design of the page. We reference to this through all the design process. We always work closely with the brand team to obtain the design brief and to all the key assets before starting the production of the pages. The cohesivenes of the whole site will make it appealing and it will be easier to remember for the user.

Production

After I got all of the assets necessary for the site, I started creating all of the necessary designs for each ones of the web. Use the wireframes as a reference. For the assets, some rules are kept in place to make sure all of the design follows the accessibility guidelines and looks aesthetically pleasing and organized.

  • Create assets for different breakpoints: PC, Laptop, Tablet and Mobile
  • The illustration must cover only 50% of the asset. To leave space for the copywritting and so it's visible.
  • Make sure to have the latest logos and other assets.
  • Always compress the images and videos, the site has to be able to load fast.

Before and After shots

We use this as the first building block for all of the design of the page. We reference to this through all the design process. We always work closely with the brand team to obtain the design brief and to all the key assets before starting the production of the pages. The cohesivenes of the whole site will make it appealing and it will be easier to remember for the user.

Results and Achivements

We finished the project within 4 months, from May 2023 to January 2024 but during the first four months it was very busy since we most of the building of the site. The rest of the months were mostly live services updates. It was a great accomplishment specially since we were a very small team of designers. We received the metrics and it was a surprise the great amount of reception the website had.

1. Total Page views FC 24: 20.1M vs. FIFA 23: 7.4M

This is the clearest indicator that the users are engaging with the site. FC 24 achieved over 20 million views compared to just 7.4 million for FIFA 23 — a 173% increase. This massive growth tells us that users are not only visiting the site but actively exploring its content at more than twice the rate of the previous year.

2. Total Users: FC 24: 3.5M vs. FIFA 23: 2.1M

The total number of users reflects the reach of the campaign. With 3.5 million unique users, FC 24 attracted 65% more people than FIFA 23 over its entire lifecycle. This highlights the marketing campaign's success in drawing in a significantly larger audience, expanding the brand’s footprint.

3. Organic Users: FC 24: 2.8M vs. FIFA 23: 1.1M

Organic traffic is a strong measure of interest and visibility without paid promotion. FC 24 reached 2.8 million organic users, compared to just 1.1 million for FIFA 23 — a 142% increase. This shows that more users discovered FC 24 content naturally, through search engines or word-of-mouth, indicating excellent SEO performance and strong user intent.

4. September Pageviews: FC 24: 16.4M vs. FIFA 23 Full Year: 7.3M

FC 24 generated 16.4 million pageviews in just one month, surpassing what FIFA 23 achieved in an entire year. This 123% increase in a single month demonstrates the incredible momentum of the FC 24 launch, setting the tone for a high-performing campaign right from the start.

Conclusion and Reflections

This project was one of the biggest ones I participated at EA Games, it truly helped me as a designer so much. I managed to learn so many new things from my colleagues and I carry that very close to me. I had the opportunity to be part of one of EA Games' biggest release if not the biggest of the entire year 2023.  

Something new I learned...

As for design something important to keep in mind is when designing to focus at the mobile designs first and then make the desktop ones. Most people look at the mobile site so it's good practice to have it as priority. Another thing is everyone knows is that communication is key. But in a big project like this where there's a big team, the design team, Web devs, the entire FC24 Brand. I learned how important it is to be clear with the clients brand by creating goal priorities, contigency plans and regularly have design meetings. Things can change rapidly during the project but if everyone is up to date with the latest assets there's no setbacks.

Some of the challenges...

Within the design team I think some of the challenges were the increased workload because we were a reduce team because we were very few for a project as big in scale. We sometimes would ask for support or work extra hours to meet deadlines.

Outside of the design team it was challenging that so many different deparments were involved. Yes, there was design and Web devs but also FC24 brand, marketing, esports. They all would have different inputs or request that we had to listen, make note of and keep up with the updates the FC24 franchise had.
On top of that getting the assets was sometimes difficult because we would get them late so we had to finish everything fast while putting attention to detail because every asset matters.

My favorite part was...

Doing the designs and updates for all of the heroes, for FC24 it was so much fun. I had some creative liberties to make some of the assets and I think that was my favorite part of it. I like being very meticulous with my assets. During the project I kept improving my speed for certain task. I learned more shortcuts and that progress made me very happy too. I also really liked to be part of the design meetings I think shadowing my colleagues was fun, I was learning the whole time. Lastly I think the moment were we finished the whole project was so satisfactory, specially on the release day, it was a success and every effort everyone made came to life and it seems like the public acknowledge the effort by visiting the site so much.