I’m experience designer, specializing in immersive and game design. I’m based out of Brooklyn, NY.
Animal Crossing Redesign
ROLE: UI/UX Designer
TOOLS: FigmaCase study detailing my design process for a UI/UX redesign for Animal Crossing character customization.
Overview
I worked on this project as part of a UI/UX for Gaming course with Ivy Sang (Blizzard, ex-EA). This redesign aimed to fix some of the pain-points I identified in the player onboarding experience for Animal Crossing, New Horizons.
Problems with Player Onboarding
I focused on the player’s first 10 minutes in Animal Crossing, New Horizons. After reviewing multiple game play videos available online and documented my own experience playinig the game for the first time, I put together a player journey to identify the pain points.
These are the goals I set out to resolve:
- Elevate player immersion by seamlessly blending UI art with Animal Crossing's rich narrative and thematic elements.
- Uphold the beloved friendly aesthetic of Animal Crossing games.
- Increase the scaffolding available to the player for learning the game interface
Paper Prototype & Flow Chart
My research revealed confusion during profile setup at the game's start. I aimed to simplify this while providing enough context for confident decision-making.
Post-onboarding, players' character details are visible to others on their passport. I wanted to incorporate the passport into early character setup to provide context for where this information will be located within the game. This seamless integration enhances the transition to gameplay by grounding players in the game's world from the outset.
I informally tested the paper prototype to gauge the natural feel of combining name, birthday, and avatar customization on one screen. I also, I created a flow chart to map out the updated onboarding process, pinpointing opportunities to enhance scaffolding later on.
Usability Test
Incorporating player name and birthday input into the character screen, alongside numerous other options, presented a distinct UX challenge in structuring information and navigating through the Switch interface.
I created wireframes for both the character and game screens to test with colleagues. For the game screen, I aimed to enhance player guidance by integrating persistent button guides for key interactions, such as accessing the inventory.
UI Art Style
For the UI art update, my aim was to uphold the beloved friendly aesthetic cherished by Animal Crossing fans while delving deeper into narrative elements like the player’s Passport and Nook Inc., the island's travel company. To guide this process, I curated a moodboard and style guide for the new assets.
I put the style guide and color palette through a color blindness simulator to ensure all key elements were accessible to color blind players across the spectrum.
UI Art Moodboard - references with a skeumorphic, paper-y feel immediately caught my attentioined. I loved the use of tabs and layered paper to create texture.
Style Guide for Animal Crossing Redesign
Outcomes
Post-redesign, the character screen seamlessly integrates into the Nook Inc. world, prompting players to prepare their passport for their island adventure. Transitioning from a simple UI to a fully themed passport interface enhances player immersion, with name and birthday details cleverly incorporated onto a plane ticket for aesthetic consistency. This animated transition between screens allows for ample aesthetic options while maintaining coherence in character building.
Additional improvements include:- Adorable and user-friendly interface that builds on Animal Crossing themes.
- Streamlined user flow eliminates unnecessary features like a cursor and requires no additional button presses for selection.
- Persistent UI on the game screen (with an option to remove in settings) aids less experienced players in performing key tasks like opening their inventory.
Character Setup - BeforeCharacter Setup - RedesignName Input - BeforeName Input - AfterGame Screen - BeforeGame Screen - After