Jump To Section
The Phantom Thief's Guide to the Metaverse
Persona 5 Royal Strategy Dashboard
Design Purpose & Goals:
Companion walkthrough guide for first-time players
Collect and visualize gameplay data & information
Highlight patterns & optimal playthrough strategies
My Role:
Ideate & prototype designs
Motion animate interactions
Vectorize UI assets & icons
Data research & collection
Tools:
Figma
Adobe Illustrator
Adobe Photoshop
Team:
1 Information & Website
UI Designer (Me)
Timeline:
Personal Project
4 weeks (Apr 2025 – May 2025)
Design Overview
Interaction design homage & companion guide to Persona 5 Royal
One of my favorite video games of all time, especially known for its iconic and incredibly-stylish UI design, is "Persona 5 Royal" (also abbreviated as "P5R"). In this game, the player enters the "Metaverse" and clears dungeons called “palaces” while defeating the different monster “shadows” that roam each palace along the way. As an homage to my love for the Persona series, I decided to create an interactive website that visualizes data comparing each of the 9 palaces along the following aspects:
Locations on in-game world map
Context about the palace’s boss and name/theme
Distribution of palace shadows’ elemental weaknesses
Average & range of palace shadows’ levels
Recommended party members for each palace
Time (in real life) it takes to clear each palace
Intended for players of Persona 5 Royal, both previous and new. Previous players can look back at this data and compare it to their personal game experience, while new players can use this website to efficiently guide their decision-making while playing through the game.
Overview pages for each palace
Recommended party members for each palace
Difficulty level of each palace
Real-life time to beat each palace
Brainstorm & Research
Brainstorm
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.
Research & Data Collection
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.
Interaction Flow
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.
Interactive Prototype
The Phantom Thief's Guide to the Metaverse
Persona 5 Royal Interactive Dashboard
Try out the interactive prototype!
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.