Jump To Section
MAHOU
"MAHOU" is a 3D magical girl x survival horror RPG. Touting the aesthetics of an ambitious crossover between "Sailor Moon" and "Resident Evil", MAHOU is a story where players
With the aesthetics of "Sailor Moon" meets "Resident Evil",
In Ewe-niverse, players take on the role of a galactic shepherd and rancher, tasked to manage a lively herd of alien livestock by herding them within fast-paced, action-packed exploration of biomes.
Designing the UI Art for an Indie RPG
Design Purpose & Goals:
Design UI layouts & visuals for game menus & HUD
Communicate the game's "storybook fantasy horror" genre
3D-model game environment, character, inventory, & other visuals
Enhance overall player immersion & world-building
Improve ease of navigation, mechanics use, & accessibility standards
Tools & Engine:
Unity
Figma
Blender
Adobe Photoshop
Adobe After Effects
Team:
1 UI Designer & 3D Artist (Me)
Timeline:
Personal Project
2 months (July 2025 – August 2025)
Design Overview & Static Mockups
HUD: Exploration Mode
HUD: Combat Mode with Reticle
HUD: Item Available
HUD: Item Obtained
Menu: Inventory (Item Selected)
Menu: Inventory (Item Move - Incorrect Placement)
Menu: Inventory (Register Shortcut)
Menu: Pause
Settings: Display
Settings: Display (Edit Mode)
Brainstorm & Research
Brainstorm Concept & Visuals
I started by analyzing the various screens and visuals that appear in the P5R game. I noticed a lot of high-contrast color palettes, irregular shapes, asymmetrical alignment, and silhouetted icons, which supports the game's story about breaking the rules and challenging societal norms and conformity. To properly express P5R's original brand, I made sure to reference these key patterns while drafting my own designs.
Ideate Gameplay Mechanics
I collected gameplay data & information by researching various game wiki sources and websites. The collected data was first organized in table charts to help me prioritize which types of data are essential for the purpose of my dashboard website. During this process, I realized the entire P5R game, which runs about 120 hours, had too large of a scope, so I chose to narrow my focus to specifically data about the palaces of P5R.
Planning the Interaction Flow & Content Requirements
Next I drew out the user interaction flow to help plan out what the complete user experience and journey would look like. Listing out the various pages and their possible interactions also helped me create a 'to-do' list of essential screens and components I would need to design. Following this interaction flow, I then created each page one-by-one in chronological order.
Design Details
Bringing the Phantom Thieves to life through design!
Noting the design patterns & key story elements I had previously analyzed, I created each page in a way that took inspiration from the original designs of P5R, while incorporating my own original arrangements to create completely new data visualization designs. The dashboard was designed in a way that encourages users to freely explore at their own pace as they would in the video game.
Landing & Cover Pages
In true Phantom Thief fashion, the animated cover simulates the idea of 'peeling back' the mask to reveal the hidden truth—in our case, the 'true' cover page. I created the title card to strongly resemble the game's Calling Cards used by the player proclaiming their intent to enter the Metaverse and steal a palace's treasure.
Navigator Menu
In the game, players use a phone-like device called the "Metaverse Navigator". The navigator's interface is never actually shown in-game, so I created my own interpretation of what the interface might look like by referencing real-life smartphone apps and used this design as the main navigation page for my dashboard.
Explore Palaces Map
Each palace's location in the cognitive Metaverse is based on a 'real-life' location outside the Metaverse. I added on-hover overlays to the in-game map to express how these palaces and their rulers are essentially 'hiding in plain sight'.
Palace Overview Pages
Each of the palaces are unique in their concept, ruler, 'shadow' variety, and more, so each overview page collects that info together in one place for the viewer. Hovering on the donut chart reveals what elements shadows are most weak to in that particular palace.
Party Recommendations
Which party members are recommended for each palace are laid out in a table chart. Hovering over each heart reveals that palace's elemental weaknesses, and the heart icon becomes 'shattered' as it would in the game after hitting the shadow with the correct elemental weakness. The back-facing portrait of Joker (you) was chosen to reflect the idea that his (your) chosen party members will have his (your) back.
Combat Difficulty
The level range for each palace is visualized in the form of a box chart. Bullets are used for each box plot as a reference to the weapons the Phantom Thieves use to defeat the shadows in each palace. The heart icon refers to the HP icon that is associated with each shadow you battle.
Time to Beat
I used a bar chart to visualize how long it takes (in the player's real-life time) to beat each palace. Flying knives were used as the bars to simulate motion as a reference to time and (palace) exploration.
Takeaways
Adapting existing branding to new designs — I really, REALLY, love the existing P5R design branding, and I wanted to pay proper homage to the game by ensuring my designs had a lot of recognizable references to the source material for viewers to enjoy. But at the same time, I realized that I needed to do more than simply 'copy-paste' P5R's existing designs, so I reinterpreted and rearranged P5R's most recognizable visuals to adapt to my own design's needs and purpose of data visualization.
Gotta know the rules before you can break them! — In my previous graphic design work, I paid extra attention to adhere to best graphic design practices & guidelines wherever possible. In this project, P5R's story is largely about breaking the rules and challenging societal norms and conformity, so I challenged myself to also bend and break those same best practices & guidelines in my designs in order to really express P5R's key brand & messaging. It was a really fun concept to execute, and it couldn't have been successfully done without fully analyzing and understanding the rules of graphic design in the first place!
Special thank you to Professor Michael Kelly for the regular design feedback & critique and advising me on refining my design intention & direction throughout the project's duration, and thank you to kendotlibero, ShrineFox, SkylaDoragono, & 80constant from "The Spiriters Resouce" for the collection of HUD art & icons.
The use of copyrighted material on the website is for non-commercial, educational purposes, and is intended to provide benefit to the public through information, critique, teaching, scholarship, or research. Original Images, Artwork, & Copyright © Atlus. © Sega. All rights reserved.