Battlefield 2042 is the newest of 12 Battlefield games developed by DICE and Electronic Arts. The purpose of this web project was to showcase the games new season “Turning Point” to increase the pre-existing and new player base and to create conversions for this seasons “Battle Pass”, a series of premium rewards. The site showcases updates to the games maps, weapons and characters on a responsive web experience utilizing the brands style guide, imagery and video trailers. The launch of this site was a success as the monthly players increased by 30% after its launch.
This project consisted of a Battlefield Brand Team, Content Managers and UX/UI Designers. As a UX/UI Designer, I conducted the following in order:
1 week
The main challenge of a project like this is the time constraint. Due to having it start and finish within a weeks time to design, receive brand approval, have the content managers execute the design on a CMS and finally to provide quality assurance, the process must be as streamlined as possible.
This step of the process starts with discussing with the Brand Team what are the primary and secondary colours for the season, identifying “Key Arts” which will be used as the primary featured image, specifying if any assets are required in particular sections, and lastly awaiting delivery of all said assets.
Branding imagery collage and colour palette seen below.
Once we have discovered our style guide and imagery, we begin applying it to the template we designed. During this process, we create the layout and order of sections, place imagery and copy and utilize branding colours for CTAs and other design components such as gradients on hero images to improve readability. Once we have our prototype designed, we receive approval from brand and make any changes requested.
Figma Prototypes seen below.
After the Brand Team provides approval, we are all set to begin production. This step of the design process involves designing, exporting and optimizing each hero/section of the site 4 times. One for desktop, laptop, tablet and mobile breakpoints. This includes MP4 and WebM assets for video on After Effects. Once all of the assets have been exported, they will be sent to the Content Management team to execute the design on their CMS.
At this point the design will be developed in a staging environment by the Content Managers. The final step is to now review the site ensuring that all assets provided by design are showing as intended, copy is readable and there are no other broken components or links. Once completed, the site is launched!
Once the site is launched, we can measure the success of the site. Due to confidentiality and NDA’s, most specifics cannot be shared. However, some information is public to track the successful increase of players through Steam. The month the site was launched showcasing the new season, the monthly player base increased by 30%.