Battlefield is a flagship game franchise for Electronic Arts (EA), a leading global interactive entertainment software company. The EA web team engaged us to assist with user experience design for Battlefield.com for the new game release announcement. Key goals included improving the consistency and usability of the purchase process and providing recommendations to deliver a more intuitive, seamless user experience via:

  • Improved information architecture and a consistent way to navigate between the multiple Battlefield websites
  • Personalization features, and
  • Cross-device, touch-friendly navigation design

We needed to gain consensus on user experience enhancements across a large number of stakeholders and on a tight timeline. The Battlefield 4 release was very high profile, and the goals and concerns of the internal web and marketing teams, the ad agency, the ecommerce team and the game development studio needed to be addressed and balanced to gain approval.

Phase 1: Purchase process improvements

Discovery session: The detailed discussion revealed that the purchase flow varied a lot depending on the user’s region and the game platform. The purchasing interface needed to scale over time as expansion packs were added. There also needed to be a clearer differentiation between game versus merchandise purchase.

User flows and wireframes were created via an iterative design process with frequent review cycles to keep on schedule. The final wireframes for the release announcement site balanced usability improvements and product marketing goals with technical constraints, to ensure that the interface enhancements could be launched in time. The improved purchase process delivered context-aware, platform-targeted content to users and reduced purchase steps. It was decided that the call to action to purchase Battlefield merchandise would be re-located to focus the user’s attention on the game purchase. In addition, usability enhancements were noted for future website phases.

Interface design: The purchase page interfaces needed to meld seamlessly with the game studio’s web style guidelines. Orange Pre-order buttons aligned with the EA Origin Store branding and contrasted with the black and grey colour scheme to stand out. In cases where the game was available via both the EA ecommerce site and other retailers, the links to other retailers was given a secondary, more subdued treatment. A mobile version of the purchase screens was also designed.

Mobile site development: Due to a resourcing crunch with EA’s development team, the client requested that Aalto Interactive develop the mobile release announcement site for Battlefield 4 in a pinch. We developed the mobile site on schedule, including an age verification form and localization with ten languages.

Phase 2: Information architecture and navigation improvements

Discovery session: We began with a review of the project brief followed by a detailed discussion. The website had grown organically over time and now they were having trouble with scalability. Battlefield 4 was a major release and they were planning to provide their fans with a wealth of content. Battlefield.com needed to focus users on the current and upcoming game versions while still supporting popular earlier versions.

They also had concerns about wayfinding. Battlefield content was spread across version-specific websites, regional blogs and the Battlelog community site but there wasn’t a consistent navigation scheme to tie it all together. The Battlefield.com main navigation menu was sometimes confusing to users since some links lead to pages within the website and other links launched different websites. Finally they wanted recommendations on how to make the transition to a responsive navigation design to work across devices.

Information architecture recommendations for Battlefield 4 included:

  • Adding personalization features for logged in users based on their purchase history and profile. Examples included highlighting or recommending products the user hadn’t purchased and directing users to details about the platform they’d typically purchased in the past.
  • Including a consistent top-level navigation menu to provide cross-links between battlefield.com, the blogs and the Battlelog website
  • A new scalable information architecture for Battlefield 4
  • Using consistent labels for menu items between Battlefield websites

Wireframes were created to illustrate recommended updates for Battlefield 4 navigation including:

  • Responsive navigation menus with breakpoints for desktop and mobile displays
  • Options for presenting access to different game versions

In addition we participated in high level visual design concept reviews and made recommendations for usability enhancements.

Results delivered

The Battlefield 4 announcement website improvements were a success and the site was launched on schedule. Based on the recommendation of the Battlefield website project management, Aalto Interactive was also engaged to provide user interface design for the Need for Speed Rivals announcement website and information architecture and navigation recommendations for The SIMS responsive website design.

© 2024 Aalto Interactive Inc. All rights reserved.