UX/UI for Gaming

I designed new UI elements for Animal Crossing to offer a better experience for players.

This project was completed for an online course offered by ELVTR.

About the project

I studied the UX/UI design for Animal Crossing: New Horizons.
My goals were to understand the player's experience and suggest improvements to make the game more enjoyable.

My roles

UX Design
UI Design
User Research
Accessibility Testing

Length of the project

7 weeks.

Challenges

Short time frame
Small sample size for usability tests
Limited experience creating art assets in Photoshop

My process

Understanding the player journey

The first part was to document a player journey through a linear section of the game.

The player journey outlines:

What does the player see and hear
What do they think and feel
What decisions they can make
Why they make those decisions

Based on what I identified, I could then write high-level ideas for opportunities that could make it a smoother experience.

Paper prototypes and flowcharts

After getting a high level understanding, I then used two more UX discovery methods to uncover all the options and opportunities.

The paper prototype breaks down each screen or scene throughout the player journey and the options available.
This helps UX Designers map player behaviors and uncover potential areas where the experience could be improved.

The flowchart organizes each screen or scene throughout the player journey in a linear way.
This helps UX designers map out the options players have and the flow of decisions they need to make. When decisions are easier to understand, the experience is usually better.

Wireframes

With the journey fully mapped out, I created low-fidelity wireframes for three important screens.

Map selection
Gameplay
Inventory

For one of these screens, I identified a potential update to improve the experience.

Map selection

Before starting the game, players are given the choice of four randomly generated maps which are only different in layout. Players who care about the landscape of their map would enjoy a way to pick the perfect map at the selection screen, so a "New maps" button that generates four new maps could offer an improvement to the experience.

Usability testing

Once my wireframes were created, I interviewed real people to test if the experiences made sense and gather feedback about anything that didn't. Below you'll see how I approached this process including planning, the data gathered, and the learned outcomes.

Planning

Player feedback

Outcomes

Interestingly through player feedback, I was able to identify another recommendation to improve the experience.

Inventory screen

Some items in the inventory use a generic icon when there is no art asset to represent it. Players who collect a lot of items and see multiple generic icons in their inventory might be confused where certain items are, which would slow them down when they go to access the items. New icon art or swapping with existing art that better represents the item would be a solution.

UI mockups and style guide

I used Photoshop to create new UI art for the map selection screen, and pulled existing assets from a UI kit for the inventory screen. I also created a small style guide for the UI art I've applied in my wireframes, although a real style guide would be much more comprehensive.

Accessibility testing

To ensure each screen was accessible to players with different eyesight capabilities, I tested them using a colour blindness visualizer.

Just like the outcomes of the usability test, this test helped me identify a new way to improve the experience for a screen that I previously thought was good as is.

Gameplay

Items on the ground are not clearly indicated as interactable objects. In some simulations, the item itself can disappear into the background depending on what colour it is. Adding a white highlight to the object when the player is near would help make it clear that the object can be interacted with.

Final outcomes

After studying the journey, creating wireframes, and testing the experience, I was able to create three proposed iterations to the Animal Crossing: New Horizons experience.

Gameplay
Highlighting objects when the player is closeby helps to make them visually identifiable as interactive. For players with colour blindness, this greatly improves the experience.
Map selection
With the New Maps button, the player has more control over their experience at the beginning of the game.
Inventory
By avoiding the use of generic icons, the player can identify which items are in their inventory faster and allow them to make decisions more easily.

Post mortem

This course taught me a lot of new things that will make me a better content designer. While I’m proud of what I delivered, there were lessons I learned which I will remember in future projects.

Takeaways

Take more time to understand the game. This will help make the process of identifying and recommending new features less ambiguous. 
Practice more in Photoshop. As someone with limited knowledge of the software, I'd benefit from using it in other applications to get better and incorporate it into my toolkit to become a more versatile designer.
Ask more questions during the usability testing. I tried to keep the questions short so as not to overwhelm my participants, but I think I was a bit too conservative and could have gathered more data to help confirm or challenge my observations.