Jump To Section
MAHOU
"MAHOU" is a 3D magical girl x survival horror RPG, playable on console and PC. An ambitious crossover combining the themes of "Sailor Moon" and "Resident Evil", MAHOU traps players in a fantastical universe swarming with supernatural monsters they must survive against using the various magical, spell-casting weapons they collect along their journey to escape.
This project showcases the concept UI for a variety of HUDs, inventory, and settings menus the player interacts with throughout the game.
Designing the Player Interaction Flow & UI Art for a 3D Video Game
Design Purpose & Goals:
Design player-facing interfaces & visuals for game's menus & HUD
3D-model game environment, character, inventory, & other visuals
Ideate game's concept, story, and core gameplay mechanics
Enhance immersion & world-building of the "magical girl horror" genre
Ensure ease of navigation, mechanics use, & accessibility standards
Tools & Engine:
Unity
Figma
Blender
Adobe Photoshop
Adobe After Effects
Team:
1 UX/UI Designer &
3D Artist (Me)
Timeline:
Personal Project
2 months (July 2025 – August 2025)
Design Overview & Mockups
HUD: Exploration Mode
HUD: Combat Mode with Reticle
HUD: Item Available
HUD: Item Obtained
Inventory: Item Selected
Inventory: Item Move (Incorrect Placement)
Inventory: Register Shortcut
Menu: Pause
Settings: Display
Settings: Display (Edit Mode)
Brainstorm & Research
Step 1: Conceptualizing the "Magical Girl Survival Horror" Genre & Brand
After some initial brainstorming deciding what kind of game I wanted to design a UI concept for, I settled on the concept of a "magical girl survival horror RPG" by combining two of my favorite genres of media. To kickstart my concept visualization, I started by compiling together a visual moodboard that featured different elements of the magical girl genre, liminal spaces, & fantasy and/or eldritch horror to match the game's direction and story, focusing on themes of psychological escapism, childhood nostalgia, and memories.
From my moodboard, I compiled an initial color palette that I would use for the game's initial concept arts and foundational UI. I also decided to add an illustrative 2-D look to the game's art by using high-saturation colors, solid cell-shading, and black outlines in order to help express the storybook feeling of the game and emphasize a distinction between light and shadow (i.e. 'good' vs. 'evil'). I used a color palette of highly-saturated indigos, purples, and pinks to create an artificial look to the materials and setting, evoking an overall feeling of an alternate dimension full of uncanny mystery.
Example of final game art style
Step 2: Ideating & Designing Core Gameplay Mechanics
With the "magical girl survival horror" genre in mind, I thought about what the core gameplay would look like. I brainstormed how the combat system would work, what kinds of items the player may find and use, what the game world would look like, and major themes in the game's storytelling.
Gameplay highlights include:
Story Concept: A disillusioned late-20’s office worker who’s lost her memories & wakes up in a strange paranormal world. She learns she is able to ‘transform’ into a magical girl using a magic compact she recognizes from her childhood. She must survive and recover her memories while uncovering the mystery of this world.
Weapons: Variety of weapons inspired by items seen in Magical Girl media (e.g., magic wands, staffs, compacts, etc.)
Ammo: Every time a weapon is fired, one energy unit is depleted (similar to firearm ammo); can be refilled by finding magic draw-points, draining from defeated monsters, or using 'batteries'.
Combat: Each weapon fires different elemental magic, and different monsters will have different elemental weaknesses and immunities.
Crafting: Like a witch brewing potions & spells, player can craft items for healing, immunities, magic ammo, etc.
Exploration: Utilizing the 'over-the-shoulder' 3rd person perspective, players will explore a variety of 3D environments where they will fight monsters, find key items, and collect resources/ammo.
By ensuring I have a clear image about the gameplay, mechanics, and story before I start wireframing, I could think about what UI elements and screens should be prioritized and what information the player needs to know at each point in the game.
Step 3: Planning Interaction Flows & Interface Content Requirements
One mechanic I wanted to especially flesh out was the use of a limited inventory system. The player would need to be conscious of what items and how much they are carrying in their inventory during the game based on the limited spaces for each item type. I mapped out the inventory system's player interaction flow to plan out the required content that needs to be shown at each step/screen of this particular mechanic & player experience.
Since this was to be a concept project, I focused on creating a small number of designs, prioritizing the functionalities and menus that the player would most frequently interact with. These were: the main exploration & combat HUDs, the inventory menu, the pause menu, and the settings menu.
Sketches & Wireframes
Step 4: Early-Stage Sketching & Experimenting with Visuals
I started sketching different iterations of what the menus could look like. I focused on making sure all the required content for each screen was appropriately presented and accessible to the player, and then designed visuals to highlight the available interactions while adhering to the game's concept and genre.
Pause Menu V.1 - Emphasizes the cast shadow and uses its shape to draw attention to the interactable menu options
Pause Menu V.2 - Centers focus on the music box compact and the spinning figure of the player character
Settings Menu
Inventory Menu
HUD V.1 - Winged Pendant Mini-Map
HUD V.2 - Compass Mini-Map
HUD V.3 - Celestial Globe Mini-Map
HUD V.4 - Star Compact Mini-Map
UI Design Details
HUD: Level Exploration & Combat
The HUD's primary function is to show the player the essential info needed to complete the current level, while also keeping the display area blocked by the interface to a minimum for the player to easily spot incoming enemies or interactable items & puzzles.
Mini-Map - Players can view their current location and location of obtainable items.
Player Status - Shows what equipped weapon & its element, how much magic remaining (i.e. ammo), and how much health the player currently has.
Aim Reticle - When encountering monsters, the player character can switch into combat mode by holding the designated button, and the HUD will now also display a reticle for aiming their weapon.
Fast-Equip Menu - Players can quickly change their equipped weapon by using the designated button/keyboard command set in the inventory menu.
Obtainable Item - An overlay will appear on the HUD to prompt the player to pick up or interact with certain items on the level.
Pick-up Success - An overlay message will appear on the HUD to inform the player when they've successfully picked up an item.
Inventory
One of the core gameplay mechanics is a limited inventory system. The player's inventory space is limited by a grid system & item type categorization. System constraints were also created to help guide the player and prevent user error.
Spacing Grid - Indicates amount of available space and space needed for each item.
Item Details - Information relevant to each item type will be displayed and updated as the player moves their cursor over each item.
Color-coded Shelves - Each item type can only be placed in their designated compartment (as coded by color).
Green - Weapons, Potions, & Combat Items
Purple - Crafting Resources
Blue - Key Items
Yellow - Sellable Treasures
Registering Shortcuts - Players can register a weapon into 1 of 4 button or keyboard shortcuts for fast-equipping in the overworld.
Moving Items - When the player tries to move an item into the wrong compartment or is overlapping space with another item, the selected interface will highlight red and constrain the player from incorrectly placing the item there.
Pause Menu
The pause menu features an image of the player character spinning atop their transformation compact like a music box, referencing the game's motifs of childhood nostalgia and the player character's doll-like qualities and predicament throughout the game's story.
Settings Menu
Playing off the star compact seen in the pause menu, the settings options are displayed on the battery cover at the bottom of the compact, emulating the idea of tinkering the transformation compact's mechanics.
Game Models & Environment
Designing & Building the Environment, Characters, & Menu Visuals
In order to create mockups of how the HUD UI would look like implemented in the game, I also modeled one of the game's environment levels and the player-controlled avatar character.
3D Environment
The environment was built to resemble a school classroom from the player character's early memories. I focused on expressing that although a school classroom should be a familiar sight, there's a sense of uncanniness expressed by the abandoned furniture, pitch-black shadows, and supernatural lighting.
Player Character
The player's character design draws inspiration from magical girl characters like Sailor Moon and Madoka Magica. Since the genre of this game does include horror, I balanced out the bright pinks and whites in her design by giving her dark gloves, boots, and bows as well as black lashes and lineart to give the character a more gothic, doll-like appearance.
Inventory Suitcase, Weapons, & Other Obtainable Items
The inventory suitcase's model is inspired by antique apothecary cabinets. The player is able to combine certain items to craft healing potions and magic ammo, which are actions heavily associated with witchcraft (and distantly in our time, apothecaries). I also wanted the carrying item to utilize a compartment system where items are restricted to certain color-coded spaces based on their type (e.g. weapons, resources, key items, and treasures), which adds another dimension of strategic resourcefulness to the overall gameplay experience.
Final Design System
Takeaways
Understanding Game Concept & Mechanics for UX — Although MAHOU is a concept UI project, I quickly realized that I also needed to design the game's core mechanics and story (i.e. play the role of a game designer) in order to create a basis for the UX/UI. It's essential to have a clear understanding of the game designer's intentions for each interaction and screen so that I can ensure my UX/UI designs will properly and intuitively navigate the player through the game as intended.
Combining UX Practices & UI Artistry — MAHOU's unique art style is a major contributor to the game's overall immersion and world-building. I wanted to ensure that throughout the entire game, even when the game is paused or is configuring settings, the player remains immersed in the story of MAHOU until they physically exit out of the game. I wanted to design visually-stunning interfaces for MAHOU without compromising on best UX practices. So each screen was thoughtfully designed to ensure adherence to UX design principles such as visual accessibility standards, ease of navigation, intuitive information architecture, and more.
All Illustrations & UI Assets © Chelsea Mai. All rights reserved.
Model Credits