top of page
UX & Level Designer
Wispbound
First Person
Combat Feel / HUD Design
Wispbound is an ethereal fantasy game where you play as a mystical warden on your routine patrol through an enchanted forest. What begins as a peaceful journey quickly turns into a battle for the forest’s survival, as malevolent forces have overrun the once peaceful woodlands. Armed with your warden abilities, you must confront these entities, restore balance, and protect the forest from looming destruction.
Table of Contents
Academic Project
Role:
-
User Experience Designer
-
User Interface Designer
Developed:
Mar 2024 - Apr 2024
Background
Wispbound was a super fun academic project where I got to redesign a 3D first-person combat HUD in Unity. I combined my passion for UX/UI with immersive game feel, turning a theme that I was passionate about into an intuitive, engaging experience. From sketching rough ideas in Figma to bringing them to life. I focused on making the interface feel responsive and satisfying—refining everything through playtesting and feedback.
Tools & Skills Applied
Skills:
-
Game Design
-
Level Design
-
UX/UI Design
-
User Testing
Tools:
-
Unity
- Figma
- Microsoft 365
- Clip Studio Paint
Explore a UX/Level Design Pipeline
The focus of this project was to refine the UX/UI pipeline by designing intuitive interfaces and immersive real-time feedback systems that enhance player experience. Through careful iteration, the goal was to create a HUD with clear visual cues, and an engaging combat feel that makes interactions both satisfying and accessible.
Iterative Design
The goal is to refine the design process through iterative development, using constant testing and feedback to make improvements. This approach ensures the final product is polished and specifically tailored to the needs and preferences of the target audience.
Project Goals
User Experience
Research
My research began with analyzing the provided template to define the genre, mood, art style, and audio direction for my conceptual game.
Game Spec Overview
-
Game Type: 1st Person action-adventure game
-
Genre: Fantasy
-
Mood: Whimsical, magical
-
Art Style: Mimimalistic, fantasy
-
Music/SFX Style: Ambient and Atmospheric
Inspired by: Ori and the Will of the Wisps, Moon Studios.
Video:
Color
These are the colors I chose for the game space environment and the Heads Up Display (HUD).
Environment: I want the game set in a forest. I chose dark nature themed colors.
HUD: Bright and colorful colors to contrast against the dark background, with easy visibility kept in mind.
Combat Feel Research
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
Why its Inspiring: The melee combat is smooth, clean animations, and creates a satisfying combat experience.
What I Liked:
-
Particle effects and glowing visuals makes attacks feel powerful and magical.
-
Swinging sword animations feel accurate and responsive, colors stand out, while blending combat with elemental effects, making every hit feel dynamic and rewarding.
-
Attacks will lock players and prevent them from attacking again until its over.
Powerful Sword Swing Animation with VFX
Particle Effects and the shine of the sword
Ranged Attack and Heavy Attack
Path of Exile 2
Why its Inspiring: the sorceress attacks are both captivating and integrated into the fast-paced gameplay and is a great inspiration for my ranged and special attack.
What I liked:
-
The skill called “Comet”, is what I want to emulate in combat. It shows the weight and a strong visual identity for a fireball attack.
-
The wand attacks look and feel rich, where the visuals and effects enhance the sense of power. I want to replicate that flow.
-
There are great signifiers for cooldown of skills, amount of stamina, and how long it will take to recharge.
Ranged Attack, Path of Exile 2, Grinding Gear Games
Player Damage
Palworld
Why its Inspiring: The game uses simple, distinct, and contrasting damage visual signifiers. Like a faint pulsing red vignette that gets bigger as the player takes more damage.
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.
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.
Wireframes
To create an HUD, I designed wireframes for key UI elements. Each wireframe focused on using simple shapes and providing all the info you needed to play the game. This consisted of combat indicators, including attack mode, player health, enemy indicators, stamina (melee), ammo (ranged), cooldown (special), and aiming reticles. By applying the ASUR framework (Attract, Signal, Update, Resolve), I structured each element to provide clear real-time feedback. Every component was designed with usability in mind, and integrating my ideas into gameplay while maintaining a consistent visual hierarchy.
ASUR Stands for:
I came up with 6 different wireframe designs and chose to focus on Wireframe 2.
What I Started With
I started with a blank Unity template hooked up with basic functionality.
These were my tasks, see the image below (right).
Breakdown of the UI
Playtesting & Feedback
I gathered feedback from 12 people regarding combat feel, HUD clarity, and attack responsiveness, leading to key refinements in animations, UI visibility, and feedback systems.
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.
I refined the combat feel, attack responsiveness, HUD clarity based on direct feedback. These changes significantly improved readibility and usability, making the combat feel engaging.
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
This is my final HUD iteration!
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.
Some changes I will implement 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.
Final Prototype
HUD & Menus
Light Attack
Heavy Attack
Medium Attack
Player Damage
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.
Pause Menu
Player Control Menu
Credits Menu
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.
Early Combat Feel & HUD 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
Light Attack
Fireball
Special Attack
-
Fireball tends to project towards the right side of the player
-
Lack of sound and visual effects.
Early HUD
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:
-
I added a outer ring for the LMH buttons to make it stand out more.
-
Removed the orbs
-
Changed the number fonts for better visibility.
-
Removed the orbs under the wand attack button. The wand uses a lot of ammo. I made the ammo bar the same as the stamina icon but with a teal color and ammo counter.
First Iteration
Second Iteration
Attack Mode Effects
These are the effects I planned and implemented:
Background
User Experience
CombatFeelResearch
Wireframes
EarlyPrototypes
FinalPrototype
What I Learned
bottom of page