Why Do I Keep Dying?
An exploration on the challenge of how players balance focus between character statistics and gameplay.
Role:
UX/UI Designer
Length:
3 Months, January - March 2024
Tools:
Figma, Unity
Purpose:
Steam Release
Team:
Producer, Creative Director, 4 Programmers/Designers
Skills:
User research, UX/UI Design, Prototyping, A/B Playtesting
Project Overview
METAL BEANS is a 3D Action-Arcade game where you control two desktop buddies in a computer space. Protect the PC from digital threats by charging up your way through virus creatures and upgrading your characters, Catbot and Robitz, in the system!
Challenge
Players struggled balancing their attention between in-game UX interface (e.g. health, time limit, goals) and main gameplay, negatively impacting their overall enjoyment.
Main Solution
Research, prototype, and A/B test different iterations of the main interface that optimized the amount of information given to players while ensuring a smooth and enjoyable gameplay experience.
Core Design Features
Improved Character UX/UI Design
A simplified and aesthetically cohesive character UI design to facilitate a meaningful user experience with players.
Clarified Level Objectives
UX interface that was catered to each game levels’ specialized objectives and time limit so that players are guided towards a challenging, but rewarding, experience.
How did we get here? Let’s Revist the Process
1. Research
Analyzing player feedback and delving into existing game UI
2. Prototype
Tackling the challenge of prototyping animated game UX/UI
3. Playtest
Utilizing A/B testing techniques in the context of games
4. Implement
Balancing the needs of players and the team
1.1 Research | Analyzing Playtest Notes
Before diving into the design process, I wanted to look through playtest notes, see what our player’s problem space look like, and what pain points they experience in the game’s UX/UI that I can address.
Problem Discovery
After sifting through hours of feedback from playtesters, some of what players said stuck with me:
Feedback:
“The health bar is really hard to see so I don’t even notice that I’m dying or that my character heals when I swap.”
Conclusion:
The health bar is too far away from the character, which is where players have to focus on.
Conclusion:
The UI elements look too similar to the main game elements, making it hard for players to differentiate between game objectives and game elements.
Feedback:
“There is so much going on in the game that I can’t keep track of my character, the game’s goals, and the enemies around me all at the same time.”
Problem Statement
Players were unable to balance between managing the in-game UX interface elements, such as health, time limits, and goals, and focusing on the main gameplay. Consequently, this struggle led to frustration and difficulty in comprehending the game, ultimately diminishing their overall enjoyment.
1.2 Research | Researching Existing Games
Working closely with our combat designer, I learned that METAL BEANS gameplay closely resembled roguelike games despite primarily being an action-arcade game. Therefore, I decided to also conduct my own research specifically on UI design of many roguelike games, some dungeon crawlers, and a few role-playing games. The games that really drew me to their UI were Hades and Persona 5, not only because their bright aesthetics matched METAL BEANS, but also because of how they utilize UI to immerse players into the game’s narrative:
Hades’ UI is balanced across the screen and the design is clearly differentiated between in-game elements and UI elements.
Persona 5’s character health is uniquely designed so that players are able to manage their character’s resources while encountering battles.
2.1 Prototype | Designing Character Health Bars
Experimenting with Animations
Drawing inspiration from Persona 5, I designed a few iterations of different animations through Figma to tackle the problem of players not noticing that when they use “swap” the idle character is able to heal.
Experimenting With Placement of Health Bars
Similarly to Hades, I wanted to find a way to balance the UI around the screen.
Prototype B:
I moved the health bars to the middle bottom, the closest distance you can place UI between the peripheral and focal point of the screen.
Prototype A:
I kept the original placement of the health bars but other UI elements were removed so that health was the main focus.
2.2 Prototype | Clarifying Game Objectives
Communicating game objectives to our players.
Having worked with multiple level programmers in the team, I realized that they put a lot of effort and care into how players can interact with each level, or mode, of the game. Therefore each mode offered a distinct gameplay experience that conveyed different information to players and it was my duty to make sure that is communicated to them.
Pop-Up Mode:
layers need to destroy a number of pop-ups before the timer runs out. It was important that players knew how many pop-ups they have destroyed and how much time they have left.
Original
Prototype
Defragment Mode:
Players must avoid falling platforms and aggressive enemies, surviving as long as they could. It was important that players knew they needed to defeat a certain number of enemies every 40 seconds or else they lose the mode. This mode took less time to design because I was able to carry over UI elements from Pop-Up mode and customize details that best conveyed how to play Defragment mode.
Original
Prototype
3.1 Playtest | A/B Prototype Testing
Indie Playtest Night
Unfortunately we only had one day to conduct a randomized A/B testing, so I wanted to prioritize the focus of the playtest on answering the following questions:
Question 1
Does difference in placement affect the player’s ability to monitor the health of their character?
Question 2
Does one prototype encourage players to use the character swap function more or less?
Question 3
Which prototype does the players enjoy more?
Prototype A
Prototype B
3.2 Playtest | Results
Significantly positive results from…
Prototype B received more positive feedback compared to Prototype A, with players expressing that it was easier for them to see their character’s health and the overall UI design made the game experience much more enjoyable because they felt less overloaded with information. In addition, I observed an increased amount of players using the swap function in Prototype B than in Prototype A, suggesting players are noticing that their idle characters has the ability to heal when swapped.
As for the different modes, many players, especially those who have played the previous versions before, felt that the UI was informative and made it easier to understand what each mode was asking players to do.
4.1 Implementation | Final Product
4.2 Implementation | Thoughts and Lessons Learned
Here’s to more growth…
Design for BOTH the players and the development team
As a UX/UI Designer it is my job to communicate user pain points to the development team and advocate for their needs. However, this project further validated my belief that it is also just as important to be collaborate with my development team so that meeting those needs fit the scope of their capabilities. This ensured product success and was what pushed our product to release.
Applying UX research techniques to game is kinda cool!
Preliminary research and A/B testing was not only applicable to designing game UI, it also allowed me to make informed design decisions that impacted the combat, narrative, and level design of the game.
Want to work together?
Connect with me at samanthachen954@gmail.com