Mother 3 Redesign
Modernizing a classic video game
Recently, a team of creatives made a fan tribute site for a reimagined re-release of the 2006 game Mother 3. The fan tribute was super cool with updated graphics, but they never designed a new interface. So, I set out to create a modern UI, focusing both on existing pain points and stellar visuals.
Project Type
Video Game Design
Role
UI Designer
Duration
5 Weeks
What is Mother 3?
Mother 3 is a Japanese RPG that was released by Nintendo in 2006 for the Gameboy. It was only released in Japan but gained a considerable following in America due to its wittiness, originality, and emotional premise.
In recent years, Curiomatic created a fan tribute site with a reimagined version of the game complete with updated graphics and 3D renderings.
Discover
Competitive Research
When I started this project, I really didn’t know anything about game UI conventions or best practices. So, I talked with others who knew more and went to work learning everything I could about the topic. I learned that turn-based RPG’s today, like Mother 3, have very different menus than they did almost 20 years ago.
Two of the most prominent menus used often in RPG’s are fight menus and inventory menus.
I found some examples of excellent menus for both fighting and inventory and learned what made them so liked by users. I wrote down my findings, so I could understand what elements to include in my UI.
What else makes a good RPG?
From talking to people and researching on the web so far, it had become clear that designing game UI’s is super fun. One of the best parts is that all UI’s are different!
However, there are expected conventions that add to the story and enjoyment of playing. These are some that I decided to focus on for this project:
The game should stay interesting during action scenes and quiet moments.
Leveling up, learning new battle moves or skills, and improving as you go along keeps player engaged.
The battle system and story are considered two fundamental pillars of an RPG. (I would add the inventory to this as well.) The reason people play is for the story, but they spend a lot of time battling.
Players expect a stunning presentation. The look of the game is as important as playing it.
Define
Identifying Opportunities for Improvement
My competitive research showed me what to strive for in creating the new UI for Mother 3. Now, I needed to look closer at the game’s original interface to understand what could be improved.
Problems to Solve in Existing Interface
Problems to Solve in Existing Interface
The Game Boy has two primary buttons on the right side, which currently requires players to navigate and select with the arrow buttons, which means a lot of tedious button pressing. The Nintendo Switch has more buttons on the right of the controller that can be mapped to each action, which is easier for users.
Icons are often used alone without labels
Icons are often used alone without labels, which can be confusing to players. I know that icons are most helpful in any UI when used in conjunction with labels.
Helpful information is often hidden or not available at all
Descriptions for actions is often hidden. In fights, health status of opponents is not available at all, and the signifier for using combos is completely hidden. Making these descriptions and abilities more transparent will help the user focus on the challenge of the fight.
Some menus feel repetitive of others
With a small screen size, some menus feel repetitive of others that could have been combined to make the interface simpler. Additionally, because less options are displayed at once, many actions are nested within other actions where this is unnecessary.
Benchmark
Determining Success
The existing interface was tedious to navigate. I applied my findings of modern trends designed for bigger screens with more buttons to improve the interface.
Additionally, I designed the interface to match the wittiness of the original game, remembering that the story is king. The theme needed to shine above all else when users played.
Design
Preliminary Sketches
I started sketching some ideas to improve the pain points I had noticed thus far. My sketches took their main reference from Persona 5 and Zelda: Breath of the Wild, though I incorporated elements from all the competitive research.
Moreover, I mapped out what each of the buttons on the Nintendo Switch would be used for in my interface according to conventions from the research.
Digital Mockups
After establishing the basic layout, I continued to refine the designs and incorporated the graphics designed by Curiomatic. I added color and even embellishments like word bubbles that matched the witty theme of the original game.
Deliver
Final High-fidelity Interface
I made some more refinements until the UI finally matched my vision. Below is the showcase of the new interfaces for both the fight and inventory menus.
Conclusion
I had so much fun working on this UI redesign for Mother 3! It was great to work on an interface that had so much creative freedom for this passion project. The use of conventions from competitive research, trying to understand what mattered most to users, and focusing on users’ pain points in the original game helped me create a successful redesign.
If I could do it again with more time, I would have included more user research and testing to verify my design solution. Additionally, I would have loved to have spent more time in the wireframing phase to explore more avenues for potential solutions, which I would have tested to see which users preferred.
One of the greatest challenges of this project was mapping the buttons, never having designed an interface for a gaming console, where this is the standard of navigation. Through research and thoughtful consideration, I was able to overcome this and plan out navigation of the game intentionally. Overall, I am very pleased with the way I overcame all challenges in this project and grew as a designer.