March 1, 2021
Like most kids of my generation, I loved Super Mario. But it wasn’t until recently that I saw how much influence the design and creativity of these wonderful games had on me and my chosen career.
The Super Mario design team was bold. Courageous. They were constrained by the same limitations as other developers on the Nintendo entertainment system (NES) and Super NES (SNES), but somehow through sheer creativity and attention to detail they created truly immersive and engaging experiences.
Now, as Creative Director at Tangent, I strive to create stand out design, incorporating into my approach a lot of what I learnt by simply playing Mario.
Here are just some of the design lessons I’ve learnt:
- Wayfinding
When you began playing Super Mario for the first time, you were pretty much on your own. There were few explicit instructions. Yet I somehow knew what I had to do – if I jumped on Koopa Troopa, he’d retreat into his shell.
The design provided enough subtle hints to help me out. In addition, the consistency of this interaction pattern meant if I did it once, it was learnt and replicated throughout the game.
That’s something that I’ve built my own design process around. You can’t create a cohesive website experience if you’re constantly having to tell your visitors what to do.
Instead, I look at building consistent interaction patterns – if this, then this – so that navigation becomes almost second nature.
- Onboarding
Super Mario didn’t bombard you with everything at the start. The first world in Super Mario Bros only introduced two enemies. The rest were brought in gradually as the game progressed.
New skills, new modes of travel, and new ways of interacting with the environment were all introduced gradually.
I do the same. Whether I’m onboarding new technologies, new people, or new design features, it’s a gradual process.
There’s no point introducing new things when they’re not relevant. By doing things at the right time, again, it’s about becoming second nature. It’s about being ready, contextually, to take the next step.
- Design components
If you take a really close look at the design of the Super Mario levels, you’ll notice there’s less going on than you think. Pipes, platforms, clouds and bushes are composed of a limited number of repeatable components.
Mario’s superpowers are signaled simply through a tail or a different hat. There are actually very few unique design elements.
And yet, it was never a problem.
The designers took these limited components and made the most of them. This is a lesson that’s important for every designer.
When you are presented with a finite number of website components or building blocks, it’s OK. It’s how we put these building blocks together that matters.
- Discovery, surprise, and delight
At their core, each Super Mario level was pretty much the same as the last. And yet I kept playing. I never got bored. That’s because there was always something exciting and new to discover.
Mario was full of small yet intriguing design tricks, which kept my attention and rewarded my return to the game.
This is one of the most important things I’ve built into my own design strategy.
Don’t forget the detail, it’s these design decisions that elevate your design from good to great.
Surprise and delight when you can, and try to reward the return user with new and engaging content and experiences.
- Compromise & considerations
No designer likes the word ‘compromise’. But it is important.
As designers, we all get these great ideas. But then we have to remember that we’re designing for our clients, and their users.
There has to be compromise to ensure your design works for everyone involved and is practically implementable.
For example, a fantastically playful and creative web experience is great, but useless if it takes an age to load.
The Super Mario design team clearly had great ideas, but they were restricted by a 320x240 pixel canvas and the storage capacity of the NES Cartridge. The original Mario was only 31kb - 1/100 the size of the average iPhone photo (3MB). But despite this, the designers came up with innovative and interesting results.
Results that they never would have got to without restrictions or compromise.
- Collaboration with developers
All designers face restrictions, but collaborating with developers can help us come up with brilliant new solutions.
One such workaround in Mario, was the use of tiled textures – a common trick in games of the era – freeing up space for other ideas to be implemented.
Speak to your dev team, they may have ways of implementing your ideas that are more practical, quicker to build and will enable you to get closer to your design vision within time and budgetary constraints.
Limitations drive opportunity
It’s amazing that something so rudimentary as a 31kb game on a tiny canvas could offer such a compelling experience.
It just goes to show that no matter the limitations, there are always opportunities to create a wow factor for your clients; not through bells and whistles, but through using classic, tried-and-tested design principles in creative ways.
Anyhow, must go, I have to save Princess Peach…
Need some design inspiration of your own?
Here at Tangent, we look to all sorts of sources for inspiration. Here are a few places to start your search.
If you'd rather leave it to us, get in touch to talk to us about your design challenge. You can also find out more about our design work here.
