Web3
Building a Design System Inside a Live NFT Marketplace
The roadmap couldn’t stop, so the fix couldn’t either. I kept shipping committed work while building the case for a design system in parallel, delivered as a code library, not just design files.
ThorFi: Capsule (NFT Marketplace)
~6–7 months (2023)
PO/PM, ~10 developers, 1 Creative Director, Marketing team
Crypto-native Avalanche users, with specific fluency in NFTs
UX/UI Designer, my first project at ThorFi
Figma · FigJam
Challenge
Capsule was a marketplace on the Avalanche network built for one clear community need: a space to convert, exchange, hold, and manage NFTs. (The gamified rewards system that originally generated those NFTs existed earlier at ThorFi, before my time on the project. My work was entirely on the marketplace layer.)
This was my first project at ThorFi. The product already had a defined roadmap and committed features in flight, but execution was confusing, with information architecture problems I identified once I started analyzing it, and visual inconsistencies from never having set up an initial design system.
The instinct could have been to stop and fix the foundation first. Reading the context said otherwise: the roadmap wasn’t negotiable, so the fix couldn’t come at its expense. It had to happen in parallel, not instead of it.
Results
I worked two tracks at once: kept shipping what was already committed (the roadmap came first, non-negotiable) while evaluating, in parallel, which existing components were already closest to what should become the eventual design system standard, narrowing the future gap between “what needs fixing” and “the new standard” before it was time to formalize it. As the picture became clearer, I proposed an information architecture reorganization, set up an initial design system, and only then scaled the app’s existing functionality further.
The design system shipped as a working code library: a component-based, design-token-driven system, not just Figma files. Implementation sped up measurably as a result:
· ~50% reduction in launch time, through structured, consistent delivery of product flows
· ~25% increase in team productivity, from reduced design-to-dev friction and clearer component ownership
There’s no before/after dashboard behind those numbers. Usage metrics were never implemented at ThorFi. These are my sizing of a trend I watched improve sprint over sprint, not a one-time measurement.
~50%
Launch time
~25%
Team productivity
Process
Building the design system, my usual approach: understand which framework the dev team is building in, read its documentation, and build components aligned to that existing structure. It’s the fastest way to get real understanding and speed at the same time, especially when a product needs a custom aesthetic but also has to move fast. (If speed were the only constraint, with no need for custom visual identity, I’d build directly on that framework’s default component library instead.)
Beyond the design system, my scope on Capsule included:
· Reviewing and restructuring the marketplace’s information architecture for future scalability
· Designing core marketplace flows: navigation, NFT listing, search, multi-listing, gamification-related interactions
· Designing and documenting product iterations, including Dark Mode
· Working within a globally distributed Web3 team, aligning UX decisions across time zones and disciplines: cross-functional collaboration and stakeholder management with Product, Engineering, and Creative
Conclusion
Capsule is the clearest example of reading context over following instinct: the “right” move would have been pausing to fix the foundation first. The actual constraint, a roadmap that couldn’t stop, meant deciding to build the fix in parallel instead, and trusting that a smaller, well-timed intervention (a design system as a code library) would compound faster than a bigger one that came too late.
Kuala Lumpur, APAC
