Character Stats Progression Redesign

An upcoming side-scrolling looter shooter in which players play as super-soldiers. Chimera Custom XG features a stats progression system that allows players to enhance their super-soldier’s health, agility, strength, genetic powers, and more with every level they gain.

The team felt the legacy system required a redesign that addressed what players wanted to see in-game.

Client

Volok Games

My role

UX/UI designer

Tools

Figma

After Effects

FigJam

Otter.ai

Year

2023

My impact

I led the redesign effort for the player stats screen, conducted playtests to understand and integrate players’ feedback into the design process, and collaborated with engineers to implement the new design inside Unity. This new design shipped with the game’s demo in June 2024.

Redesigned UI in-game 👇🏼

TL;DR

What this case study is about

Business Objectives

🤔
What was the business trying to achieve?
  • Understand if the legacy system met players’ expectations
  • Streamline information delivery for a complex system

Constraints

🚧
What restrictions did we have to consider?
  • No budget for recruiting participants
  • Limited buy-in for interviews from leadership

My Role

📋
What was I responsible for?
  • UX/UI design
  • Recruiting users and conducting interviews
  • Creating designs and prototypes in Figma
  • Collaborating with Engineering to implement design in Unity

Results

🚀
What did we achieve?
  • New character stats system UI
  • Expanded design system
  • New design shipped in the 2024 game demo

Discovery

Understanding what players want

The stats system is complex, and the UI was confusing. It did not show the impact of adding points to specific stats and left too much unexplained about features, which could confuse players. I set out to better understand how to improve the UI experience of the stat system.
 

I conducted 5 guerrilla interviews to uncover the following issues with the stats progression UI:

  1. Players wanted additional information about their stats, such as their character’s base stats.
  2. Expectation to see a brief description of a stat and show the effects of investing a point.
  3. The hexagon grid design was confusing, and players were unsure how it worked.
  4. The legacy grid design generated FOMO (Fear of missing out) when adding points to the different stats.
Findings from guerrilla interviews 👇🏼

Initial concepts to test

What about the concepts work for players?

I took the existing UI, rearranged the layout, and added extra information, like the 4 milestones available for each stat. Not showing what was unlockable could confuse players about where to allocate points. I used 2 concepts to test with players.

Click on image to enlarge 👇🏼

Concept validation

Testing the initial concepts

I took the initial concepts and conducted 3 quick concept validation interviews to determine which direction to pursue in further iterations. I uncovered the following:

  1. Milestone icon design was easier to understand as something that can be unlocked.
  2. Players wanted overlays when hovering over UI items to get additional information on their stats.
  3. The diamond shapes within the hexagons were confusing as to what they meant.

Process

Visual inspiration to create a new design

To draw inspiration for a new UI, I created a mood board that pulled from examples of other streamlined character progression interfaces from popular games.

Click on image to enlarge 👇🏼

Design Iterations

I iterated on the UI design, integrating existing assets and redesigning others, like icons. I focused on keeping the hexagon grid in the center and the genetics and DNA theme that is part of the game’s identity and personality.

Click on image to enlarge 👇🏼

New experience

The new design directly addresses pain points by making the player’s soldier information available on-screen, adding hover overlays for the potential unlockables, detaching the hexagon grid from being associated with a specific stat, and introducing a new aesthetic for the progression screen.

Main Stat Screen

Interviews with players revealed the need to see basic information on their character’s stats. The new design adds the base value for each stat and what it represents.

Use handle to compare before vs. after 👇🏼

Information Overlays

The stats system is complex; interviews revealed that players wanted to know what they could unlock and what investing in each point would entail.

The new design leverages overlays when a player hovers over specific elements on the screen, revealing information only when the player wants to see it.

Gallery of different overlays 👇🏼

Adding Points

Conversations with players revealed the regions in hexagon grid space were being associated with a specific stat.

  The new design allows players to add any stat point to any of the hexagons, allowing them to customize their DNA as they please without feeling locked into a specific grid section.

Click on image to enlarge 👇🏼

Grid Growth

Diving more into the DNA and chemistry theme and considering the feedback of wanting to see “your DNA grow,” the new design shows the growth players will achieve at key levels.

By having the hexagon grid grow at different stages, we show the player the impact they’ve made by investing points into their soldier’s stats.

Click on image to enlarge 👇🏼

Internal Testing / QA

The QA team at Volok engaged with the new design prototype and liked it. Their comments helped me identify two areas for improvement after the game’s demo launch:

  1. The bonus stat points that weapons and armor provide are still unclear regarding how they affect your overall stats.
  2. Color-dense screens may not translate well to colorblind profiles.

The new UI experience was handed off to the UI engineer for implementation to meet the demo release deadline.

Recommendations

  • Conduct more 1:1 playtest sessions on the new system to get more feedback
  • Co-design with the players, bringing them in early into the design process, will help create experiences players want
  • Think how the new UI design fits into localization for languages like Portuguese and Spanish

Conclusion

I enjoyed deep-diving into such a complex progression system. Redesigning this UI became a learning experience as I applied my UX skillset to micro-interactions, discoverability, and feedback mechanisms. Most importantly, it helped me better understand that information delivery must happen when a player wants it and must be easy to find. Overloading players results in a turn-off for playing the game.