Critter Catching Dashboard for Animal Crossing

Critter Catching Dashboard for Animal Crossing

I am not affiliated with Nintendo or the Animal Crossing franchise. The project is a conceptual design for learning purposes.

Project Overview

Role

UX Research

UX/UI design

Coded Prototyping

Tools

Figma

Visual Studio Code

Nookipedia API

Timeline

4 weeks

Background — What is Animal Crossing: New Horizons?

Animal Crossing: New Horizons is a cozy simulation game in which players manage their island, interact with villagers, and complete daily chores. One of the game's most alluring features is the ability to catch, collect, and sell in-game versions of real-life bugs, fish and sea creatures — collectively known as "critters."

Here's the catch: each critter has a specific availability window for when it appears on your island, determined by the time of day and the current season—both on your island and in real life.

The Problem

Critter information is referencable through the in-game encyclopedia, but the documented information is limited in value and not immediately accessible—each critter's information must be unlocked through their individual discoveries.

While this progression-based discovery system is intentional, much of this information is revealed routinely through other gameplay elements, making the game's decision to withhold it unnecessary. Additionally, the lack of accessible information within the encyclopedia itself makes the system inconvenient and frustrating for some players, especially those who are less familiar with the game or who have specific gameplay goals.

With nearly 200 catchable critters in Animal Crossing: New Horizons, how might I make critter information more accessible to players?

Audience

The target audience of this problem is Animal Crossing: New Horizons players, as outlined in the Research Methods section.

The Solution

The solution to information inaccessibility lies in eliminating unjustified barriers and ensuring the communication of clear, relevant information.

This approach reduces cognitive load by displaying only situationally relevant information and streamlines gameplay by accelerating the player's journey to their desired solution. These elements enhance the player's focus on the game and minimize the risk of disrupting immersion.

Design Strategy

The development of this project follows the Double Diamond method.

Research Methods

Gameplay Analysis (SWOT Analysis)

I conducted a SWOT analysis of the in-game Critterpedia to develop a full understanding of the current system's functionality and limitations, which I would then leverage as solutions in my final product.

The most significant issues I noticed with the current system were its high interaction costs and lack of informational transparency.

I conducted a SWOT analysis of the in-game Critterpedia to develop a full understanding of the current system's functionality and limitations, which I would then leverage as solutions in my final product.

The most significant issues I noticed with the current system were its high interaction costs and lack of informational transparency.

I conducted a SWOT analysis of the in-game Critterpedia to develop a full understanding of the current system's functionality and limitations, which I would then leverage as solutions in my final product.

The most significant issues I noticed with the current system were its high interaction costs and lack of informational transparency.

Personas

Personas were created to represent users with varying levels of familiarity with Animal Crossing: New Horizons.

Personas were created to represent users with varying levels of familiarity with Animal Crossing: New Horizons.

Personas were created to represent users with varying levels of familiarity with Animal Crossing: New Horizons.

Character Icons from Pablo Stanley's Open Peeps.

Early Wireframes

Low-Fidelity Wireframes

Mid-Fidelity Wireframes

Peer Feedback

Style Guidelines

Brand Alignment and Visual Inspiration

It was important that the visual design of this tool matched the style of Animal Crossing: New Horizons' in-game UI, ensuring that the connection between the two products was intuitive to users. To achieve this, I used resources like the Game UI Database, Nookipedia (the website, not the API), and Katherine Manalo's Animal Crossing UI Kit for visual references, iconographic assets and design inspiration.

Style Guide

Code and API Implementation

I used the Nookipedia API to fetch critter icons and information that meet the precise parameters defined in JavaScript: real-world time, season, and the user's residing hemisphere (These parameters are dynamic and determined by each user's system data).

Final Product

Impact

Relevant Results

Reflection

Next Steps