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
Madi Calvert 