Anthem UI Redesign

Released in 2019, Anthem is an action video game, where players pilot airborne combat suits to protect humanity from diverse alien threats. The freedom of flight and intense combat in Anthem were unlike anything I'd seen before. But technical issues and poor design decisions kept the game from becoming a breakout success. In this project, I critically analyze and propose improvements to the game's UI.

Client
Personal Project

My Role
UX, Visual, Motion Design

Team
Individual Contribution

Timeline
4 weeks in spring 2019

Demo reel of the redesigned interface. 

Problem Discovery

Flying through Anthem’s vast world was exhilarating, but the game’s interface did not embody the same visceral quality. It was cumbersome and broke the immersion of play. As a deeply invested player and designer, I set out to envision a better UI experience.

I conducted guerilla interviews with 5 players and analyzed media coverage, critic reviews, and community feedback to uncover the following issues with Anthem's UI:

1. Design felt uninspired and disconnected from the game’s lore
   
2. Changing gear was a chore due to buried customization
   
3. Long load times and static loading screens disengaged players
   
4. Sluggish animations made the UI feel clunky and cumbersome

findings from media coverage analysis. Sources – Forbes, Polygon, Forbes, Forbes, Reddit (top to bottom).

Design Process

1. Userflow Analysis - Customization
2. Visual Inspiration
3. Layout Iterations

Userflow Analysis - Customization

I mapped the 8 steps required to change gear and I could see why players were frustrated.

The high number of steps with sluggish screen transitions made it difficult to change adapt to new situations mid-combat.

Visual Inpsiration

To draw inspiration for a new interface, I created a mood board pulling together Anthem’s artwork and examples of engaging video game UIs.

Layout Iterations

I sketched out early layout concepts to rapidly explore variations. For later layouts, I moved to digital to integrate art assets from the game like player models, background images and text descriptions.

New Experience

The new design directly addresses pain points by making character customization immediately accessible, engaging players during loading downtime and introducing a brand-new aesthetic complete with animations.

Character Screen

Interviews with players revealed character customization is the most commonly accessed function by players.

The new design makes customization accessible by showing equipped gear and available loadouts together. Players can swap a single piece of gear in just 4 steps, down from 8, or change their entire loadout with a button press.

Move the slider to see a before and after comparison

Loading Screen

To improve engagement during loading, the new design introduces dynamic loading screens to show tips, lore and other world-building content.

Dynamic loading screens were later added to Anthem by developer Bioware, futher validating my design decisions. 

Select Javelin

The bland presentation of Javelins in Anthem did not appropriately express player power.

The new design reinforces the awe worthy strength and speed of Javelins through hero images and animation.

Launch Mission

Party and gamemode options in Anthem were spread across three screens which made it impossible to get a quick overview of the game session.

Consolidating them onto one screen to made it easier to manage gaming sessions.

Feedback & Iteration

I was thrilled to see the Anthem community, UX designers, and industry experts engage with the design through a demo reel.

Their comments helped me identify three areas of improvement:

1. The first draft of the redesign overused animation which detracted from information delivery.
   
2. Information-dense screens had little space for content to expand, leading to poor localization support.
   
3. Small font sizes and alternative letterforms led to subpar content accessibility.

Key Feedback from Reddit Comments; conversation with A UX Designer From A Game Studio over discord.

Animation Improvements

To create a more responsive experience, I sped up the animations for screen transitions by 60%, adjusted easing, and grouped blocks of information as they moved in.

As a next step, I would test the interface with users to see if the UI performed adequately by timing how quickly and accurately they were able to complete UI interaction tasks during live gameplay. 

New animation sample with faster transitions. This takes only 1 second to complete and presents much information faster.

Localization Improvements

To better accommodate localized content, I updated the design of information-dense screens. The character screen was the worst offender and saw a significant redesign.

I calculated average character width for content boxes, added 40% text padding and designed them to allow limited vertical expansion to fit overflowing text.

design changes to improve localization support.

Accessibility Improvements

I ensured all content was WCAG AA compliant and tweaked the font design and size to make it readable at a distance.

I increased font sizes and used standard letterforms for small headings while reserving alternate letterforms for large headings and visual flair. I also updated a few colors that broke compliance with WCAG AA color contrast standards.

design changes to improve accessibility.

Community Reaction

I’ve had the pleasure of sharing the new design with Anthem's wonderful community and was thrilled to see them positively engage and critique my work.

4000+

Upvotes on Reddit

300+

Comments on Reddit & Youtube

Reactions from feedback posts on Reddit and a YouTube video.

I’ve loved discovering Anthem's alien world and the ultimate Iron Man power fantasy it offers. Redesigning the UI started out as a passion project, but quickly became a profound learning experience, as I applied my UX skillset to menu design, discoverability, and short-term memory retention in video games. Most importantly though, it connected me with the community, a group of passionate players, who stuck with the game and voiced their frustrations. As the saying goes in Anthem: “Strong alone, stronger together.”