Role
UX / UI Designer
Timeline
2 Weeks
Platform
Desktop / Mobile
Tools
Figma
Illustrator
PhotoshopOverview
The Challenge
This two-part assignment was part of a design challenge for a UI/UX position on a tactical shooter game. The first task focused on creating a stylized and immersive military rank iconset, while the second required a UX/UI design for an in-game inventory screen. Both tasks aimed to evaluate the candidate's ability to balance functionality with visual style, while respecting player expectations and genre conventions. Despite the tight timeframe, I approached each task as a complete design study — researching real-world references, ideating different approaches, and iterating toward a polished, game-ready outcome. The challenge allowed me to apply both my UX and visual design skills, blending usability with immersive aesthetics.
Research & Discovery
Key Findings
Players need fast, intuitive interfaces — especially under stress
Clear icon progression improves motivation and retention
Real-world insignia and textures (e.g., stitched cloth, polished metal) enhance perceived realism
Design Process
How We Got There
For both the Inventory UI and Rank Iconset, I grounded my exploration in military realism, taking inspiration from real-world insignia, tactical gear layouts, and modern game UIs. I envisioned a visual language rooted in dark green, grey, and black tones, evoking the serious tone of war while maintaining clarity and immersion. I also drew influence from systems like Baldur's Gate 3 for tooltip handling and user onboarding. Concept For the Inventory System, I began by defining the core elements and structuring the Information Architecture (IA) to create clear interaction zones. Once areas were defined, I developed a wireframe-based design system and applied the chosen color palette early on to evaluate contrast and readability.
I progressively placed and refined components — though not fully polished, the system remains presentable and scalable thanks to its modularity. Visually, I explored the liquid dark glass trend — a metaphor for both the modern tactical interface and the fragility of the human body in war. Weapons and gear are envisioned as 3D greyscale models, colorizing when upgraded to enhance feedback. A right-hand panel surfaces detailed item info and interactions, ideal for both mouse and console controls. For the Rank Iconset, I combined cloth-based insignia with medal elements to create a distinct progression between ranks. The system leverages classic military symbolism — stripes, stars, pins — and increases in visual complexity and material prestige.
Final Design
The Solution
Scalable 5-tier military rank icons with clear hierarchy
Modular dark-glass inventory with intuitive layout
Reusable dark-tone design system for prototyping, scalability and future modularity and upgrades
