Video game UX/UI
UX/UI design project
Overview
Creating concepts for a game from scratch
This case study showcases the high-fidelity mockups designed for Clan Quest, a hypothetical game project. This work was completed over a 14-week period as the final deliverable for the "UX/UI Game Development" course by UI PEEPS, led by instructor Stephan Dube.
The project focused on applying UX/UI principles to create a fully realized, polished interface concept within a game environment.
Note: AI Art was used to support this project
Key Results & Value:
System Design: Built a Design System that acts as the visual foundation for Clan Quest, ensuring cohesion across mechanics.
UX Strategy: Created a mobile-first flow that manages complexity, making core actions (like resource management) intuitive.
Shippable UI Quality: Delivered a UI concept, proving ability to execute a full project and implement touch-friendly ergonomics for high-frequency gameplay actions.
Role
Team
Timeline
14 Weeks
Platform
Gaming / Mobile
Tools
Figma
Photoshop
Illustrator
Concept
Game Story and Core Concept
Clan Quest is a concept game that blends strategy, base management, and social interaction. Players assume the role of a Clan Leader guiding a diverse group of animal members with the objective of growing their clan's prestige throughout the kingdom.
The game is structured around three primary phases:
Clan Management: Shopping, assigning tasks, undertaking quests, and social interaction.
Mini-games: Gathering resources and unlocking new content.
Battle Phase: A turn-based combat system.
Inspirations: Cult of the Lamb, Animal Crossing, and Pokémon Mystery Dungeons.
Discovery
Mapping Complex Systems and Processes & Dependency Flows
This stage focused on defining the target audience and mapping their key interactions to ensure the UI supported core game objectives.
Personas
To understand the question, "Who would play this game?", I developed three distinct personas representing potential player types and their motivations
Understanding this core demographic and their expectations was essential for determining which gameplay mechanics and UI screens that I should include for the demo of the design.
User Flows
This blueprint guided the design decisions I made for the prototype, helping me determine what content and navigation elements were needed for the primary Clan Management Screen.
Key Results
Feature Priority
Understanding player motivations (via Personas) determined and prioritized the Clan Management mechanics and UI screens in the final design.
Clear Game loop for Players
The User Flows helped map out the essential game steps, ensuring an experience where users can find what they need and complete objectives.
Wireframing & Iteration
Gaming for the mobile player
My wireframing process focused entirely on creating an interface optimized for users on mobile devices, where navigation is driven by touch and swipe gestures.
Based on a moodboard, I experimented with multiple iterations of key UI menus to determine the most effective layout for the Clan Management system.
The designs prioritized accessible navigation paths, ensuring all core tasks identified in the User Flows could be completed with minimal effort using native mobile interaction patterns.
Style Guide
Building a Cohesive Design System
Building the foundational design system for Clan Quest was a quest in itself. The design is inspired by bright, vibrant colours, cute typography, and simple iconography, reflecting the game's wholesome but strategic nature.
Moodboard
I gathered inspiration from existing RPG and strategy games such as Pokémon Mystery Dungeons, Final Fantasy Tactics, and Cult of the Lamb. These help establish the visual tone and patterns for the creation of the UI system.
Design Components
I built a design system to ensure all UI components worked together cohesively and were easily scalable.
Typrography
I wanted a typeface that completed the art style, fun and playful while ensuring readability across mobile devices.
Colours
I wanted a typeface that completed the art style, fun and playful while ensuring readability across mobile devices.
Final Mockup
Concept to Prototype
The final high-fidelity mockups represent the 14-week design process. They were created through continuous iteration, refined by collaboration and feedback from classmates and instructor Stephan Dube.
This final presentation brings together the comprehensive design system, user flows, and wireframe testing to showcase the fully realized Clan Management UI concept.
Reflections
What I learned
UI Game Design
Designing for a hybrid system (Strategy + Management) is tricky. You have to work hard to make sure all menus flow well together and display information without overwhelming the player.
Game Brand Style
Building that detailed Style Guide (colors, fonts, icons) taught me that the UI has to look and feel like the Game's Main Aesthetic. This keeps players immersed and makes everything look consistent.
Mobile-First Design
Since this was a mobile game, I learned to design buttons and layouts for easy reach. Core tasks (like assigning a clan member) are hard to tap, players get frustrated. Ergonomics is key.
