March 2024 - Apr 2024
Wispbound
Tools: Unity | Figma | Krita
Wispbound is a first-person combat and HUD concept game set in an ethereal fantasy world. You play as a mystical warden carrying out a routine patrol through an enchanted forest, but what begins as a peaceful journey quickly becomes a fight for the forest’s survival. As dark forces overtake the once-harmonious woodlands, you must use your warden abilities to confront these threats, restore balance, and protect the forest from destruction.
Academic Project
Role: User Experience Designer | User Interface Designer
Background
It allowed me to combine my passion for UX/UI with immersive game feel, turning the project’s fantasy combat theme into an intuitive and engaging experience. From sketching early ideas in Figma to bringing them into the game, I focused on making the interface feel responsive, satisfying, and refined through playtesting and feedback.
Problem
How could I redesign a first-person combat HUD that clearly communicated health, abilities, and combat feedback without overwhelming the screen or taking away from immersion?
Design Goal
The goal of this project was to design an intuitive first-person combat HUD supported by immersive real-time feedback that enhanced the player experience. Through iteration, I aimed to create clear visual cues and a more engaging combat feel so that interactions felt both satisfying and easy to understand.
Competitive Research
Combat Feel
I studied existing games to analyze their visual style, combat feel, strengths, and weaknesses, identifying what I want in my game.
For each attack mode, I need a melee, ranged, and special. I chose sword, wand (previously a bow), and a fireball. These are the games I researched for each attack mode:
Melee Attack
Genshin Impact
What stood out to me:
-
Particle effects and glowing visuals that made attacks feel powerful and magical
-
Sword swings that felt accurate, responsive, and visually dynamic
-
Strong use of color and elemental effects that made each hit feel more exciting
-
Attack timing that committed the player to each action, which added weight and intention to combat
Powerful Sword Swing Animation with VFX
Particle Effects and the shine of the sword
Ranged Attack and Heavy Attack
Path of Exile 2
What stood out to me:
-
The Comet skill showed strong weight and visual identity, making it a great reference for a fireball-style attack
-
Wand attacks that felt rich and powerful because of the way the visuals and effects supported the motion
-
A strong sense of flow in combat, where effects helped make each attack feel more satisfying
-
Clear signifiers for cooldowns, stamina, and recharge timing that made combat information easy to read
Ranged Attack, Path of Exile 2, Grinding Gear Games
Player Damage
Palworld
What stood out to me:
-
Clear damage feedback through color and screen effects
-
A bright, high-contrast visual style that made important information easy to track
-
Minimalist signifiers that stayed readable without distracting from gameplay
-
Combat feedback that gave both incoming and outgoing hits a stronger sense of weight and impact
Clear damage feedback using a red vignette on the screen
Heads Up Display (HUD)
Ori and the Will of the Wisps
Why its Inspiring: The HUD provides essential information like health and abilities in a minimal and unobtrusive way that’s not distracting.
What I Liked:
-
Clear damage feedback using different colors and screen effects.
-
Bright contrasting minimalist design that’s easy to see and track important information without distracting gameplay.
-
The combat feels satisfying because every hit, given or taken, has weight and impact.
Head Up Display
Pause Menu
What I Started With
After choosing a HUD design, I started with a blank Unity template hooked up with basic functionality. These were my tasks, see the images below.
Wireframes
Early HUD Concept
To create the HUD, I designed wireframes for key UI elements using simple shapes and only information needed to play the game. As well as using the ASUR framework (Attract, Signal, Update, Resolve) to ensure each UI element provides clear, real-time feedback. Each component was designed for usability and maintained a consistent visual hierarchy.
These included combat indicators such as:
-
Attack mode
-
Player health
-
Enemy indicators
-
Stamina (melee)
-
Ammo (ranged)
-
Cooldowns (special)
-
Aiming reticles
I came up with 6 different HUD designs and chose to focus on Wireframe 2.
Playtesting & Feedback
I gathered feedback from 12 people regarding combat feel, HUD clarity, and attack responsiveness, leading to key refinements and significantly improved readibility and usability.
What Worked Well
-
Combat felt engaging; light attacks were snappy and satisfying
-
HUD design was clean and easy to read
-
Environment and set dressing were well-received
Areas for Improvement
-
Combat Feel: Medium and heavy attacks felt too similar, the light attacks effects is too big and flashy, making it feel more impactful
-
Sound & Impact: Delays in attack sounds, ranged attack lacked sound, equip sounds were too long/loud
-
HUD Visibility: UI faded into bright areas, 'L, M, H' buttons are unclear
-
Animations & Effects: First animation felt jagged, enemy hit reactions were not in sync, and the special attack does not feel as strong as the other two attack modes
Breakdown of the UI
Key Refinements
-
Increased distinction between medium and heavy attacks for better combat pacing
-
Improved hit impact VFX and adjusted sound sounds while adding reverb for stronger audio feedback
-
Increased UI contrast to enhance viability in bright and dark areas
-
Smoothed out attack animations with attack hits
-
Fixed attack SFX positioning to ensure proper ground contact
-
Filled in missing sound effects and VFX effects
-
Red Vignette for Player Damage and Death scene
Final Prototype
Combat Feel
Light Attack
Heavy Attack
Medium Attack
Player Damage
Final Prototype
HUD
This is my final HUD iteration! These are the changes I made after the playtest.
-
Crosshair is red when on the enemy
-
I removed the L, M, H buttons as they were unnecessary and confused players
- I added the letter "R" to appear to prompt the player to reload, when their ammo is low
- Added a reload animation that briefly flashes dark as stamina recovers
- Added gradient effect to buttons, instead of a flat color
- Transitions between attack modes have a flash of color and animation
What I would change in the future:
-
Move the ammo counter on the reticle itself, this appears more noticeable and easier for the player to track
-
Add numbers to indicate health and stamina amount
-
The environment will have matching effect when an attack hits the area
-
Implementing the attack buttons to rotate behind each other to show which mode you are currently on
UI Menus
I designed the pause, controls, and credit screens.
These elements may seem simple, but they play a big role in usability and player immersion. I focused on making navigation smooth, information clear, and the visuals consistent with the game's style.
Thoughtful design in these areas enhances the overall flow, ensuring players can access what they need without frustration.
Credits Menu
Pause Menu
Player Control Menu
Combat Feel & HUD
Early Prototype
During early prototyping, I focused on Feel, Feedback, and Usability. These were the recurring issues I had:
-
Weapon swapping is abrupt
-
Lack of visual effects and sound effects
-
Special attack was a work in progress, where the ball being thrown did not disappear
-
The sword heavy attack's animation is too long, the attack is already over but the animation kept going
-
Some sound effects sound too quiet or too loud
This is what I ended up with:
Sword
Melee Attack
Light Attack
Medium Attack
Heavy Attack
Light Attack
Observations
-
Fast and Responsive
-
Animation feels smooth, but lacks impact
-
Lack of impact sound
-
Particle animation is too long
Wand
Ranged Attack
Light Attack
Medium Attack
Heavy Attack
Medium Attack
Heavy Attack
Light Attack
-
Easy to execute, but lacked a strong hit effect
-
Enemy taking damage animation is delayed
-
Responsive but lacked impact
Fireball
Special Attack
Light Attack
-
Fireball tends to project towards the right side of the player
-
Lack of sound and visual effects
Head Up Display (HUD)
Early Prototype
I went through multiple iterations after gathering feedback from playtesting.
First Iteration:
-
LMH buttons (Light, Medium, Heavy)
-
Ammo counter is the three orbs underneath the wand button
-
Added key numbers for each attack
Second Iteration:
-
Added outer ring for the LMH buttons to make it stand out more
-
Changed the text fonts for better visibility
-
Removed the orbs under the wand attack button
-
Swapped the Stamina Bar to the Ammo Count Bar when equipping the wand attack
First Iteration
Second Iteration
Attack Mode Effects
These are the effects I planned and implemented:
What I Learned
Working on the combat feel and HUD design for this project reinforced the importance of clarity, responsiveness, and player feedback in crafting an engaging experience.
Every thought was put into detail, from UI placement to satisfying hit reactions, all played a role in making combat feel impactful.
I’m always eager to learn, iterate, and push beyond expectations to create experiences that feel great to play. There’s always room to refine and innovate, and that’s what keeps me motivated to go above and beyond in every project.