ELVTR - UX/UI in Gaming Coursework - Animal Crossing

Project Overview:
A study of the game Animal Crossing to further understand UX/UI practices in a gaming context. Project completed as a part of ELVTR’s UX/UI in Gaming course.

Animal Crossing on Nintendo Switch Header Image

Tasks:
UX Design, UI Design, User Research, Accessibility

Tools:
Figma, FigJam, Photoshop

Project Length:
8 Weeks

Challenges

  • Short timeline
  • Limited initial understanding of gameplay
  • Truncated user research (2 players)
  • Hard to improve upon a game with quality UX

UX Design

Player Journey

Image of a player journey flowchart

Paper Prototype and Flowchart

PaperPrototype
Flowchart for player early game flow

Initial Wireframes

Animal Crossing Home Screen Wireframe
Animal Crossing Gameplay Screen Wireframe
Animal Crossing Inventory Screen Wireframe

User Testing Results

Home Screen:

  • Users did not understand what the 'Select' Button would do
    • Showing which menu item is currently selected needed to be made more evident
  • 'Put Away' button was confusing to both users
    • Language for closing the menu needs to be more straightforward for first time user experience
  • Suitcase icon was confusing to the users. They did not understand that it would open the player's inventory
    • Icon for inventory button needs to be more intuitive

Gameplay Screen:

  • Users were not sure what the phone icon would open
    • The intention of the menu icon needs to be made more apparent
  • Suitcase icon was confusing to the users. They did not understand that it would open the player's inventory (same feedback from Home Screen)
    • Icon for inventory button needs to be more intuitive

Inventory Screen:

  • A user asked if the player is able to drop items
    • The design intention is for the players to be able to drop items, but there was no button to do so in the UX mock-up. This will need addressed.
  • Users were unsure how the player would move from one inventory tab to the next
    • A design element will need to be added to show the player how to move from one tab to another

Iterated Wireframes

Animal Crossing Home Screen Wireframe Iterated
Animal Crossing Inventory Screen Wireframe Iterated
Animal Crossing Gameplay Screen Wireframe Iterated

UI Design

Final UI Assets

Accessibility

Color Blindness Checks

Outcomes

  • Gained an understanding of how to apply UX/UI practices in the world of game development.
  • Practiced my skills working within a limited time period with limited resources
  • Learned how to practice UX alongside established game design documentation and principles

Working on this project gave me experience applying UX/UI practices within a gaming context, taking into account the intricacies of working along side game design. In the future I would like to round out this project by completing the inventory UI screen and diving deeper into user research to iterate and improve my designs.

Justin Fuss

717-422-7250

Copyright © Justin Fuss 2023

justin@justinfuss.com