Menu

Warner Bros. Discovery

WBD - Dense Game HUD Navigation System

Product Strategy · UX Architecture · HUD System Design · Cross-Functional Leadership

Game of Thrones inspired strategy HUD hero image

Warner Bros Discovery HUD presentation slideshow

1 / 13

Role

Lead UX/UI Product Designer — owned HUD navigation, IA, interaction patterns, accessibility considerations, and design system direction.

Product Scope

Strategy game HUD across mobile, tablet, and desktop screens, covering onboarding, map navigation, management states, and decision-support surfaces.

Key Challenge

Simplify dense gameplay systems without reducing strategic depth or player control, especially as players transition from onboarding into the live map.

Design Decision / System

Created scalable HUD patterns, clearer hierarchy, reusable grayscale components, and accessible interaction zones that could grow with the product.

Overview

Designing a decision-ready HUD for a dense strategy game.

This case study focuses on how I restructured a complex game HUD into a clearer, more scalable navigation system while preserving the strategic depth that makes the gameplay compelling.

Designed onboarding, navigation and core interaction model for a large-scale mobile, tablet and desktop screens. Delivered user flows, IA frameworks, wireframes, prototypes, and UX patterns to support fast, strategic player decision-making.

Designed high-density gameplay interfaces for AAA strategy games, focusing on decision-support systems that help players navigate complex mechanics without losing clarity or immersion. Building high-density interfaces and decision-support tools within the Game of Thrones / House of the Dragon strategy ecosystem.

Moodboard for fantasy storytelling and HUD visual direction
.....

Research Foundation

Grounding the system in player behavior, gameplay flow, and visual direction.

I used research artifacts and visual exploration to connect gameplay complexity with a more legible interface structure.

Moodboard for fantasy storytelling and HUD visual direction
Moodboard for fantasy storytelling and HUD visual direction
Partnered with Art to define a cohesive visual direction rooted in fantasy storytelling and gameplay clarity. Translated narrative themes, textures, and iconography into a scalable visual language for the HUD system.

Persona

Who are the players? Where do they struggle?

Analyzed player behavior, gameplay flows, and interaction patterns to identify friction in decision-making. Partnered with Game Design, UI Art, and Production to validate concepts, refine usability, and align the HUD with gameplay depth and player expectations.

Player personas for different gameplay styles
These examples represent two key player types. The challenge was balancing their different expectations, making the experience intuitive for narrative-driven players while preserving depth for strategy-focused users.
Journey map across five gameplay phases
Based on playtest insights, I mapped the player journey across five phases: Explore, Expand, Exploit, Exterminate, and Endgame. Each phase reflects a distinct mindset, goal, and emotional state.

Player Journey & Pain Points

The experience lost momentum when players reached the map without direction.

The journey map exposed a clear drop-off moment: high anticipation turned into uncertainty once the system stopped guiding the player.

Mapping the player journey revealed a critical drop-off point: players reached the main map but lacked clear direction on what to do next. A key friction point emerged during onboarding: players entered the main map without clear next steps, leading to confusion and early disengagement.

Journey map highlighting a dead-end moment
When excitement met a dead end, the HUD needed to shift from a dense collection of controls into a system that helps players understand priorities.

Core UX Challenges

Reducing cognitive load without flattening the strategy.

The redesign work centered on information hierarchy, consistency, and accessible decision-making under pressure.

Prototype and flow demonstration
Prototype and flow demonstration
Playtesting revealed that players struggled to locate critical information quickly, often navigating through multiple layers to complete basic actions. This directly impacted decision speed and created friction during core gameplay loops.

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.

Key Product Decisions

Create a predictable interaction model players can learn once and reuse everywhere.

The product strategy was not about removing complexity. It was about placing actions, signals, and feedback in more intuitive locations so the interface could support faster decisions.

Testing

Playtesting revealed that players struggled to locate critical information quickly, often navigating through multiple layers to complete basic actions. This directly impacted decision speed and created friction during core gameplay loops.

Accessibility Direction

Defined scalable layout rules for touch zones, spacing, and margins to support ergonomic reach, visual consistency, and accessibility across devices.

Process details

As the experience evolved, I translated research findings into reusable panel rules, placement logic, and hierarchy principles that could support map views, missions, management flows, and future gameplay systems.

HUD Navigation & Information Architecture

Restructuring the HUD into clear zones for gameplay actions, goals, and world interactions.

I reframed the interface as a layered system so players could understand what mattered, where to act, and how different surfaces related to one another.

To reduce cognitive load, I restructured the HUD into a clear system of zones, mapping gameplay actions, goals, and world interactions into predictable locations.

HUD information architecture map
Mapping systems into clear HUD zones created a more intuitive structure for players moving between global map context and detailed management actions.
Intuitive IA layout for players
Intuitive IA for players: surfacing goals, states, and actions in a more predictable way.

Tile Map Optimization

Standardizing panel patterns so every tile communicates hierarchy, ownership, and action state.

The tile map became a repeatable system rather than a series of bespoke screens.

Map info panel analysis and common patterns
Map info panel analysis and common patterns
Map Info Panel Analysis & Common Patterns.
Consistent HUD panel pattern examples
Established consistent panel patterns so players can quickly understand information structure regardless of context or game state.
Tile ownership interaction pattern
Tile ownership interactions translated panel logic into a more readable decision-support surface.
Tile map optimization overview
The redesign shifted the HUD from a fragmented interface to a cohesive decision-support system.

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.
Map info panel analysis and common patterns
Map info panel analysis and common patterns
Map Info Panel Analysis & Common Patterns.

Design System Evolution

Using grayscale foundations and reusable patterns to iterate quickly with the team.

The design system evolved in parallel with the product so structure, clarity, and implementation speed could reinforce each other.

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.

Grayscale design system and reusable HUD components
A reusable HUD language focused on structure first, then visual richness.

Accessibility and Visual Clarity

Improving contrast, reach, labels, and texture cues so the system is legible under real gameplay conditions.

Accessibility work was embedded into layout, labeling, and visual language, not treated as a late-stage check.

Readability review of dense tile map interface
High-density screens needed stronger hierarchy so key gameplay signals were not lost.
Touch zone and ergonomic reach review
Safe touch zones, spacing, and margins improved reach and reduced accidental actions, especially on mobile.

Safe Touch Zones

Created a scalable template that defined safe touch zones, margins, and spacing rules for both thumb reach and visibility.

Accessibility layout rules and spacing system
Accessibility rules translated into reusable layout guidance for the team.

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.

Textures and contrast exploration
Textures reinforced visual distinction between territories while supporting players with color vision deficiencies. Visual consistency improved the readability of the core gameplay view while keeping strategic information dense
Textures and contrast exploration
Improved clarity, consistency, decision-making flow, accessibility readiness, and team handoff across game design & engineering.

Business Outcomes & Product Performance

The redesign improved orientation, consistency, and readiness for cross-team execution.

The work addressed usability issues that impact player retention, engagement, and decision-making efficiency while making the system easier to scale and implement.

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.

My Contribution

Driving alignment across gameplay, design craft, and implementation.

My role extended beyond screens. I aligned teams, clarified the problem space, and kept decisions tied to player needs, product goals, and technical constraints.

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

Designing for scale, accessibility, and multiple player mindsets sharpened the system thinking.

This work deepened my understanding of designing for complex products that need to serve both new and experienced users without losing depth.

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.

OTHER PROJECTS

Browse more portfolio work

Preview of a Smart TV interaction design case study Interaction Design Smart TV UX Visual-first interaction concepts for cross-device TV experiences and re-engagement flows. Preview of BlackBerry dark theme accessibility guidelines Accessibility Dark Theme BlackBerry dark and light theme guidelines shaped around contrast, readability, and inclusive UX. Preview of BlackBerry brand packaging guidelines Branding BlackBerry Brand Packaging and brand marketing guidelines across product, print, and visual identity touchpoints. Preview of enterprise web UI design system guidelines Design Systems Design System Enterprise web UI guidelines for dashboards, components, empty states, and accessibility rules. Preview of onboarding and empty-state illustration work Illustration Empty Data Onboarding and empty-state illustrations that guide users through first-use product moments. Preview of the Labella Umbrella responsive store Branding Labella Umbrella A responsive online store direction combining brand storytelling, layouts, and product imagery. Preview of the customer satisfaction kiosk journey UX Research Customer Kiosk A service kiosk and app concept for measuring customer satisfaction and operational feedback. Preview of the Wizits mobile game case study Interaction Design Wizits Game A mobile game interface with character art, themed screens, animation, and playful UX systems. Preview of the TJX Market mobile app concept Interaction Design TJX Market A multi-brand retail app concept exploring navigation, product discovery, and mobile shopping. Preview of the SharpLight beauty spa campaign Branding SharpLight Beauty spa campaign materials spanning print design, promotional layouts, and branded visuals. Preview of the Bwin festive game promotion Branding Bwin Promo A festive gaming promotion with campaign concepts, interface graphics, and seasonal art direction. Preview of the BlackBerry Power Center app Data Visualization Power Center Battery app interaction design with information architecture, visual states, and usage insights. Preview of interior design illustration work Illustration Interior Art Interior and architectural illustrations using 3D composition, rooms, textures, and visual mood. Preview of 3D exhibition design work 3D Design 3D Exhibition Exhibition and environmental design concepts for branded spaces, spatial storytelling, and display.

Other Pages

Want to know more? Let's get in touch!