A UX case study exploring how I created my art checklist.
If you want to see it in action,
click here!
GamingUI/UXFront-End Dev
This is the last thing I saw before losing 1200+ hours of my life.
I think it tends to be easier said than done when it comes to developing something from scratch.
We all have these sorts of “blue sky” ideas as designers, but when it comes to feasibility, it’s
easy to pass the buck to engineers or tech dev.
This challenge is meant to help me get better at bridging the gap. I’ve done 24-hour design
challenges before, but they’ve stayed within the safe borders of Figma and Adobe XD (throwback!).
This time, I wanted to make a very basic museum checklist with cute, Animal Crossing-inspired UI
and design and develop it myself.
Are you thinking, “Gee, that seems kinda random”? Yeah. You’re correct. This is a situation where
I’m not doing any demographic research, which goes against my usual flow.
So... Why am I not conducting any UX research?
A picture of me in action, conducting UX demo research (2025).
In this case, I am the end user and I’m developing a project for my own selfish, museum-completionist
desires.
Seems niche?
Yeah, you’re right again! This actually stems from a very odd edge case that drove me absolutely
wild. I do a daily walk as an excuse to play as many video games as I can in the time it takes
to knock out five miles on the treadmill.
The current method of finding peace is to power-walk while playing Animal Crossing: New Horizons. It is a great
game, but I'm already fearing going too into depth, as this already reads as one of those recipe pages that
tells the author’s life story before telling you how to make zucchini muffins or some other thing you won’t end
up eating.
If you have played ACNH and don’t require background, please skip to
HERE!
From Reddit: _maddieee3 completed their critterpedia - I hope to achieve the same one day.
If you’ve never played ACNH, the gist is that you move to a deserted island and slowly turn it into
a vacation paradise. The big infrastructure pieces you place are a general store, tailor’s shop, and
a museum. To fill out that museum, you need every bug, fish, sea creature, fossil, and art piece in
the game. To keep track of the critters, you get the Critterpedia.
Naturally, filling it out is a massive grind, but the Critterpedia makes it manageable. It’s an
app on the player’s in-game phone that lets you track every bug, fish, and sea creature almost
effortlessly.
Fossils are the exception: they’re always genuine, you find four on your island daily, and you rely
on Blathers, the museum curator, to identify and accept them in a single flow.
The same mental load that exists in the process of growing the art collection does not exist within
fossil accumulation.
Isabelle warns us whenever the suspicious character is visiting.The suspicious character himself, “Cousin” Redd. Probably also a nightmare at Thanksgiving.
Of course, something notable is missing: there is literally no place where the player can check
their progress on the art collection, unless they sprint through the museum and manually
take stock.
The player caught an Ocean Sunfish, and is hilariously obscured by the sheer size of the fish.
They will probably have this on their dating profile.
For bugs, fish, and sea creatures, the first time you catch something that can be donated, the text
modal celebrates with a “Yes!” and marks it off. When you assess a new fossil, Blathers notes it.
No such thing exists for art — and to make it worse, art is actually much harder to fill out:
You have to wait around two weeks between appearances for Redd, a sly dealer who sells you art.
His tugboat appears on the north beach, which early players can’t even reach without tools like
the vaulting pole and ladder. Later in the game, you can visit him daily on Harv’s island if
you’re willing to shell out 99,000 bells.
Each art piece costs 4,980 bells. That’s a lot for early-game players, or for anyone trying to
pay off their debt to Tom Nook quickly.
You can only purchase one piece per encounter. Anything left behind just vanishes.
Redd can and will sell you fakes. Often. With a straight face.
There is a zoom action to inspect pieces, but it only goes so far. Players who are visually
impaired, or who play in handheld mode, may still be at a disadvantage. Unless you’re extremely
familiar with the real-world artworks, you’re likely to end up with counterfeits.
I’ve been scammed multiple times and I have an art degree.
The Plan
I’m going to design and develop a checklist for players to track their current art collection.
The page will show comparisons between a counterfeit piece and the genuine article and surface the
real artwork name. The UX will stay minimal while still borrowing some Animal Crossing charm.
The Design Process
Nookipedia's list of NH Art - don't fall for them saying 42, one painting has 2 halves!
There are 43 pieces of art: 30 paintings and 13 statues. 17 of them have no counterfeit.
Considering counterfeit art usually has one visual difference, you have about a 25% chance of
picking a genuine piece when Redd visits your island; if you visit him at Harv’s, that number dips
even lower.
The User Experience
The Individual Tile & iOS Inspiration
The building blocks of each tile are: a checkmark, image, title, and a “View Contrast”
dropdown CTA.
The dropdown exposes differences between always-genuine pieces and those with forgeries.
By only showing this for pieces that have counterfeits, I reduce unnecessary clicks and
cognitive load.
Sort List Function
Seven tiles fit into a standard screen above the fold, but there are 56 tiles total.
That’s eight full scroll lengths — a lot.
I added a sticky sort nav so players can quickly filter between All, Paintings, and Statues.
As a solo project, I’m still deciding how far to push this, but it already makes long-list
browsing more bearable.
Early wireframe exploring list, tile, and detail layout.
Questions I Am Considering
The Figma component library I built. It borrows ACNH styling while staying clean and modular.
Should I show selections like a cart? Should I offer a quick way to scroll back to the top?
Does a “sandwich nav” (top and bottom) feel helpful, or is it overkill?
These experiments helped me understand the trade-offs between keeping the UI playful and keeping
it genuinely useful. The main goal is still the same: make selecting and tracking art feel
seamless, not like another grind layered on top of the existing grind.
An exploration in how a three-column desktop layout could support list, detail, and the
"receipt".
Taking some UI cues from ACNH, and utilizing what I have already built to translate into this UX.
Prototype Interaction Demo 2 — testing the “receipt” pattern for selected pieces.
From Figma to Front-End
Early mobile-first pass translating the component library into code.
Populated state.
Desktop layout focusing on long-form reading and detailed comparisons.
An instance where I forgot to populate description data - sigh.
Returning to front-end work after years in UX was humbling; I wrestled with viewport units,
inconsistent image sizes, and the realities of designing for both desktop and mobile. Eventually,
I prioritized a desktop-first layout for readability and accessibility, while keeping mobile support
for quick reference. This did build my already massive respect for the devs I've worked with before, as most of
the 15 days it took me to work on this were spent on the w3 ref page.
Outcome
Though the final product's core demo is me, I am more than sure that other players will enjoy how functional
this is.
This 15-day challenge pushed me to own the full loop: focused "research",
UX, UI, component thinking, and code. Even when the layout broke or an image source disappeared,
it still felt worth it. And now, filling my virtual museum is just a little less chaotic.
The game may call me a “Famous Designer,” but this project reminded me how much I still enjoy
being a scrappy front-end dev too.
