The product
Reimagining the gameplay of Animal Crossing: New Horizons in the UI style of Super Mario while maintaining excellent user experience.
The challenge
Navigating the constraints of two very different and established design systems as the sole designer and researcher within a short time frame.
Role
Designer, Researcher
Duration
4 weeks
Tools
Figma, Adobe Photoshop and Illustrator
Why I made this project
Two of my favorite video games are Animal Crossing: New Horizons (ACNH) and various games from the Super Mario series. However, even with so many games under Nintendo’s Super Mario franchise, there has yet to be a social simulation game.
Since the massive success of ACNH, I thought it would be fun to reimagine how a social simulation game of Super Mario could look like using the blueprint of ACNH.
Player Journey
Game desirability and usability
To first understand what makes Animal Crossing: New Horizons so successful and appealing to players, I utilized a journey map to walk-through what players experience while playing the game and note the decisions they’re able to make.
Paper prototyping helped to further break-down the decisions available to players on each screen during gameplay and analyze areas for any missed opportunities.
Paper Prototype
Flowchart
Utilizing a flowchart allowed me to better visualize how players’ decisions on each screen would logically move them throughout the flow to other screens.
This process also helped ensure that players were able to make autonomous informed decisions while going through the game.
Next, I created initial wireframes of three major screens in the game to identify how players interpret and interact with the options presented to them.
Wireframes
Home screen
Gameplay screen
Inventory screen
Usability Testing
I ran usability tests with the wireframes above with players to identify behavioral patterns.
I wanted to better understand the motivation behind player preferences and identify which features of each screen are the most useful or confusing to them.
Usability test planning
Usability test session
Task 01/Home screen- You want to start playing the game now, how would you accomplish that?
Task 02/Inventory screen- Have your avatar hold the stone.
Task 03/Gameplay screen- Go to the home screen.
Usability test result
High-fidelity UI
Moodboard
UI Style Guide
Mockups
Home screen
Inventory screen
Gameplay screen
Colorblindness test performed: Red-Weak/Protanomaly
Reason: Buttons are red, want to make sure players with this type of colorblindness are still able to read the text against the red background because they are essential to being able to play.
Accessibility Checks
Although the colorblindness test I performed passed for all three screens in terms of the red buttons, I realized there are still some areas of improvement to be made to make it more accessible overall. Such as increasing text size, increasing white space, and increasing contrast, so I went ahead and iterated on those aspects.
Revisions
Home screen
Inventory screen
Gameplay screen
Final Screens
Key learnings and takeaways
It was challenging to work with the constraints of two established design systems, but it was rewarding to be able to use my creativity to bridge the two games.
Talking to people about how they play games continues to surprise me. No matter how much I prepare for potential follow-ups, our conversations always reveal something new.
Lastly, I’m making a note to my future self to be more strategic in sourcing for my target audience and being able to talk to a wider variety of people in order to better inform my design decisions later down the line.
View other selected works
Gains
Personal online fitness training
Oral Health Center
Seamless appointment making
Midori
An easy way to shop by style