allen hansrisuk

🔙

Product Design

Pocket Value

Lightweight, item value reference guide for Animal Crossing: New Horizons created to address quality of life issues in the game. Item Database API was created using Laravel Lumen and front end was created using Vue.js. Featured as a top post on Reddit's /r/webdev community. Link to app ->

wireframe 1
wireframe 2
wireframe 3

Testimonials


  • "Excellent app! My wife loves animal crossing and will be using this app a lot!"
  • "Good f%#*ing job. This is exactly how you get projects, tech stack check marks etc added to your portfolio."
  • "This is amazing! perfect colors and minimal without being obscured."
  • "Thanks for making such a useful, mobile-friendly site. I have it as a tab that’s always open on my phone’s browser!"

Background


ACNH

Animal Crossing: New Horizons is a 2020 life simulation video game developed and published by Nintendo for the Nintendo Switch. It sold five million digital copies in its first month, breaking the console game record for most digital units sold in a single month. It became the best-selling game in the Animal Crossing series and the second best-selling game on the Nintendo Switch, with over 22 million units sold. Its success has been partially attributed to its release during the COVID-19 pandemic, with players seeking a sense of escapism amid worldwide stay-at-home orders (Source).

Problem/Assumptions


Within the game, you are able to buy tickets to visit other computer generated islands. On these islands, you can take part in gathering items, fish, bugs, and other resources with the intent to sell them on your island for the in-game currency, Bells. The Bells are then spent to improve your own island. Since the number of items you can carry is limited, it is in your best interest to bring back the most valuable items from these island visits in order to maximize your haul. With the vast number of items available in the game, I set out to create an item database for all items available under the assumption that other players of the game would find this documentation useful.

Research


I set out to explore any existing databases on the game. Nook's Island, Nookipedia, and the Animal Crossing Fandom wiki were all websites that document item information. I documented what information each site presented, how it was displayed, and what potentially made one database more successful than it's competitors. While playing the game, I attempted to use each of these resources to accompany my gameplay.

bells

Goals


After conducting competitor research on the other databases, I was able to define the niche that my app would fill.

  • I would create an item database that displays the values of items found in the game.
  • The app would be designed with a mobile-first user experience. The competitors' mobile experience was very poor. I assumed that users enjoying Animal Crossing, are more likely to have mobile devices nearby as opposed to laptop or desktop devices.
  • None of the competitors had a feature allowing you to add the items to a virtual "cart". This would allow the user to quickly see how much their total inventory value is.

Design/Wireframing


The design system was inspired by the colors and fonts found in Animal Crossing. I wanted to create a companion app that users would feel fit perfectly with the UI in the game. I wanted to ensure that users could easily navigate app using one hand.

A typical task flow could include loading the app -> clicking on an item category -> clicking on the item to view info -> adding the item to the bag. However, there are many places where a user can simply add an item or check total value, bypassing some steps in the example task flow.

wireframes

From left to right: Home Screen, Alternate Home Screen Design with Item Category dropdown expanded, Item Information Modal, and Inventory Page with total value calculated.

Conclusion


The application was then launched as a single page application (SPA) with progressive web app support, further enhancing the mobile user experience. I was so glad to hear that other users have found this app useful and the /r/webdev community was supportive and helpful in submitting UX enhancements and bug reports. Overall, this passion project was a valuable exploration into backend and front end technologies, app deployment, competitive research, and wireframing. It was nice taking an idea through an abbreviated UX design process and making it a reality on my own.