top of page
wp9356478-4k-black-grey-wallpapers.jpg
Chrono-Trigger-Logo-PNG-File.png
VISUAL RE-DESIGN CASE STUDY.png
Group 11.png
wp9356478-4k-black-grey-wallpapers.jpg

Final Prototype

wp9356478-4k-black-grey-wallpapers.jpg

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
wp9356478-4k-black-grey-wallpapers.jpg

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

wp9356478-4k-black-grey-wallpapers.jpg

Battle Screen UI

Original
Re-Design
Screen Shot 2023-01-09 at 12.00 1.png
fre.png
Screen Shot 2023-01-09 at 12.00 2.png
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.

wp9356478-4k-black-grey-wallpapers.jpg

Main Menu UI

Original
Re-Design
F2.png
F1.png
sdfzdf.png
fsdfs.png
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.

wp9356478-4k-black-grey-wallpapers.jpg

Visual Design

Frame 19.png
Illustration780 11 1.png
Illustration778 2.png
Illustration789 1.png

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. 

wp9356478-4k-black-grey-wallpapers.jpg

Final Design System

Design System.png
Design System.png
bottom of page