I'm a huge fan of JRPGs and the Persona series is one of my favorites. Atlus continually sets the bar with stylish, flashy UI that pushes the conventions of standard menus. Their justification? They recognized that gamers spend significant time navigating menus in RPGs, so the team believes having a pleasing UI can only improve game immersion (Source).
I was inspired to make a brief UI analysis comparing Persona 3 (2006) to its remake Persona 3 Reload (2024) after reading the official artbook and spending a solid 150+ hours playing both games back-to-back. As a UX Designer, it’s fascinating to observe how visual trends and usability conventions have evolved within the same game over ~20 years. And as a gamer, I need to pass the time until the P3R DLC. ;)
There’s countless screens to talk about regarding the style and art of Persona 3, but I’ll focus on comparing the visuals and functionality of the Title Screen, Main Menu, and the Battle UI.
In the title screens below, we see the protagonist's silhouette against a classroom window and full moon. Reload's showcases a stylized 3D render, but with improved perspective, typography, and animation from the original. Reload's animation of "Press Any Button" even mimics the original's rippling effect.
One significant change is the color palette — the original's soft, monochromatic color palette has been modified to be more bold and distinct in hue. The primary blue has also been slightly redesigned to be closer to cyan, a color that is a perfect complement to highlight the crew's red armbands.
The color cyan also symbolizes “tranquility, youth, and energy,” which sounds appropriate for a story about high school students that's set on an island city. The overall game is contemplative with serious narrative themes of life and death, but the bright colors in Reload represent the silly and fun story beats to be had in between all of that.
Persona 3's original Title Screen.
Persona 3 Reload's Title Screen pays homage to the original, but is visually stronger in every aspect.
Persona players can attest that the series is an interesting combination of role-playing and social simulation that just works, and the main menu has to accommodate the management of both.
We see that Reload's main menu surprisingly retains a majority of the original's content. If anything, it has been simplified to have less elements, taking time to declutter and compartmentalize lesser priority information. For example, P3R replaces the protagonist stats for an overview of the party's health in the upper right when in Tartarus. When outside of Tartarus, the party health view is appropriately absent.
There’s another clever use of cyan-red complements — when combined as light, they turn into white. The hover state of menu items reflects this fun use of color theory that's almost reminiscent of chromatic aberration.
P3 Main Menu has a few redundant elements — bullet points, unclear hierarchy of what can be interacted with, and the use of yellow as an accent. We always see the main character's battle stats, even if they're not relevant to the current location.
P3R Main Menu while exploring Port Island, slowed to 0.5x speed. The party health and stats is appropriately absent when exploring the school and city.
On the topic of the main menu, I think it's worth looking at a couple main menu explorations that were ultimately scrapped for P3R. The top right prototype shows the protagonist geometrically segmented, with the outcome reminiscent of manga panels or even tarot cards, which are essential elements of the game. As stylistic as this screen is, it's understandable that the team scrapped this design, as it becomes difficult to intuitively know how to navigate this screen and also have to scale to hold ~10 menu items.
The lower right prototype has a more straightforward list for navigation. It looks like both the city background could change based the player's location, as well as the reflection with each the hovered menu item. There's no obvious functional issues with the second prototype, but I suspect it was still scrapped since its design wasn't as strong and thematically tied to the story as the final, underwater UI was.
A couple of unused prototypes of the main menu.
Undoubtedly inspired by Persona 5, P3R corrects some of the original's clunkier battle flows, most notably Persona switching. Switching Personas is a crucial tactic and typically occurs multiple times per battle. In the original, each switch took approximately 12 INPUTS. Reload simplifies this by mapping essential tactics to the controller's action buttons — the resulting flow is 4 inputs to switch Personas, a 3x decrease!
Reload also better utilizes the entire controller to quickly access any skill at the press of one button, as seen with the button mapping comparison to the right. Making these flows quicker to access most likely reflects the industry's trend toward action RPGs and a desire to innovate turn based combat.
Several skills are mapped to action buttons in Reload. While players had to be scroll through a list access all skills in the original. Same skills are highlighted.
There's so much to learn and be inspired from by just deconstructing this game's UI — every single frame of the game is visually stunning. It's clear the new development team had nothing but love and respect for the original game, and had carefully decided what to preserve and what to redesign.
It's also exciting to see how receptive players are to experimental UI. What was once considered an auxiliary element to gameplay is now receiving the recognition it deserves. I can't wait to see what Atlus has in store with their upcoming games.