Warner Bros Discovery / Game HUD Navigation Experience Design

Core UX Challenges

• High-density HUD with no clear information hierarchy, making it difficult for players to prioritize actions in real time.
• Navigation patterns lacked consistency across map, missions, and management screens.
• Important actions were buried in inconsistent interaction patterns.
• Players felt overwhelmed by high-density data and competing priorities.
• There was friction moving between map states, missions, and resource management.
• The system did not scale for different player types or skill levels.

Visual Accessibility Challenges

• Visual clutter obscured key gameplay signals.
• Poor contrast reduced readability and slowed decision-making.
• Layouts ignored ergonomic reach zones, especially on mobile.
• Missing labels reduced learnability and onboarding success.
• Color-dependent indicators failed color-blind accessibility.

Tile Map Optimization

I audited all map info panels and standardized layout rules to ensure every panel communicated hierarchy, ownership, and action state in a predictable way.

What I Improved

• Established consistent header, stats, and action placement.
• Unified iconography and labeling for instant recognition.
• Reduced cognitive load by removing duplicated or irrelevant data.
• Created a scalable pattern library for new panel types.
• Introduced color-blind accessibility considerations into the system.

Grayscale Design System

Built the system in grayscale to prioritize structure, readability, and interaction logic first. This enabled faster iteration, reusable components, and consistent implementation across teams as the product evolved.

A living system that evolved with the product, balancing speed, clarity, and collaboration.

Clarity, Hierarchy & Readability

Building on the analysis, I created a flexible design system using grayscale foundations to improve clarity, accessibility, and instant recognition. To support color-blind accessibility, every state also includes unique icons and border shapes. The system scales across both map and detail views to maintain orientation and reduce decision time.

Texture & Visual Balance

As the design system started to take shape and the engineering team began developing the core game architecture, I moved into exploring textures, visual balance, and environmental context. I tested how textures, icons, labels, and transparency interact together without cluttering the screen.

Labels

Labels improve clarity, reduce errors, and help users understand actions without guessing. I evaluated where labels were missing or unclear and how that affected player comprehension, then created a more consistent labeling system for core actions, icons, and navigation elements to improve learnability and reduce mis-taps.

Complexity Challenges Impact

• Reframed the HUD structure into a clear, layered information hierarchy.
• Defined navigation principles that reduced cognitive load across map states.
• Consolidated fragmented workflows into predictable, scalable interaction patterns.
• Improved information hierarchy without sacrificing game depth.
• Translated a high-density system into a more readable, decision-ready interface.
• Improved player orientation through consistent surface layouts and UX patterns.

Visual & Accessibility Enhancements

• Reduced visual noise by introducing a unified spacing, labeling, and grouping system.
• Strengthened hierarchy for quicker visual parsing.
• Improved scanability and decision speed by simplifying structure and removing redundant information.
• Reduced visual overload in high-density UI zones.
• Defined accessibility-compliant touch zones, margins, and target sizes.
• Designed a color-independent system using shapes, icons, and texture cues to meet WCAG-aligned accessibility needs.

How I Worked

I collaborate closely with engineers to validate interactions early and partner with artists to shape a cohesive visual narrative. My approach focused on translating complex gameplay systems into clear, structured experiences.

What I Drove

• Drive alignment across design, engineering, and art.
• Simplify complexity through structure and clear patterns.
• Craft intuitive flows for a dense strategy ecosystem.
• Enable faster decision-making through clarity and hierarchy.

Reflection

I learned how to shape systems that flex for both beginners and experts while preserving clarity in high-density environments.

Takeaways

• Design must adapt to different cognitive loads and play styles.
• Clarity and accessibility are strategic advantages, not add-ons.
• Early collaboration improves both creativity and feasibility.
• Consistent patterns reduce friction across a complex HUD.