Final Prototype
Project Overview
Chrono Trigger is a role-playing game published by SquareSoft and originally released on the SNES in 1995. As a title that remains popular even 27 years after its release and continues to garner attention from new generations of gaming fans, it wouldn't be surprising to see Square Enix release an updated version of the game in the coming years.
As such, for this project, I wanted to imagine how a modern remake of Chrono Trigger might change its dialogue, battle, and menu UI in a way that improves the user experience and adds more visual flair. Further, since Chrono Trigger takes place across multiple distinct "eras", I wanted to incorporate this central mechanic into the UI by designing a unique UI theme for each era of the game that corresponds to the environment of each respective era. (for the purposes of my project, I focused on the first three encountered in the game- present, past, and future.)
I also created some "updated visuals" for this remake concept in the style of Square Enix's recent "HD-2D" games. Since this style has become popular for Square Enix to use in rpgs and remakes of their old pixel art rpg titles, I thought it would be fitting to create a mockup of how a Chrono Trigger remake would look in this style.
​
Note: As I do not own the rights to Chrono Trigger, this redesign reflects my personal design approach.
Timeframe
2 Months
Role
UI Concept and Design
Visual Design
Prototyping
Character Art
Platform
Nintendo Switch
Tools
Figma
Photoshop
Dialogue UI
Original
Re-Design
Future
Past
Present
Click images to expand
UX Design Process
The main change I wanted to make to the dialogue UI was to make it more visually stylish. As such, I made the following changes:​
-
Hand-painted a unique texture for the dialogue box. Hand-painting allowed me to ensure each UI had a rich texture and dimension to it
-
Added an area above the text to indicate what character is speaking, creating a better visual hierarchy
-
Added a character portrait to the left of the text, allowing for more emotion to be attributed to a character's spoken lines
Battle Screen UI
Original
Re-Design
Click images to expand
UX Design Process
Since the battles in Chrono Trigger have a time-based element, it's vital to the player's strategy to be able to execute attacks and decisions quickly. I made the following changes to make it easier for the player to digest all the elements on the screen:
-
De-cluttered the top half of the screen by moving each character's attack timer to below their sprite
-
Moved each character's HP and MP next to their action menu, allowing the player to view these important stats in the same moment they need to decide what action to have them take
-
Added a new cursor and outline on a character when their battle menu is selected in order to make it more visible what character is being selected to attack.
-
Made every tech visible at once on the Battle Tech Menu for quicker and easier navigation
-
Added a color-coded icon next to techs with an elemental alignment (lightning, fire, water, etc.)
-
Hand-painted a unique texture for the surrounding UI.
Main Menu UI
Original
Re-Design
Click images to expand
UX Design Process
While visually stylish the original menu navigation is a bit confusing and non-intuitive, with very little indication of what is in each section other than a vague icon. Further, there were a number of screens whose contents could be re-arranged for easier comprehension. As such, I made the following changes to the menu screens:
-
Moved the menu navigation to the left of the screen so it is clearly visible what menu option you are on/moving to
-
Added a clear visual hierarchy to the content being accessed. Any part of the menu not being accessed is grayed-out, making it easier to identify actionable items
-
Divided the original wholistic item menu into separate Items, Medicine, Weapons, Armor, and Accessories menus. Separating these menus allows the user to find the specific item type they are looking for much easier
-
Made a character's HP and MP visible when trying to use an item on them, making it quicker to reference what character might need the item.
-
Hand-painted a unique texture for the surrounding UI.
Visual Design
To supplement the changes I made to the UI, I also created new character sprites, and character portraits to be used with the UI. The character sprites were made in the style of Square Enix's recent HD-2D games, and the character portraits are meant to emulate the typical type of art style that is seen in modern jrpgs, while also remaining colorful and attached to the original character’s designs.
Final Design System
