Jujutsu Kaisen Game UI

Title Page

In this page I wanted to convey the mood and tone at first glance, while also keeping the style refined and simple. Too many games based on anime series end up leaning too hard into the manga expressiveness and include too many manga style components. This has always caused me to be less immersed in the gameplay then i would like to be and comes off as cheesy. I wanted to counter that by keeping the mood and tone more realistic and mature. This also keeps in theme with Jujutsu Kaisen by representing the more adult themes of the series. The main influences for this project were from Elden Ring, Dark Souls, Fallout and The Witcher. I love the Gritty RPG experiences of theses games and have wished to see a game like these in the Jujutsu Kaisen style.

Imagery

The imagery in the title page I knew would be one of the most important factors in setting the tone for the rest of the game. I went through several different iterations before landing on the Sukuna Finger in water. I knew I wouldn’t want a storyline for this game to be focused on playing as one of the main series characters, instead I wanted every player to be an individual living in the “Jujutsu World”. I want them to be able to make there own choices, choose their own factions, and decide what type of adventure they would have. Because of these factors I wanted to focus more on things that are foundational in the Jujutsu World such as Jujutsu high and famous curses like Sukuna. Sukuna remains the most potent antagonist in the series regardless of what other characters come and go around him through time. Sukuna’s finger are what represent him through the series (Itodori Yuji aside) and his fingers are iconic from any angle, silhouette or situation. They represent all of Sukuna’s malice and give an eerie tone for anyone unfamiliar with the series as well.

Menu Options

For the menu selections the idea was to have the Red Line action be to continue your story. I wanted to user to have the most seamless transition from turning on the console to actually playing the game. Players only need to press “new game” once, and press “load game” if they have multiple files. But they will constantly need to get into their current save file as fast and easily as possible, and I always hate when I need to jumble through menus on a game I’ve been playing for 50+ hours already.

Load Game

For the load game page I wanted to begin to introduce the styles that will show through the rest of the game. I still maintained the mood from the first page, but here I also introduce the manga panel background effect to selections. Along with a few icons, I start to blend the game styles into a mature but fun feel. Anyone who’s read the manga's will get a little treat in the first appearance of the Gege Cat giving a bit of advice.

Imagery

The imagery in the load game page is still focusing on Sukuna and the darker themes of the series to maintain the consistent mood. For players new to the JJK series it should just be another piece of cool art that elicits darker undertones. however, for the keen eyed fans they’ll recognize Sukuna’s Malevolent Shrine in the background. I thought it only right to bring the Gege Cat into the gameplay and build of this game. As the avatar figure for the creator in the manga, I wanted to pay respects and keep the theming from the original series. In the manga the Gege Cat appears at various times mid-story to explain complicated concepts or sometimes to just say hello to the readers. It’s a feature that I really love about the manga and felt it deserved a place front and center throughout this game.

Menu Options

For the menu selections I included 3 save slots in total. This I imagine will be a very large game, and too much file data might  be too large for some people to have installed. And since this is a high hour game users should have no problem with 3 save files.

Loading Screen

The loading page is actually a really important part of the user experience for me and with that means good UI. A pet peeve of mine is amazing games with terrible loading screens that take you right out of the experience. It’s as if they were treated as an afterthought instead of an opportunity.  I felt that it was really important to include aspects that make the player feel engaged and interested during the loading times.

Imagery

The loading screen page I felt was the area to pay homage to the amazing artworks on the covers of all the JJK manga books. They’re for most people the first thing that they ever saw of JJK that interested them and will hopefully bring out a sense of nostalgia in fans. For those who aren’t fans, its their opportunity to see that amazing artwork and might just spark interest in them for the manga series. The imagery in the loading screen changes with every new loading sequence and will have a large pool of images to shuffle through. One thing I want to keep consistent with every new load is a hint that is somehow related to the picture. Even if it’s through a subtle way that only fans will recognize  the connection of. For instance, in the example page, the main image is the cover of the manga book 7 featuring Choso, one of the main characters. While not directing the hint/fact specifically at Choso, the hint tells the player about the games “poison affect” which is a key factor of Choso’s powers being that his blood is poisonous. The last feature to tie this page together is that the hint is presented by Gege Cat, as the avatar for the creator and presenter of hints and fun facts. It’s portrayed as a manga style text bubble to keep the theme that the source of this material came from a manga series.

HUD Heads-up-display

The heads up display was a lot of fun to establish and I wanted to keep the feeling that its a serious rpg while still adding the manga charm. A main focus I wanted to establish was only having the essentials appear on screen, too many HUDs show everything and it can get cluttered very quickly. I went for a simple and clean approach that forces player to remember there inventory and maintain a level of immersion in the setting.

Imagery

A few design elements that are used throughout the menus is brought out here with the yellow bordering and curse papers around the curse energy bar. One feature of particular importance is the “clock” feature in the lower right corner of the display. Because curses have the potential to be more active and lethal during the night, it’ll be important for players to watch out for the time and to plan missions and travel accordingly. Additionally, underneath the status bars are boxes with symbols, These indicate what types of cursed energy you have affinities to. For instance, if the users character has an affinity for summoning Shinigami then that symbol will appear above the curse energy bar. This would indicate that this type of ability will have a greater effect and be easier to use. The selection guide in the bottom left corner is again left very simple and can be rotated through each section by pressing the associated D-pad buttons. The configuration make it easy for users to tell which D-pad button will relate to each section. by keeping this area free of extra design flare it forces the attention to the main play area instead of the HUD.In keeping with the tone of the game being a choice based rpg, there is a status phrase above the selection guide that indicates what the characters status within their faction is. For example, in the HUD screen the display reads, [ Status: Student (active) ] this would mean that the character is an active student in a school and not suspended. This status will change depending on the choices the user makes. If they are a student and decide to kill an innocent person they may be suspended and unable to utilize school resources for missions for a time.Along with having a status that indicates affiliated groups as stated above, in the upper left corner is another status symbol. This is the JJK High button with a grade above it. Depending on affiliations, the color of this icon will change to reflect the groups. The grade allows the user to easily track there grade and help to guage wether an enemy will be to strong for ther

Cut Screen Dialog

The cut scene dialogs will be kept simple but diverse enough to make a difference in choices, the idea is to guide the user but let them feel like the options are there own. By keeping the options around 5, it lets the user feel like they can fit the response to their character best, however some answers will have a similar outcome. The inspiration between what this system would play out like is the relationship/ dialog of “Dragon Age, Inquisition”. Having the ability to effect the world based on conversations is a huge part of making the story immersive and exciting.

Imagery

The imagery of the cut scenes is kept simple and will reflect the anime style for conversations, so as to keep with the theme and mood of its inspiration. Having a simple name and phrase above the person who’s speaking means the user subconsciously fills in a lot of the conversational subtleties.

Quest Notes

The Quests screen was a really fun area to design and was a way to tie together different themes and create some unity. In the anime cell phone play a bigger role than most people think, the characters are seen using them for information in nearly every episode, including the first scene of the very first episode. Therefore, it only felt right that the place the user gets their information on quests and the world is through the characters cell phone. Having it as an overlay display gives the user the feeling that they’re still in the game. ( ideally this UI would be brought up with an animation from the character and used as if it’s being looked at in the characters hands.)

Imagery

Since a cell phone is fairly straightforward, the design focus is more on the screen information. However, some details like scratched metal of the phone and cracks lets the user feel like it’s not brand new and shiny,  (which follows since the character is fighting constantly.) In this menu selection the manga panel style is used again and keeps in theme with the main menu and load files menu.

Option Menu

The main stylistic feature of this menu is to bring in some of the elements from the manga. Here I wanted to remind users of the stories origin while keeping  a clean look. The menu is one of the only places that isn’t set up as feeling dark and heavy, I felt that it was important to keep the balance between moody and upbeat in order to match the gameplay.

Imagery

By using sections that look like manga panels and a background that has comic dots, it evokes the feeling of a manga. The typography here is particularly important in these menus because it brings all the themes around full circles from anywhere in the game. The font is specifically chosen because of its affiliations and use in manga's, and the large text is in the font of the Jujutsu Kaisen title. This menus is brought up as an overlay to still keep the user “in the game” rather than completely cutting out of frame into a new screen.