DeFi Trading UX with shadcn/ui for Normie & DeGen Traders
I worked as the Lead Product Designer for about 9 months on a new L1 blockchain project, designing in Figma on top of shadcn/ui with a one‑to‑one token/component mapping for handoff.
Context
A blockchain startup needed a trading experience that felt safe for first‑time “normie” traders yet powerful enough for expert DeGen users. The right‑hand trading widget was the centerpiece of the product and the main driver of speed and confidence.
Approach
Trading widget first. Prototyped multiple right‑rail layouts to balance glanceable state (price, size, fees, risk) with fast order entry and management.
Information hierarchy. Structured content so users always know what they’re about to do, what it will cost, and how it affects positions and PnL.
System thinking. Built directly on
shadcn/ui, extending the design system with brand colors and coherent design tokens/variables for consistent theming and accessibility.Two‑persona design. Kept flows approachable for newcomers while enabling depth and control for power users through progressive disclosure.
Key Features
Perps, passive liquidity (LP), and vaults alongside standard trading primitives.
Order types, live order book, depth view, positions, and activity history designed for quick scan and low cognitive load.
Safety rails: explicit confirmations, slippage and fee clarity, min‑receive safeguards, chain/network status, and clear error/empty/loading states.
Dev‑ready components mapped 1:1 from Figma to code, with reusable variants and tokens.
Highlights
Translated a complex domain into clear, confidence‑building flows that reduced second‑guessing for new users while preserving expert speed.
Balanced the needs of two distinct personas (Normie and DeGen) without fragmenting the UI.
Delivered a design‑system‑native interface on
shadcn/ui, accelerating build velocity and reducing design‑to‑code drift.Surfaced platform differentiators without overwhelming the core trading journey.
What I Learned
Rapidly absorbed DeFi mechanics and trader mental models, then reframed them into visuals and copy that help users feel secure, informed, and in control of every transaction.