Overview
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.
My Role
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:
- Gather brand guidelines and assets from Brand Team
- Wireframe and ideate
- Prototype and receive brand approval
- Export out web ready assets for Content Managers
- Conduct quality assurance on final web version
Project Duration
1 week
Project Tools
- Figma
- Adobe After Effects
- Airtable (Project Management tool)
- Slack (Communication)
Challenges
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.
Solutions
- To streamline this process due to the quick turn around time for projects, our designer team developed a template system for page layout as well as components in Figma. Not only does this speed up the process, it minimizes the risk of broken components once live.
- Communication. Due to the amount of time for the project, I coordinated with another designer on the team and created a list of tasks for each of us to complete by a certain date to insure timely completion.
1. Define
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.
2. Conceptualize
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.
3. Production
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.
4. Review
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!
5. Measure
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%.
