NFT Marketplace UX/UI Design
OpenSea loses market share to Blur not because Blur has better tokenomics. Blur won on UX for professional traders: bidding pool, sweep function, real-time floor tracking — all on one screen without extra clicks. OpenSea designed for collectors, Blur for traders. These are different products with different usage patterns. Before starting design, must understand: who exactly is the user and how do they trade.
Key Screens and Their Design
Gallery and Discovery
Main task of gallery page — let user quickly evaluate collection without entering each token. Key metrics above gallery: floor price, 24h volume, total sales, unique owners. These should update real-time or near real-time — without them user opens another tab.
Grid of NFT cards: three display modes (large grid, small grid, list) — different users prefer different. Attribute filters — most frequent pain point of bad marketplaces: slow filtering by traits becomes torture. Filters should work instantly (client-side filtering from loaded data) or through debounce <200ms on server.
NFT Card
Minimum necessary on card: image (or 3D/video preview), name/ID, collection floor price, current price if listed for sale, buy button. Buy button directly on card — critical for professional traders. Going to token page to buy — extra click that kills conversion.
Hover state on card — place for secondary actions: add to wishlist, copy link, quick bid.
Token Page
Structure: media (full size) on left, trading panel on right. Trading panel is most critical element. Contains: current listings (sorted by price), sale history, buyer offers.
Trait rarity — show immediately next to attributes. Background: Purple (3.2%) — next to "3.2%" should be indicator how rare relative to collection. Traders make decisions based on rarity.
Provenance (ownership history) — table of transfer events with addresses, amounts, timestamps. Builds trust and shows wash trading (circular transfers between addresses).
Minting Flow
Separate pattern from trading. User connects wallet for first time — progress indicator of stages: Connect → Approve → Mint → Done. Each step should explain what's happening. "Approve transaction in MetaMask" with MetaMask icon — user understands what to do. "Processing..." without context — no.
"Sold Out" state — not just text. Show: secondary market, current floor price, OpenSea/Blur link.
Collector Profile
Two modes: "my collection" and "public profile". In public profile hide sensitive data (pending transactions, unlisted items). Display: portfolio value (in ETH and USD with live conversion), owned NFTs grid, activity feed (recent buys/sells/bids), received offers.
ENS resolution. Show addresses as ENS names everywhere if available (vitalik.eth instead of 0xd8dA...). wagmi/viem does this via useEnsName hook — cheap and important for UX.
Mobile Version
NFT mobile UX specifics: main actions are browse and buy, trading via mobile is rarer. Priority: fast gallery view, readable cards (2 columns on mobile vs 4-5 on desktop), simplified trading panel.
Touch gestures: swipe through carousel cards, pinch-to-zoom on media, pull-to-refresh on gallery. Buttons minimum 44px height for comfortable tapping.
Mobile wallet connection: WalletConnect QR code — standard. Additionally: deep links for opening in MetaMask Mobile, Coinbase Wallet. ethereum: URI scheme supported by most mobile wallets.
Design System and Components
Marketplace requires rich design system: cards, modals (confirm purchase, place bid, list for sale), price input forms in ETH/USD with live conversion, toast notifications about transaction status.
Dark mode mandatory. NFT audience expects dark theme as default. Trading interfaces (think Bloomberg terminal, not website) traditionally dark — less eye strain during long monitoring.
Typography and grids. Monospace font for addresses and prices — instantly gives "crypto" context and eases reading hashes. Inter or similar for main content.
What We Test for Usability
Three key scenarios for testing:
- New user finds and buys first NFT in < 3 minutes
- Trader lists 10 NFTs for sale in < 5 minutes
- User finds NFT with specific trait in collection in < 1 minute
If none of three pass on first try without hints — design needs rework.
Development Process
Research and wireframes (3-5 days). Competitor audit (Blur, OpenSea, Magic Eden), user flows for key scenarios, low-fi wireframes.
UI design (5-7 days). Figma: design system, all key screens in desktop and mobile, interactive prototype for trading flow.
Handoff to developers. Figma tokens for colors, typography, spacing. Component documentation with states (hover, active, disabled, loading). Animation specification (Framer Motion parameters).
Timeline Estimates
MVP marketplace design (gallery, token page, profile, mint flow) — 1-2 weeks. Full design with trading dashboard, mobile, design system — 3-4 weeks.
Cost calculated after clarifying screen count and design system requirements.