Overview • Research • IA / HUD Structure • UX Challenges • User Flow • Prototype • Design System • Accessibility
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.
When Excitement Meets a Dead End 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.
scalable template that defined safe touch zones, margins, and spacing rules for both thumb reach and visibility.
Info Architecture that will be simplified for players & intuitive - mapping it into clear HUD zones.
| Main MAP | Tile Ownership
Building on the previous analysis, I designed a visual framework that defines how each tile type should appear on the map — focusing on clarity, accessibility, and instant recognition. Every tile state was assigned a specific color and each panel followed consistent interaction patterns and placement rules, so players could quickly recognize and act on tiles without confusion.
Each tile state was assigned a distinct color for quick scanning:
Grey for empty tiles — neutral and inactive.
Red for enemy tiles — indicating threat and action potential.
Green for my tiles — a sense of control and safety.
Blue for alliance tiles — friendly collaboration.
Purple for faction-owned tiles — global or special ownership.
However, color alone isn’t always accessible — particularly for players with color vision deficiencies. To address this, I added iconography and shape indicators that mirror the color meaning, such as shield or flag icons for ownership and border styles for threat levels. This color-coded system is also designed to scale — meaning the same logic applies from zoomed-out map views to close-up tile detail screens, ensuring consistent user orientation.
| Main MAP | 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.
What you see here is just a small glimpse of the larger design system. While I was working on the main HUD and overall game architecture, 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. We needed to move quickly for testing and experimentation — so 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.
For example, a rough texture could represent mountains, while a smooth texture could represent plains.
Also, consistent textures can represent different types of territories across various screens or components.
Users can quickly learn to associate specific textures with specific regions, making the map more intuitive and familiar to navigate.
Labels help organize content, making it easier for users to locate specific information or navigate through. Consistent Navigation with labels may be helpful. With easy-to-read and clear-to-understand contextual visualization, cues can help users understand where they are and where they can go next.
Labels next to buttons and icons describe their functions explicitly. This is beneficial for all users, including those with cognitive impairments or those who are not familiar with certain symbols or iconography.
Also, labels provide essential information to screen readers and assistive technologies, enabling users with visual impairments to understand and interact with digital content. When elements are appropriately labeled, screen readers can announce the labels aloud, allowing users to navigate and access the content effectively.
Without labels, users may struggle to understand what information is expected in each field, leading to errors and frustration.
Labels play a role in providing clear error messages when something goes wrong. This is crucial for users to identify the problem and take appropriate action to correct it.
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.
Being a designer is more than solving problems—it’s about how I approach them, who I collaborate with, and how I bring people together along the journey. My work is always rooted in strategy and empathy to deliver solutions that feel intuitive and meaningful. While I am deep in user research and prototyping, something equally important happening in parallel
Every visual and interactive element is part of a bigger narrative, crafted with intent. Whether it’s mapping a complex system, simplifying flows, or designing micro-interactions that reduce friction. I approach each project with a systems mindset and a collaborative spirit. I’m often the bridge between business objectives, user needs, and creative execution.
From large-scale mobile applications to admin platforms and internal tools, I’ve worked across disciplines to build experiences that are not only visually engaging but strategically aligned and accessible.
If you’re building a product that demands clarity, creativity, and thoughtful execution—and looking for someone who brings structure to ambiguity and energy to collaboration—I’d love to connect.
In this project, I needed to consider how the entire system should behave. Collaborating closely with engineers to align on data structures and interactions, while advocating for accessibility and inclusive design.
For me, design begins with curiosity and empathy - understanding the people behind the data, their challenges, and what clarity means to them. I believe great design happens through collaboration, iteration, and a shared vision. My work is rooted in strategy and empathy to deliver solutions that feel intuitive and meaningful.