Teaching with Design: Super Mario Bros

The year is 1985 and you’ve just opened up your brand new cartridge of Super Mario Bros. for your Nintendo Entertainment System (NES). The NES is only a year old in the United States and has already changed home video gaming forever. You insert the Super Mario Bros. cartridge into your NES, arrive at the home screen and press “start”. The screen goes black with pixel art of “Mario x 3” letting you know that you have 3 lives to play with. This is the first indication of the rules of the game. The black screen fades away to a new world of red brick, blue sky with clouds, greenery, and one of the most famous game soundtracks of all time. 

Super Mario Bros. remains a classic for a reason. Shigeru Miyamoto created and designed the game, with the intention that the game teaches users how to play by showing, not telling. Though the game did come with a manual, it was assumed that many players would skip reading and jump right in. Miyamoto wanted to teach players how to play the game without instructions. In doing so, Miyamoto created a powerful lesson about simplicity and intuitiveness in user experience design.

World 1-1 Super Mario Bros. first level start screen

For users who have never played the game before, the first level of the game acts as a tutorial. At the top of the screen is a timer, a scoreboard, a coin counter, and the amount of lives left to play. Mario is placed at the left edge of the screen facing right, inviting players to move across the screen. 

As Mario moves to the right, the screen starts to scroll with him. As players move across the screen, the first blinking question mark brick appears with their first enemy. The Goomba is easily identified as an enemy with his angry pixelated eyes as it slowly creeps toward Mario. The question mark brick is blinking to bring attention to the goodies inside, and draws players to interact with it.

World 1-1 Super Mario Bros. first level screen expanded view

At this point, new players have now learned the most basic elements of movement: jumping, enemy combatants, and searching for prizes. As they move across the screen past the first Goomba, they are presented with three more question mark blocks and find another iconic component of the game: their first Magic Mushroom. 

The mushroom slides to the right off the bricks and rebounds off the green tube back towards the player. If players haven’t smashed all the bricks, the map forces them to bump into the mushroom and learn that they make Mario grow. The game gets more complicated from here with Starman and Fire Flower power-ups, and other more complex enemies and obstacles. But, from just the first ten seconds of the game, all players now have an understanding of how to play the game. 

Designing for User Experience is a complicated task. It can be very difficult for designers to separate themselves from the project and be in the shoes of someone interacting with the experience for the first time. The first level of Super Mario Bros. sets a high standard for UX design and demonstrates how simplicity can help users of various backgrounds interact with new experiences in a meaningful way. 

Read MORE

Creating Connection & Balance with the WORKSHOP Building Remodel

WORKSHOP senior account manager Alyse Carbonell sits down for a Q&A with Paula Rojas, WORKSHOP environments lead and head designer of the 2021 office remodel.

Learn more

I’m Going To Do Whatever This Card Tells Me

WORKSHOP senior designer Freya Johnson-Foster shares how Brian Eno and Peter Schmidt's "Oblique Strategies" card deck can further inspiration and push creativity to new heights.

Learn more

Everything is Designed: Creating a Tropical Summer Cocktail

WORKSHOP team member Khin Oo shares her very own lychee cocktail recipe, perfect for the hot summer months.

Learn more