Gears Tactics (2020)

Role: UX/UI Designer
Client: The Coalition (Microsoft Game Studios)
Time Frame: March 2020 – November 2020
Platform: 
PC & Xbox

OVERVIEW

After the initial PC launch of Gears Tactics, I joined the team to help refresh the game’s UI, and fix usability issues where possible for the Xbox release. With the time restrictions given, we focused on addressing core usability issues and modernizing the previous UI.

By reducing visual noise, improving contrast in UI elements, and adjusting placements and scaling, we were able to address some of the previous accessibility issues and improve the experience when using a controller.

From March to November I created UXDDs and wireframes, high fidelity mock ups, and assisted engineers with in-engine asset implementation and animations.

Gameplay HUD

Working off the original layout, my goals were to

  • Improve clarity and readability
  • Reduce visual noise
  • Allow for scalability in content as the user progressed through the experience
  • Improve usability in regards to controller function and accessibility

HUD Wire

HUD Mockup

Readability

We opted to remove any notch details in the UI to remove some of the visual noise, increase the contrast between icons/text and background, and do an overhaul on the soldier selection component.

Hierarchy

Colour was used to imply urgency and danger for a user’s team, and UI components contextually increase or decrease in hierachical importance.

Cognitive Association

Weapon selection was stacked vertically and abilities selection horizontally to match controller inputs, with the goal of creating a visual and tactile association; moreover, allowing more space for up to 16 ability icons late-game.

Slide 1: In-Game After, Slide 2: Before


Iconography

Iconography was created for new abilities and menu items, blending tweaked original and new assets.

As abilities were specific to the franchise, there was some flexibility to blend common concepts and associations with graphic/illustrative elements.


Deployment Screen

Due to time constraints, full wire flows were not always possible; however, it was still important to makes improvements across all screens.

The deployment screen is seen before all missions, and requires a user to tailor their team to the mission type. As such, it was important for them to be able to quickly scan for details such as soldier class or any level ups. We also needed to make room for Jack, which allowed us to consolidate all mission details in a single tile.

Left: After (Mockup), Right: Before (Screenshot)


Customization Screen

Culling irrelevant information allowed us to prioritize only the most crucial information at a time. Through the use of additional iconography and colour highlights, we were able to create a visual and scannable customization experience; moreover, giving the models room to shine.

Slide 1: After, Slide 2: Before

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s