Civitas

Working closely with the UX/UI Director, my role spanned the full design process from early wireframing to managing a flexible Figma design system, and even assisting with blueprint construction in Unreal Engine’s UMG. A key part of the work was ensuring that the game’s universal palette designs could support a wide range of content variations, while still meshing together seamlessly as a coherent system.

This extended into the HUD, which included a flexible top navigation with multiple dropdown variations, a quest system that could collapse or minimise for quick access, and an easily accessible build menu positioned at the bottom of the screen. View controls allowed players to switch the map between different modes, while a variety of panel types appeared when selecting objects on the map layer, providing contextual tools within a consistent framework.

Because Civitas is a multiplayer game at its core, the land view was designed as a quick way for players to assess neighbouring territories and their resources. This mode could be accessed either by using the scroll wheel or through a shortcut on the right side of the HUD, giving players a fast and intuitive way to switch perspective and plan strategy.

As players progressed through the game they accrued points that could be invested in unlocking new technologies. These ranged from buildings and tools to advanced weapon systems, all structured within a branching tech tree. The interface was presented as a full-screen takeover that could be panned and zoomed with the mouse, allowing players to explore their options in detail. Future technologies remained hidden behind a “fog of war” until unlocked, giving the system a sense of discovery and long-term progression.

The settings screen was designed as a full-screen takeover, following familiar conventions to keep navigation straightforward. Options were grouped within a tab bar for clarity, while individual controls included sliders, toggles, keybindings, and carousel pickers. This approach provided a flexible and familiar toolkit for players to customise their experience.

Working alongside the Art Director, I produced a range of in-game assets that were used either directly or as paint-over material for the art team. Final imagery was created through a combination of MidJourney and Photoshop, blending AI-generated concepts with traditional refinement. This approach allowed us to explore ideas quickly, maintain stylistic consistency, and deliver high-quality assets for use across the game’s interface and supporting visuals.

The Civitas home page was designed to carry through the look and feel of the game while adapting it for the web. It needed to be fully responsive and highlight the core gameplay pillars, even though the game was still in early development with limited supporting material. The visual language established here also flowed directly into the dashboard and logged-in experience, creating a consistent journey from first impression to ongoing engagement.

The dashboard is the central hub for logged-in players. From here, they connect their wallet, complete daily check-ins, and manage premium currencies such as Runes and Fragments. It displays the latest auction activity and provides quick access to key sections like Quests, Events, and Clan overviews, acting as the launch point for a player’s ongoing engagement with the game.

The auction page gives players the opportunity to bid on The Chosen, utility-driven NFT characters that can be added to their village workforce for unique perks. Each card presents an overview of the character, while the pricing panel handles key states such as the current bid, the next increment required, and whether the player is the highest bidder. This design keeps the bidding process clear and competitive, while reinforcing the value of these limited characters within the wider economy.