Made:
Design System from Zero for Blockchain Cultural IP

MADE is a blockchain-powered intellectual property registry built to protect Black creators — giving artists, designers, and cultural producers the tools to register, license, and monetize their work before it gets taken from them.

Challenge: A developer-built React prototype existed with zero native design assets — no components, no visual system, no standards. Only a three-page brand guideline with legacy branding. The platform needed to feel credible, culturally familiar, and trustworthy to Black creators ranging from limited to moderate blockchain technology literacy.

Outcomes:

  • Full discovery engagement — stakeholder interviews, competitive audit, component extraction from existing codebase
  • User journey map across five stages identifying critical pain points, emotional states, and design opportunities
  • Complete design system built from zero — color tokens, type scale, iconography, component library
  • blk Chain ID — original verification icon concept rooted in Cuban link chain iconography from hip hop culture
  • Full product UX designed end to end — homepage, listings, product detail, modal system, checkout
  • Elevated from UX Lead to Creative Director mid-engagement
01

DISCOVERY & STRATEGY

Starting with What Exists

Before a single component was built, the engagement began with a full discovery process. A creative brief was authored from scratch — defining personas, success metrics, milestone structure, and risk mitigation. Five design principles were established with the founding team, governing every decision that followed: cultural specificity, trust through transparency, accessibility as equity, creator-first hierarchy, and protection over promotion. The existing React prototype was audited using a structured component extraction methodology — identifying every UI element in the codebase and migrating it into Figma as the foundation for the new system.

COMPONENT EXTRACTION

The audit surfaced a prototype built entirely by a developer without design input — functional but visually identical to every competing SaaS product. Every component was catalogued, evaluated, and rebuilt into a Figma library that the engineering team could work from directly. Project management was built inside Linear — the engineering team's native environment — ensuring cross-functional alignment from day one rather than imposing a creative-first tool on a technical workflow.

02

USER RESEARCH & JOURNEY MAPPING

Designing from Insight

The user journey map became the strategic backbone of every design decision on the project. A casual visitor with vague curiosity about cultural IP protection was mapped across five stages — Home Hero Entry, Home Value Prop, Listing Initial Browse, Listing Filtering, and Property Detail. The map documented goals, actions, thoughts, pain points, emotional states, touchpoints, and design opportunities at every stage. Two findings defined the entire UX strategy: the homepage language was too blockchain-heavy for the target audience, and the platform's cultural differentiation was invisible throughout the entire existing experience.

THE JOURNEY MAP

Every major design decision in the product traces back to a specific finding in this document. The pain point identified at the homepage entry stage — abstract blockchain language creating an immediate barrier for creators unfamiliar with the technology — directly generated the strategic decision to lead with editorial culture rather than technical features. The map turned a gut instinct into a defensible design argument.

03

UX STRATEGY + PRODUCT DESIGN

Every Screen Rooted in Research

The journey map translated directly into design decisions. The homepage could not lead with blockchain — it had to lead with culture. The marketplace had to foreground creator identity, not product inventory. The property detail page had to build trust before asking for any action. Every screen was built from the system's documented components and tokens — no one-off decisions, no undocumented exceptions. The full product surface was designed end to end: homepage, listings, property detail, five-modal system, and checkout.

HOMEPAGE

The homepage was designed to feel editorial before it felt technological. Typography was given room to breathe. Imagery was culturally grounded and human-forward. The platform's blockchain infrastructure was deliberately withheld from the hero experience — creators needed to feel seen and respected before the technology was introduced. This sequencing was drawn directly from the journey map finding that abstract blockchain language was the primary barrier to creator adoption.

MARKETPLACE & LISTINGS

The listings page foregrounded identity over inventory — each listing leading with the creator's name, verification status, and cultural category rather than a price or product specification. The grid was kept clean and editorial, giving every creator equal visual weight regardless of how established they were. The property detail page surfaced three expandable content modules — Ethical Commitments, Cultural Context, and Full Description — alongside community impact metrics: supporters, dollars raised, and lives impacted. The page was designed to make buying feel like participating.

MODAL SYSTEM

Five distinct modal experiences were designed — Cultural Context, Ethical Commitments, Full Product Description, Navigation, and Support Creator — each with its own content hierarchy and role in building trust between creators and buyers. The Support Creator modal converted passive browsers into active community participants through a tiered contribution structure from $5 to custom amounts. Every modal carried the editorial visual language of the homepage into the product's deepest interactions.

04

DESIGN SYSTEM

Built from Nothing, Designed for Everything

The only starting point was a three-page brand guideline. From that foundation every token, component, and standard was built from scratch. Five design principles governed every decision — ensuring the system was not just visually consistent but culturally accountable. Black was established as the primary brand anchor. Copper and gold were reserved for premium and verification moments. Work Sans was chosen as the typographic foundation — authoritative without being cold, scalable across every screen context. Ten type levels were documented in full: size, weight, letter spacing, and line height for every application.

COLOR TOKENS

Each color was documented not as a hex value but as a usage rule — so any designer or developer working in the system would know not just what the color was but exactly when and why to use it. The full semantic set covered badge states, border treatments, background layers, and interactive indicators — every context the product demanded.

TYPOGRAPHY + SCALE

Ten type levels documented across every specification — from 64px display headers down to 10px button text. The system was built so that any engineer could implement it without a single ambiguous decision left unmade.

05

CULTURAL CREATIVE DIRECTION

When the Icon Comes from the Culture

The most technically abstract element of the platform — blockchain verification — needed to feel immediately legible to Black creators who had never used a blockchain product. Generic blockchain iconography was cold, angular, and culturally meaningless to the audience it was meant to serve. The question was not what icon to use. It was what symbol of permanence, protection, and unbreakable connection already existed inside hip hop culture. The answer was the Cuban link chain.

THE BLK CHAIN ID

The Cuban link chain is a cultural artifact — a symbol of earned status, unbreakable loyalty, and wealth that cannot be taken away. Raekwon's landmark album "Only Built 4 Cuban Linx" put the metaphor into language: an unbreakable bond between individuals who have earned their place. That metaphor maps exactly onto what blockchain verification does; it creates a permanent, immutable record of ownership that cannot be broken or disputed. The concept moved from cultural reference to hand sketch to refined icon. The blk Chain ID was applied across the entire product surface — on editorial photography as a watermark of protection, on listing pages alongside the Authentic Verified badge, and on dark section backgrounds as a standalone blockchain verification signal.

UX Design, Visual Design

method®:
Interactive Quiz

UX Design, Visual Design

Mozilla:
Microsite