Nintendo Redesigns

Redesigning the UI of Two NES Classics: Super Mario Bros. 3 and Castlevania
SUMMARY

Problem

The User Interface (UI) elements in Super Mario Bros. 3 (1988) and Castlevania (1986) were minimalistic due to the Nintendo Entertainment System's (NES) technical limits, displaying only essential player information. While functional, these designs faced UI/UX challenges, including limited clarity, readability, and ineffective visual hierarchy.

Solution

Redesign the non-diegetic UI for Super Mario Bros. 3 and Castlevania to improve clarity and visual hierarchy, arranging elements by importance. The updates will preserve the games' nostalgic charm by using the original 8-bit sprites and typefaces.

Roles
UI/UX Designer & Researcher, Interaction Designer
Duration
6 weeks
Tools/Skills Used
Figma, Adobe Photoshop, Adobe Illustrator, Adobe Premiere
Team Members
Me, Myself, and I
JUMP TO FINAL DESIGN
BACKGROUND

Defining the Problem

Why Super Mario Bros. 3 and Castlevania?

I love watching others play my favorite games for the first time, as it lets me relive the experience through their learning and discovery. Recently, I introduced my nephew to classic gaming with my NES Classic Edition, which includes 30 essential NES games. He gravitated toward Castlevania and Super Mario Bros. 3, but struggled to understand certain UI elements, often needing guidance.

This inspired me to redesign the UI for these games to make them more accessible for new or inexperienced players. While not implementing the redesigns in the actual game, my project goals are to:

  • Identify key UI frustrations in Super Mario Bros. 3 and Castlevania.
  • Redesign their non-diegetic UIs for better readability, navigation, and feedback while preserving their retro charm.
  • Compare the redesigns to the originals to better understand what makes a great UI for classic games.
RESEARCH

What makes an effective UI for a classic NES game?

Playtesting and Interviews

I conducted playtesting sessions and interviews to identify usability challenges in the original UIs of Super Mario Bros. 3 and Castlevania. Observing players' interactions revealed specific difficulties with HUD interpretation, item management, and feedback clarity.

Pain Points:

  • Bottom of the screen is crowded with information.
  • Confusion with elements and their affordances: what is the $ value? Why is there a "P" with the arrows?
  • It's difficult to keep track of the time in levels because it's hard to find.

Pain Points:

  • Confusion with elements and their affordances: what does "P" mean in relation to the heart icon.
  • It's too easy to mix up player and enemy health.
  • There's too many words on the top of the screen, and their spacing with numbers creates confusion.
Competitive Analysis

After conducting the playtests, I looked into other NES games, and modern games with a retro aesthetic, to see how well they may address the pain points from the playtests.

Mega Man 2

Super Mario Bros.

Shovel Knight

Rollie

I concluded that a good UI in an NES game effectively balances clarity, functionality, and aesthetic simplicity within the constraints of the hardware.

My detailed takeaways that I would apply to the redesign include: 

  • Clarity and Readability: UI elements should be easy to interpret at a glance, even with limited resolution and color palette. Clear icons, intuitive symbols, and simple text (when possible) help players understand essential information without distraction.
  • Minimalism with Purpose: NES games had limited screen space, so a good UI uses minimal elements to communicate necessary information, avoiding clutter while keeping the focus on gameplay.
  • Logical Placement: HUD elements (such as health, score, and inventory) should be placed logically and consistently to prevent players from searching the screen for information.
DESIGN

Applying my learnings to redesign Super Mario Bros. 3 and Castlevania

Low Fidelity Design

When I started creating the low-fidelity mockups, I relied heavily on everything I’d learned during the research phase. The playtesting feedback and competitive analysis made it clear where the original UIs fell short, so I used those insights to guide the first round of designs.

These mockups were rough but gave me a clear direction for what to refine. They helped me figure out what worked and what didn’t early on, so I could focus on polishing the designs in later iterations.

WHY THESE CONCEPTS?
  • Decluttering: I reorganized the UI elements to streamline the layout, reducing visual clutter and improving the overall user experience. This can be seen with the elements now overlaying the screen like the score, world, lives, and coin count in Super Mario Bros 3, or the health bars and item in Castlevania.
  • Visual Hierarchy: I established a clear visual hierarchy to guide users' attention, emphasizing the most important elements through size, color, and placement. This can be seen with increasing the size of the Power Bar in Super Mario Bros 3, which was an element that many players would heavily focus on during playtests.
  • Clear Icons: In addition to changing their placement, I also made room to add improved icons for UI elements. This will be used for the lives in Castlevania, where I'll have a small sprite of the player, and a coin icon for your coin count in Super Mario Bros. 3.

Using Figma and Adobe Photoshop for High Fidelity designs.

Super Mario Bros. 3

My final design focuses on decluttering the UI by overlaying elements on the top of the screen. These elements were found to be more effective when overlaid from my competitive analysis.

I also changed the Power Meter to reflect its importance in the visual hierarchy. Users in my playtest found that they were often looking at the Power Meter during gameplay, but with the cluttered UI, it was hard to spot it.

Castlevania

My final design focuses on clarity and decluttering the UI. To declutter the UI, I brought the item, lives, health, and hearts to the screen with a new border that appeals to the aesthetic of the game. I also made the health bars vertical and removed their accompanying text, as it's implied during gameplay (This is an idea that I noticed Mega Man 2 executed nicely).

For clarity, I added an icon (Simon Belmont's face) for the player's lives. This replaces the "P" that players found confusing during gameplay. I also added a clock icon for the time left in the level to reduce the text on screen - a change that also declutters the UI.

REFLECTION

Having fun and using design tools

I really wanted to do this project to not just practice my design and research skills, but to explore a passion of mine in gaming.

Exploring Video Game UIs

During my research phase, I explored and played many video games, which was not only fun for me, but it gave me a lot of insight on how game designers convey game mechanics to the player.

I also came across several valuable resources on UI/UX specifically for video games. One standout was a video series on game UI by Masahiro Sakurai, the creator of Super Smash Bros. and Kirby—a game designer I’ve admired my entire life.

Check out Masahiro Sakurai's Game UI/UX series here!
Practicing Figma and Adobe tools

When designing my low fidelity and high fidelity designs on Figma, I was able to refine my skills with component libraries, typography, and styling (the game text). Figma was an extremely useful tool, and even recreating old video game assets was valuable experience.

Using Adobe Photoshop was extremely helpful, as I was able to create original assets like the retro styled border I made for Castlevania's overlay elements. With Adobe Premiere, I was even able to create a short video of my prototype for Super Mario Bros 3. in action!

Final Thoughts

One of the biggest things I learned from this project is how important iteration is. The first ideas were rough, but with testing and tweaking, I found a good balance between improving usability and keeping the original charm of the games. It also gave me a new appreciation for the creative decisions NES-era designers made within tight hardware limits

This project really drove home that a good UI isn’t just functional—it’s part of the game’s identity. By making the interfaces clearer and more intuitive while keeping the nostalgic feel, I was able to honor the legacy of these classics and make them more fun to play. It’s been a great lesson in how thoughtful design can shape the entire gaming experience.

Mohammad Noor Haider
Contact MeLInkedinRESUME