About the Project

This is a case study for Animal Crossing: New Horizons that focuses on navigating the processes of UX research/UI design from flow chart to UI mock up. The following visuals highlight specific steps in the process as laid out below.

Length of Project

  • 7 Weeks

Roles & Responsibilities

  • UX researcher

  • UI Designer

Challenges

  • Understanding how to interpret colorblindness testing

  • Learning the best workflow practices to move assets across multiple programs

  • Learning how to conduct usability testing and analyze data

Planning

Player Journey

Paper Prototype and Flowchart

Wireframes

1st Iteration Wireframes

The “character profile” screen is an additional screen created from scratch with the intent of making the player feel more connected to the characters that they meet.

Character Profile Entries

Player Island Map

2nd Iteration Wireframes

Primary concerns addressed based off of player research:

  • Unable to see which character on the profile screen is currently selected.

  • Some confusion as to the meaning of certain icons on the map UI.

  • Unclear as to the purpose of the “mini map” button on the map UI when the whole map is already on screen.

* Since the map UI was pre-existing and did not need much change to be intuitive or navigable, I made minor changes to some of the icon designs instead for the final.

UI mockups

UI Style Guide

Moodboard

I played off of the general aesthetic of these screens, searching for a balance between the pastel colors and the vibrant accents.

Final UI Mockups

accessibility test

Color-Blindness Check

Based on the results of the test:

  • Chose NOT to make any adjustments

Reasons

  • The game does not rely heavily on color cues to guide the player the way a first person shooter would.

  • The contrast was strong enough across all scenarios the player is still able to differentiate the icons/buttons/options.

Results

Final Thoughts

  • Successful project in learning to understand the players and how they might navigate a game.

  • A great exercise in recreating pre-existing UI and also designing new UI based on the game’s style and aesthetic.

  • Based off of the “game designer’s” plans and intentions, I was able to learn how to map out potential screens and a corresponding flow chart that would work well through the eyes of the player.

  • This project gave me a good view of the UI design process that I can apply to my personal projects and further enhance my UI design skills.