Systems UX · Strategy · HUD Architecture · Interaction Design
Overview • Players & Research • HUD & IA • UX Challenges • Flows & Prototype • Design System • Accessibility • Impact & Reflection
Collaborated with Art to build a mood board that established visual direction through fantasy storytelling, medieval references, and character iconography. Synthesized textures, maps, and motifs into a cohesive system that balances immersion, clarity, and scalable UI patterns.
These are examples of two different types of players. My challenge as a designer was to balance these very different expectations: making the experience intuitive and inviting for the narrative lover, while still keeping the rich puzzle quest for the strategy expert.
These are User research insights from playtest sessions To better understand how players evolve through the game, I mapped their journey using five distinct phases — Explore, Expand, Exploit, Exterminate, and Endgame. Each phase reflects a different player mindset, goal, and emotional state.
The common challenges in such complex games is the need to present a vast amount of information.
Making it difficult for players to find the specific data they need getting lost in irrelevant details.
As part of the accessibility review, I discovered many issues like touch targets that were too small, buttons placed too close together, or critical actions pushed to screen edges where they were harder to reach.
Simplified information- architcture for players that is more intuitive
Creating Consistent HUD Panel Patterns
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.
Building on the analysis, I created a unified visual framework for all tile types to improve clarity, accessibility, and instant recognition. However, color alone isn’t always accessible — particularly for players with color vision deficiencies. 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.
Tile Ownership - My City layout for the player’s own city — While most tiles follow a generic structure - ‘My City’ requires a distinct pattern The idea is the player can see relevant info one at a time . This area serves as the player’s home base — the center of strategic decisions, upgrades, and management actions.
A small glimpse of the larger design system. Most of the screens were built in grayscale to focus purely on structure, clarity, and interaction. As the experience evolved, I started building consistency & reusable components in parallel, so engineers & the team could test & iterate quickly. The system had to be flexible, scalable, and easy to adapt as new ideas emerged.
A living system that evolved with the product - balancing speed, clarity, and collaboration.
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. Testing how textures, icons, labels, and transparency interact together without cluttering the screen.
When designing for Map territories, Textures can indeed play a crucial role in accessibility and easy identification, especially when it comes to color blindness.
Using textures with the right visual contrast, patterns, or gradients can provide tactile feedback to users with visual impairments. On a map, it can help identify different territories or regions.
Labels improve clarity, reduce errors, and help users understand actions without guessing. They support screen-readers, assist accessibility needs, and ensure icons and controls are immediately understandable. I evaluated where labels were missing or unclear and how that affected player comprehension. I created a consistent labeling system for core actions, icons, and navigation elements to improve learnability, reduce mis-taps, and support accessibility. I learned that incorporating labels is an essential aspect of accessible design, regardless of the user’s abilities or disabilities. Labels contribute to a more inclusive and user-friendly experience, making it easier for everyone to access and engage with digital interfaces and information.
Tackled the demands of highly dense, multi-layered HUD systems across the game.
Assessed where visual noise and unclear hierarchy created unnecessary friction.
As a systems-focused designer, my role extends beyond screens—I align teams, clarify problem spaces, and make sure every decision ties back to player needs and product goals. I collaborate closely with engineers to validate interactions early and partner with artists to shape a cohesive visual narrative.
This work deepened my understanding of designing for scale, accessibility, and diverse player behaviors. I learned how to shape systems that flex for both beginners and experts while preserving clarity in high-density environments.