GOBLIN GIZMOS
UX Design
.png)
A digital space for collectors and hobbyists to curate & collaborate
Skills
-
User Research
-
Product Design
-
Prototyping
-
Front-End Development
Back-End Development
Context
-
Capstone Project
-
Aug 2025 - May 2026
Tools
-
Figma
-
Adobe Photoshop
-
React
-
PHP
-
HTML,CSS
-
Javascript
Intro
The team didn't have to go far to find inspiration for Goblin Gizmos. We just looked at our own shelves. Vinyls, figurines, business cards, blind boxes, books. Each of us collects something, and each of us had the same quiet frustration: there was nowhere online to show it all off the way we wanted to. The niche platforms we found were either too limited, too cluttered, or felt like they hadn't been touched since 2009. We wanted something warmer. Something more like Letterboxd, but for everything. A digital shelf where any collector of anything could catalog their horde and share it with a community that gets it.
I stepped into the role of Design, UI, and Branding on a five-person team. Together we built Goblin Gizmos from the ground up. From initial market research all the way to a polished high-fidelity prototype. This is that story.
Research
Competitive Analysis
we needed to understand what was already out there. We each took a set of existing collector platforms and worked through them, cataloging what they did well and where they fell short. The sites we studied such as Colnect, CollectorsCorner, Kolekto, MyFigureCollection, and CatalogIt covered the landscape pretty thoroughly, and the picture that emerged was consistent: outdated interfaces, cluttered navigation, niche-specific audiences, and in some cases, paywalls that locked out casual users before they'd even gotten started.
Interviews & Use Cases
With a clear picture of the gap in the market, we turned to the people who would actually use Goblin Gizmos. We surveyed and interviewed collectors across different niches to understand how they currently manage and share their collections, what frustrates them about existing tools, and what they'd actually want from a platform like ours.
The feedback helped us ground our instincts in real data. Users wanted something quick to update, easy to browse, and genuinely social. They weren't looking for a database to manage, they were looking for a place to connect over the things they love.
Using those insights, I mapped out a full suite of use cases for the platform. These covered everything from signing up and logging in, to adding a new trinket, browsing categories, commenting on posts, reporting users, and adjusting accessibility settings. The goal was to think through the full range of people who might use Goblin Gizmos from the seasoned collector, to the curious newcomer, to the person who just wants to lurk, and make sure the design could hold all of them comfortably.
To keep our structural thinking organized, we built out a data dictionary and a full information architecture diagram. This laid out every feature, tab, and data relationship we'd need to account for — from user profiles and collection layers to the community tab, search, bounties, and accessibility settings.
One structural decision we were particularly thoughtful about was the two-layer collection system. A user has collections (say, books), and within each collection they have individual items (a first edition, a worn paperback with notes in the margins). This gave each trinket room to breathe and express its own lived-in history while keeping the broader organization clean and navigable.
Design
Process
Early on, one of our biggest challenges was landing on a direction for the brand. Once Goblin Gizmos clicked as the name, everything else started to fall into place. The goblin theme gave us an heir of mischief, of being treasure-obsessed, and of being community-oriented. I couldn't help but run with it.
The color palette settled on a teal and mint primary scheme with a near-black secondary and an off-white background. It's clean and modern without being sterile, and the green tones carry just enough of the fantastical to feel distinct. For typography, I chose Tilt Warp for headers (bold and a little chaotic in the best way), Joti One for the logo, and Rubik for body text to keep readability grounded. The mascot created by our wonderful design artist came together in three variations, giving us flexibility across different use contexts.
Low Fidelity Prototype
Before building out the full design, We created a low-fidelity prototype in Figma to establish the core flows and layout logic. The lo-fi covered the primary user journeys, including sign-up and login, the home page, category browsing, adding a trinket, the community tab, and key accessibility settings. Keeping it rough at this stage was intentional. It made it easier to throw away ideas that weren't working without feeling precious about them.
Feedback
We walked the lo-fi prototype through a round of user feedback before moving to high fidelity. Sitting with people as they navigated the flows revealed friction points we hadn't anticipated and confirmed the things that were already working well. That feedback directly shaped the decisions I made in the final design, including adjusted button placement, clearer calls to action, and a more prominent path to the category browser from the home page.
Final Prototype
The high-fidelity prototype brought everything together. Built in Figma, the final design carries the full visual identity applied consistently across every screen. Key features include the community feed, category browser, individual trinket pages, user profiles, and the bounty board where users can post items they're looking to sell or trade.
The interface is desktop-first with responsiveness built in for tablet and mobile. On smaller screens, menus collapse, content is prioritized differently, and buttons scale up for touch. Accessibility was baked in from the start — readable typography, attention to color contrast, alt text support, and in-app settings for font size and color scheme adjustments.
Development
Stack & Structure
Goblin Gizmos was built as a responsive website with a desktop-first presentation and a mobile-ready foundation. The stack we landed on was HTML, CSS, JavaScript, PHP, and MySQL. This combination that gave us the flexibility to handle user accounts, encrypted passwords, dynamic content, and image storage without overcomplicating things. PHP handles the server-side logic and ensures users have differentiated levels of access, while MySQL stores everything from profiles and collections to posts and images.
Version control was managed through GitHub, which let all five of us contribute to the codebase without stepping on each other. Responsiveness was implemented through three defined breakpoints: mobile at max-width 600px, tablet between 600px and 1000px, and desktop at 1000px and above. On mobile the layout simplifies — vertical menus replace dropdowns, buttons scale up for touch, and content is prioritized to reduce clutter. The site was validated through W3C Markup Validation to keep the code clean and standards-compliant.
Reflection
Goblin Gizmos was the most collaborative and most creatively demanding project I've worked on, and I came out of it a sharper designer. Here are a few things it taught me.
Identity First:
One of our earliest struggles was nailing down the branding. We had a concept we believed in but couldn't agree on how it should look and feel. Once we committed to a direction, everything else accelerated. I learned how much a strong visual identity acts as a creative north star, and how much time you lose without one.
Documentation is Design:
Going into this project I underestimated how much work lives in the documents. The use cases, the data dictionary, the information architecture. These weren't formalities; they were the scaffolding that held the design together. When we didn't document something thoroughly enough, we felt it later. That discipline of writing things down, defining them carefully, and keeping the team aligned is something I'm carrying forward.
Design for the edges:
The testers who challenged our assumptions the most were the ones we almost didn't think to include, whether that be the accessibility-conscious user, the person trying to add a trinket quickly from their phone, the new visitor who doesn't know what a bounty is. Designing for those edge cases made the core experience better for everyone. Empathy isn't just for your target user; it's for every user.
The team is the product:
We ran Goblin Gizmos like a democracy, and it worked. Five people with overlapping skills and genuine respect for each other's contributions can move fast and make good decisions. I didn't always get to set the tone, and that's ok. I had to drop the ego and truly collaborate. I'm proud of what we built, but I'm equally proud of how we built it.
Goblin Gizmos is a milestone. There's more to build, more to refine, and more to learn, but I'm leaving this project with a clearer sense of who I am as a designer and what I'm capable of when I'm working with the right people. That's the most valuable treasure I could ask for
