One Last Step
First-person puzzle platformer focused on battery management and gated progression, where the team worked together to design mechanics that challenge players to prevent a catastrophic event.
Role: Lead UI Designer
Digipen Sophomore Project
Length of project : 5 Months
8 Person Team
I developed a dynamic HUD for a battery management puzzle platformer, enhancing player immersion with visual feedback. I oversaw the design from concept to implementation in Unreal Engine 5.2.1
Objective: Design a compact, unobtrusive HUD for a first-person game that enhances gameplay immersion. The HUD will be inspired by Mahina's keycard, integrating leveled increments and a battery charge display, allowing players to track progress without distraction.
Challenges: The key card and HUD design posed difficulties with clarity, visibility, and user engagement. Iterative design and user testing were crucial in overcoming these challenges, leading to a more intuitive and immersive gameplay experience
Concepting and Testing the HUD Iconography
Concept: The left side features a progress bar representing key-card upgrades, filling up as the player progresses. The battery charge indicator is located at the bottom.
Concept: The battery charge is positioned beside the player's profile photo, adopting a keycard-like appearance. Keycard upgrades are indicated by colored progress bars, with each level distinguished by a designated color.
Battery Icon conceptsFirst passes on in engine implementation:
Encountered challenges when translating the concept directly into the engine and rebuilding, resulting in significant deviations from the initial goals in both concept art and in-engine layouts.
Basic mechanic implementation, battery pick ups and player upgrade. Players have noted difficulty interpreting the battery increments and experiencing visual challenges in recognizing keycard upgrades and progress bar changes.
HUD Design concept revision. Players encountered challenges in observing the keycard changes and interpreting the battery and bolt symbols, leading to difficulty in making inferences based on the HUD UI iconography.
Higher fidelity/ stylized revision. Players appreciated the colored progress bar and its associations, yet had difficulty discerning differences and acknowledging changes. The battery iconography proved challenging to see and interpret.
Solution
Key user feedback
Challenges in interpreting iconography, with the key card appearing unclear and lost within the HUD. Difficulty anticipating and acknowledging level and battery upgrades was noted due to static UI elements lacking animation.
Suggested user solutions included making the key card not always visible, introducing elements of excitement, anticipation, and acknowledgment when the key card or notable elements in the HUD display are being utilized. This could involve animations or dynamic changes in the HUD to draw attention to important events or upgrades.
Final Solution Each level will feature its own designated keycard, each with its unique scanning and upgrade animations. keycard will be nearly hidden with a full visibility animation, slide in and out of placement.
Final solution The battery will be positioned in the lower left-hand corner, separate from the keycard, and will feature a distinct pickup and use animation.
Other Iconography
Character Icons
Tool tip illustation
Navigation butttons
Task Icons
