HUD Design
The goal was to design an intuitive and immersive Heads-Up Display (HUD) for a high-intensity, fast-paced first-person shooter (FPS) video game. Kill:Code is a fast paced, single player FPS that involves dynamic combat, rapid decision-making, and frequent team coordination.
The game’s design prioritizes fast reflexes, strategic gameplay, and smooth player movement, necessitating an optimized HUD that minimizes screen clutter while providing all necessary information.
Challenge
The challenge was to create a HUD that would convey critical information quickly and clearly without detracting from the player’s experience or cluttering the screen. It needed to be responsive, non-intrusive, and support both solo and team-based play.
Goals
-
Clarity & Readability: Ensure essential information (health, ammo, objectives, map) is easily readable, especially during fast-paced combat sequences.
-
Non-Intrusive Design: Avoid overwhelming the player with excessive information, focusing on elements that enhance gameplay and decision-making.
-
Contextual Awareness: Display contextual data, such as mission objectives or enemy locations, in a way that feels natural within the flow of gameplay.
Designing the HUD
After synthesizing the research, I began wireframing the HUD layout. This involved determining the positioning of key elements based on their importance and frequency of use in gameplay.
Key HUD elements included:
-
Health Bar: Positioned in the bottom right corner for easy visibility but not obstructing the player’s field of view. I chose a radial health bar with a color-coded indicator (green to red) to signify the player's health status.
-
Ammo Count: Placed just below the health bar, showing both the remaining bullets in the current magazine and the total ammo left. This would dynamically update as the player fired and reloaded.
-
Weapon Info: Positioned at the bottom-center of the screen, showing the current weapon and ammo count. This needed to be easy to access but not detract from the action.
-
Objective Tracker: A thin bar at the top of the screen displaying active mission objectives or upcoming objectives, with clear icons and text for easy scanning.
-
Minimap: Positioned in the bottom-left corner, with the ability to zoom in and out depending on the player’s proximity to important objectives. The minimap needed to be dynamic, highlighting enemies, allies, and key objectives.
-
Cooldowns and Abilities: A small, semi-transparent overlay along the bottom-right corner to show cooldowns for abilities, grenades, and other special actions, ensuring they didn’t clutter the main view.
Role
UX Researcher, UX Design, UI Design
Timeline
6 months
Tools
Miro, Figma, Unreal Engine 5
Process
Audit & Research
Step 1 was building
Vision & Strategy Development
Use this space to promote the business, its products or its services.
Ideation
Use this space to promote the business, its products or its services.
Design
Use this space to promote the business, its products or its services.
Dossier Menu Design
Kill: Code features a dossier system to allow players to refer to lore findings and player stats in an easily digestible format. The goal was to design a Player Dossier that would provide players with an in-depth view of their findings, skills, and more, all while maintaining an engaging and intuitive user experience.
The Player Dossier needed to achieve the following:
-
Track player progression with visual milestones (e.g., rank, level, achievements).
-
Maintain immersion within the game’s tactical and intense FPS atmosphere without overwhelming the player with too much data.
-
Showcase Lore findings, Enemy Stats, Weapon, and Character information in
Challenge
Creating a player dossier that is easily digestible for player convenience.
Goals
-
Comprehensive & Actionable Stats: The Player Dossier should offer an easily accessible overview of key player data (kills, assists, deaths, accuracy, etc.) while highlighting areas for improvement.
-
Personalized Experience: The dossier should provide insights into a player’s unique strengths and weaknesses based on their playstyle.
-
Visual & Interactive Design: The interface should be visually compelling, incorporating game aesthetics while being intuitive to navigate.
-
Non-Intrusive: The Player Dossier should feel like an organic extension of the game and not distract from active gameplay.
Cross Hair Design
Players can choose from a variety of weapon types, including assault rifles, shotguns, sniper rifles, grenades, and melee weapons, each offering a distinct gameplay experience.
Challenge
The challenge was to create a crosshair system that would adapt to each weapon type, enhancing the player's ability to aim and react in the heat of battle, while keeping the design visually consistent and non-intrusive.
The crosshair needed to reflect the weapon's characteristics (e.g., spread, recoil, precision) while offering real-time feedback about accuracy, distance, and weapon status.
Goals
-
Weapon-Specific Crosshairs: Each weapon type needed a tailored crosshair design that communicated critical information about the weapon's performance.
-
Instant Feedback: The crosshair should provide real-time feedback on accuracy, recoil, and weapon status.
-
Clarity & Precision: The crosshair design must be clear, visible, and precise, allowing players to effectively aim and make quick adjustments during combat.
-
Immersion: The crosshairs should seamlessly integrate into the game’s aesthetic and not detract from the immersive experience.
Process
Competative Analysis
I studied the layout and interactions of HUDs for games like Doom: Eternal, Halo: Infinite, and Call of Duty to detemine commonalities and success in visual heirachry, information reception, and visual appearance.
User Research
We conducted player testing with users ranging from casual FPS gamers to competitive players to identify pain points with existing HUDs in other games.
Wireframing
Low Fidelity Wireframes were used to create proof of concepts to ensure the HUD was succesfull.
Visual Design
I hosted a UI Workshop acorss the team to gather information on how the team wanted to represent the visual design through the UI and used that information to draft hi-fi wireframes.
Process
Audit & Research
Step 1 was building
Vision & Strategy Development
Use this space to promote the business, its products or its services.
Ideation
Use this space to promote the business, its products or its services.
Design
Use this space to promote the business, its products or its services.
Designing the user experience and interfaces for a first-person shooter (FPS) video game is a multifaceted task requiring careful consideration of the players experiences and interactions while balancing the communication of critical information in an intuitive and seamless way.
Kill: Code was based off games like Doom, Halo, and Quake, so many of the features were similar. That said, my team created the following features:
-
Responsive HUD with Notification Design work for objectives and
-
Comprehensive internal menu (our Dossier)
-
Crosshair Design to support a robust
Visual Design
I made sure to develop the UI Visual identity, ensuring the HUD was not only functional but also visually aligned with the game's world and setting. For this FPS, the visual design had a gritty, sci-fi theme, and we wanted the HUD to feel like part of the player's virtual equipment, without pulling them out of the game world.
Design choices included:
-
Minimalist Design: I chose a clean, subtle design with semi-transparent elements to reduce visual clutter. Most elements had a low opacity, allowing the player to focus on the environment while still providing necessary information.
-
Color Scheme: We used a birght color palette with high contrast for important elements like health, ammo, and objectives. Green for health, red for danger (e.g., low health or enemy proximity), and yellow for objectives were the primary accent colors.
-
Typography: Clear, bold fonts were used for numbers (e.g., health, ammo count) to ensure readability even during intense gameplay moments. We used a slightly futuristic but neutral font that wouldn’t distract from the game’s tone.