Website powered by

Icons of Theia — Mobile UI System, Revisited

I've been revisiting this work lately, and wanted to share it honestly.
This was the mobile UI system for Icon of Theia, an indie game I art-directed between 2022 and 2024. To be upfront: I'm not a professional UI designer by training — my background is concept art and illustration — and we were a small indie team on a tight runway. The work was rushed in places, and looking back there are plenty of things I'd do differently today.
What I'm proud of is that we made it work. Together with engineering and design, we built — almost in real time — a cohesive system covering friends and social, ranked progression, daily quests, inventory and store, and an in-game combat HUD. Each sheet shows both Sample (the composed screen) and Assets (its modular pieces) — because we eventually realized we had to stop designing screens and start designing a shared vocabulary.
Look closely and you'll see iterations and inconsistencies — different versions of the same component, ideas we tried and revised. I left those traces in on purpose. They're the footprints of a team learning UI and UX in real time, and the trail itself is part of the story.
The visual language pairs Art Deco–inspired geometry with a clear color and information hierarchy, so game-critical data — HP, currency, rank, progress, status — stays glanceable inside busy compositions. Mobile-specific constraints we kept returning to: touch targets sized for fingertips, critical info kept out of finger-occlusion zones, status color coding treated as a documented system, and empty / error / locked states designed alongside default ones.
Beyond the deliverables, this project quietly changed how I work. As a concept artist I was used to thinking inside a single image. Owning the UI forced me to zoom out and think like a product designer — about user psychology, attention, and how a small touch on a small screen shapes the whole moment of play. One of the most valuable shifts in years.
Role: Art Director — end-to-end UI ownership, from architecture and component library through visual design, asset production, and dev handoff.

Logo, nation icons, and card deisgn.

Logo, nation icons, and card deisgn.

Inventory — item grids, currency, and lobby navigation

Inventory — item grids, currency, and lobby navigation

In-game combat HUD — character stats, status effects, grid tactics

In-game combat HUD — character stats, status effects, grid tactics

Turn-start notification — surfacing timing inside the combat flow

Turn-start notification — surfacing timing inside the combat flow

Victory & Defeat — end-of-match states and panel construction

Victory & Defeat — end-of-match states and panel construction

Ranked progression — season tiers, leaderboard, and tier emblems (Bronze → Iconic)

Ranked progression — season tiers, leaderboard, and tier emblems (Bronze → Iconic)

Social/Friends page

Social/Friends page

Daily quests — progress bars, milestone chests, and reward popups

Daily quests — progress bars, milestone chests, and reward popups

Combat HUD — character cards, status effect icons, and action controls

Combat HUD — character cards, status effect icons, and action controls

Level up and chests

Level up and chests