Animal Crossing Critter Tracker
A simple and fun site to help animal crossing enjoyers track critters.
I wonder what I can catch right now...
I remember spending hours of youth chatting with my animal buddies in Animal Crossing: Wild World. I would search the internet for guides on how to catch rarest fish and bugs. Since this was a realtime game, sometimes I would find that my opportunities for catching my prized critters had passed and I would have to wait for the next day.
With the release of Animal Crossing New Horizons on the switch, my childhood nostalgia came flooding back. Again I began my search for the rarest bugs and fish. As the familiar parade of browser tabs opened, each with tips on how to catch the rare Stringfish, I came to a realization. I was spending more time in an internet browser searching for information, than I was actually playing the game!
The web guides are filled with hyperlinked content that would bring you to the next interesting article. While it was good for the site's SEO ranking, it was super distracting from my goal as a user. It was time to make my own website that would fulfill my needs and get me back into the game as soon as possible.
Think like a critter hunter...
In order to properly define the problem I was trying to solve, I needed to prime my problem solving skills. I put myself in the shoes of an efficient critter hunter and walked through the process.
Empathizing with my users wasn't too difficult, since I myself was a critter hunter. But as an excercise in defining the problem, I created a flow chart which modeled the decisions and concerns of a critter hunter while they were immersed in the Animal Crossing Experience.
With my model complete, I could then move on to designing a UI that made sense for the user.
Designing the Site
With my problems properly defined I began brainstorming the best ways to display the information. The goal here was to reduce the amount of time spent browsing the internet when playing the game, so I needed to make the information super easy to scan and read. From the above notes, I structured the website to satisify user needs effectively and conveniently.
At the very top of the page, I added the site title, a timestamp, and a birthday alert. Since some critters only appear for a limited time per day, I wanted this information to be front and center. This way the user at a glance can determine how much time they have to catch the critters on the screen. Any critters displayed will be available to catch for the entire current hour.
I made sure to keep any time sensitive changes in a consistent spot in the site layout. I chose the left-hand side of the screen, since English speakers are used to reading text from left to right. I placed new info at the top, and any leaving creatures at the bottom to help the user prioritize their critter hunting.
The main content area is a grid view of critters. I've seperated bugs and fish into their own tabs as to not overwhelm users with too much info. Fish and Bugs are caught in seperate areas generally, and require seperate tools, and so I thought it was a natural way to reduce the cognitive load on the user.
If a user is curious about a critter, they can hover over the icon to see more info.
The site ended up looking a bit weird on mobile, so I also added a list view which creates a table with the same critter data.
Building the Site
With the design complete, I moved on to building the site. I chose to use Angular for this project, since I wanted to get more experience with it.
Since the data was static, I didn't see a need to add a backend or datasource. The data presented was readily available on the internet, I was just presenting it in a more curated way. As such, I stored all of the critter data in a .json file.
In order to host my site, I settled on using Firebase. Firebase would allow me to easily deploy my site and manage it with minimal effort (and cost).
Reflecting Years Later
I had so much fun designing this site! It was a great way to excercise my UX and UI skills. Reflecting on this project in 2024, I'm still really happy with the UI. I plan on updating this site soon with the latest Animal Crossing New Horizons critter data.
