Oops! Something went wrong while submitting the form.
Star Wars Battlefront II
Understanding and improving the anatomy of online multiplayer game
Pinterest: Save Feature
Interaction Design for Deeper Emotional Impact
Team
Individual Project
Role
UX Designer
Tools
Figma Invision Illustrator Photoshop
Timeline
Feb 22 - Mar 22
Project Overview
Background
I'll be honest, as of writing this, I've spent about a 100+ hours playing this game. While it had a rocky release given its loot box policies, Battlefront II has had an incredible redemption arc. It has since gotten rid of all loot case and micro-transaction elements while focussing completely on delivering on its post-launch content roadmap. And while I believe EA and DICE has made a fantastic first-person shooter with breathtaking visuals and sound design in a way that has made it quintessential to the Star Wars experience, I came to realize a few glaring issues with the user experience of its main menu system, especially the play section.
Navigating Battlefront II's sprawling main menu system can seem overwhelming as its many branches and the amount of navigation required to traverse them makes it hard to create a clear mental model of the overall architecture.
Project Vision
So how do we improve the overall UX and efficiency of the Battlefront II Main Menu system?
Given the continuous rollout of content over its lifetime, Battlefront II's menu system has developed some issues with ease of use. Thankfully I had an idea of the few major steps required to kick off an effective redesign.
card Sorting This exercise would be essential to analyze the current architecture and identify areas of improvement and redundancies.
Heuristic evaluation Since the goal was to help reduce the friction faced by users while navigating the menu, it was important to assess the UI patterns employed on a more granular level in order to come up with recommendations.
Challenges and Solutions
Identifying the Pain Points
To identify some of the major issues I decided to analyse some common use cases for navigation.
This audit was carried out using heuristic evaluation as well as surveying popular critic reviews, community boards and general audience perception.
Competitor Analysis
The previous entry in this franchise, Battlefront (2015) was able to handle this information complexity a lot more effectively.
While not exactly a 'competitor', the previous installment in the franchise, Star Wars Battlefront (2015) similarly boasted a slew of multiplayer game-modes. However, what set it apart was its effective hierarchy and uncharacteristically minimal UI, unique from previous entries in the franchise. The analysis revealed the following insights.
Solution #1
Not the Architecture You Are Looking For
With some research of the most popular game modes along with some quick card sorting, I was able to come up with a simpler and more efficient hierarchy. The following information architecture achieves the same functionality as its predecessor, with fewer pages and clicks.
The excercise also helped reveal some deeper insights that ended up informing other solutions.
As opposed to the 27 nodes and 9 branches, the new Information Architecture provided the same functionality with just 17 cards and 4 branches.
Intuitive Heirarchy
Top-level hierarchy made more intuitive
Progressive Disclosure
Descriptive information only revealed on active tabs, reducing cognitive overload and visual clutter.
Easier Access
Number of clicks reduced with all game mode visible on same page implemented using a scroll box.
Popular Hierarchy
Visual hierarchy established for game modesby sorting from highest to lowest in terms of popularity.
Solution #2
Efficient CTAs
The major challenge face here was the ineffectiveness of the home page CTAs. The screen real estate afforded by the home page compelled the need for a more effective solution.
This is the proposed alternative.
Last Played Option
This helps you quickly jump back into the last game mode you were playing.
Multiplayer Call-To-Action
To take you directly to the Multiplayer page in the play section, to choose your game mode of choice.
Solution #3
Single Page Customization
A majority of the complexity in the menu system's IA stems from the use of 3-panel customization options as navigation elements that take you to deeper pages.
Let us take a page from Battlefront (2015) to imagine a leaner user flow.
Return of the Progressive Disclosure
All customiztion option relegated to a single page. To reduce complexity, multiple vertical sections that are progressively disclosed to handle chapter selection, mission information, etc.
Prototyping & Final Screens
Greyboxing
This step was essential to validate the UX of the new user flow.
The greyboxing was implemeted using Aashrey Sharma's Prototyper plugin for Figma, which reduced the time taken by a huge factor.
You can plug in a controller to your desktop to try out the focus-based navigation!
Design System
In order to effectively re-design the User Interface, a breakdown of its current systems thinking was necessary.
This would entail understanding the rules and guidelines for its core thematic, typography, icons, colors, shapes, and animations.
Walkthrough Reel
Improvements and Reflection
Feedback from Players and Experts
Socializing the new design on online player communitites and to UX desigers in the games industry led to generally positive feedback, with a few points for improvement!
I also decided to decided to conduct a seperate accessiblitity review in order to complement this phase of iteration. This was done using the Game Accessiblity Guidelines.
improvement #1 A Better Place for Tutorial
The Tutorial Mode may not need to be accessed as frequently. Co-op missions moved back to their original position
improvement #2 Clear/Readable Text
Background and text colors for were tweaked to ensure high contrast.(4.5:1 for normal text)
improvement #3 Turning Off Background Animations
Background animations can be highly distracting to gamers with cognitive impairments like ADHD.
2023 Update: Promotional Content I felt like the original redesigns did not take into account more screen space for promotional content. Battlefront II has seen a fair amount of promotion for other EA games on its main menu screen durings its lifetime, sometime where multiple games take up the entire right section. This is expected for live serice game offered by a publisher as big as EA.
However, I think we have established enough UI patterns to allow for a robust combination of in-game and promotional content!
Learnings
Creating a demo reel of key user flows for easy socialization.
A demo reel was the best way to socialize the new design in its entirity and recieve quick feedback.
Understanding the UX design process/development lifecycle in AAA productions. The most likely cause for the ineffective information architecture could have been the additional content being added to the game over time. Understand the development life cycle may be key to possibly avoid this situation for future development.
