moonBit Perpetuals DEX
Decentralized Futures Trading & Margin Design System
End-to-end product design for a decentralized perpetuals exchange. Delivered real-time trading terminals, multi-chain routing, position risk management, and a comprehensive design system across 7-8 months of iterations.
moonBit
7-8 Months (Iterative Design)
Lead Product & UX Designer
Perp DEX, Design System & Analytics
High-Performance Futures on Decentralized Infrastructure
moonBit is a decentralized exchange (DEX) engineered specifically for perpetual contracts trading. It gives cryptocurrency traders a transparent, self-custodial platform to execute leveraged long and short positions with high liquidity and minimal slippage.
Over 7-8 months of continuous design, user testing, and iterative improvement, we created the end-to-end trading interface. We solved critical usability challenges around leverage risk, order execution latency, and liquidation transparency.
Perpetuals Trading Terminal
High-density trading terminal uniting real-time TradingView charts, live order book depth, dynamic leverage controls, and active positions management.
Why Decentralized Perpetuals Required a New UX Architecture
Decentralized perpetual trading often suffers from steep learning curves and fragmented workflows. Traders face confusing wallet confirmations, hidden funding fees, uncertain slippage, and abrupt liquidations. Across 7-8 months of iterative design, we resolved four core operational friction points:
Clear Leverage & Margin
Explicit cross and isolated margin indicators with dynamic liquidation price calculators prevent margin confusion before orders are signed.
Sub-Second Order Flow
Streamlined one-click order placement with real-time slippage bounds and fee estimation keeps traders ahead of fast-moving markets.
Controlled Position Close
Dedicated exit drawers with percentage sliders (25%, 50%, 75%, 100%) and estimated PnL prevent costly market exit mistakes.
Self-Custody Transparency
Continuous balance tracking across connected Web3 wallets and smart contract margin accounts eliminates idle capital anxiety.
Close Position & Risk Drawer
Safeguarded position closing drawer with quick-percentage sizing, live estimated PnL, slippage tolerance settings, and one-click execution.
Preventing Panic Exits and Costly Slippage Errors
In fast-moving derivative markets, closing a leveraged position under pressure is one of the most error-prone actions for traders. Standard interfaces force users to calculate lot sizes manually or execute blind market orders that suffer catastrophic slippage.
We designed a dedicated position-closing drawer that calculates exact estimated returns before signing. Traders can close positions in increments of 25%, 50%, 75%, or 100%, review net realized PnL after all protocol fees, and choose between rapid market exits or zero-slippage limit orders with total confidence.
Market Discovery & Multi-Chain Routing
Traders need instant visibility into trending perpetual markets, 24-hour volume changes, and 8-hour funding rate yields. We designed a high-density market directory paired with a reliable cross-chain network switcher.
Perpetual Markets Directory
Comprehensive market scanner showing 24h price changes, volume, open interest, and real-time funding rates with one-click direct trade routing.
Multi-Chain Network Switcher
Reliable network selector displaying RPC latency, live gas price indicators, and active chain connection states without losing page context.
Instant Pair Filtering & Funding Rate Yields
Traders easily identify trending long/short opportunities and compare funding rates across major crypto assets. Clear search filters and categorization eliminate cognitive overload.
Friction-Free Network Switching
DEX traders often experience disconnected wallets or lost trade parameters when changing chains. Our multi-chain modal verifies RPC responsiveness and keeps trader state intact during transitions.
Web3 Wallets & Trader Analytics
Managing margin collateral and tracking historical performance are vital for disciplined derivative trading. We designed a clean Web3 wallet balance manager alongside an advanced analytics suite.
Web3 Wallets & Margin Balance
Multi-wallet connector managing available wallet balances, deposited margin collateral, and fast deposit/withdrawal transfers.
Trader Analytics & Market Insights
Comprehensive performance visualizer tracking portfolio net equity curve, long/short ratio sentiment, and cumulative realized PnL.
Transparent Margin Allocation
DEX traders often confuse external wallet holdings with active smart contract collateral. The wallet interface clearly demarcates locked margin from free capital, preventing unexpected transfer fees.
Data-Driven Trading Insights
Instead of relying on third-party spreadsheets, traders track cumulative returns, win/loss distributions, and market-wide open interest directly within moonBit.
Portfolio Health, Positions & Audit Ledger
Managing multiple open leveraged positions requires continuous risk awareness. We designed a 3-part portfolio dashboard covering overall account equity, detailed position controls, and a fully auditable trade history ledger.
Account Overview & Margin Health
Holistic account metrics showing Total Equity, Unrealized PnL, Margin Utilization gauge, and quick deposit/withdraw controls.
Leveraged Positions Management
Detailed active positions table displaying entry price, mark price, liquidation alert thresholds, and inline Take Profit / Stop Loss editing.
Audit Ledger & Realized PnL
Comprehensive historical transaction ledger breaking down realized gains, borrowing fees, and funding rate debits with blockchain proof links.
Real-Time Margin Utilization
A prominent visual meter warns traders as margin utilization approaches critical thresholds, eliminating surprise liquidations during market flash crashes.
Inline TP/SL Defense
Traders adjust Take Profit and Stop Loss levels directly in the positions table without opening modal windows or re-authenticating wallet signatures.
Transparent Fee Accounting
All decentralized trading fees, funding payments, and execution prices are translated into clean fiat equivalents, making tax accounting and trade auditing effortless.
Design System & UI Kit for High-Frequency Perpetuals
A professional perpetuals DEX demands precision, rapid cognition, and zero UI latency. Over the 7-8 month design engagement, we developed an exhaustive design system and reusable component kit tailored specifically for derivative traders:
High-Contrast Dark Palette
Engineered deep slate backgrounds with strict WCAG AA contrast. Long (#22C55E) and short (#EF4444) signal colors maintain legibility during long trading sessions.
Tabular Number Typography
Utilized fixed-width tabular figures for all real-time prices, order book depths, and PnL counters to prevent visual shifting during live websocket tick feeds.
Modular Trading Components
Built reusable order forms, dynamic leverage sliders (1x to 50x), liquidation badges, and partial close percentage drawers across both web and mobile viewports.
Micro-Interaction States
Implemented subtle pulse feedback for order fills, color flash cues for price changes, and protective double-confirmation dialogs for high-leverage orders.
7-8 Months of Usability Validation & Testing
The design process followed ten rigorous stages, moving from initial perpetual DEX competitor analysis through to live trading prototypes and ongoing engineering support:
1. Persona-Driven Wireframing
Mapped workflows for both aggressive scalpers requiring sub-second order entry and DeFi swing traders focusing on funding yields and risk mitigation.
2. Multiple User Testing Loops
Conducted usability sessions with active futures traders to refine position-closing workflows, reduce misclicks, and eliminate ambiguous leverage indicators.
Ensuring Long-Term Scalability
By standardizing tokens in Figma and aligning them 1-to-1 with CSS variables, the moonBit development team rapidly implemented new perpetual markets, advanced order types (Trailing Stop, OCO), and cross-chain integrations without design debt.
Component Reusability
Shared button primitives, input steppers, and tooltip alert systems ensured visual cohesion across terminal, dashboard, and mobile views.
Sub-Pixel Alignment
Carefully tested on high-DPI desktop monitors and mobile OLED screens to ensure crisp border rendering and zero chart blur.
Results & 7-8 Month Impact
Across 7-8 months of intensive product design, user testing, and iterative improvement, moonBit became a streamlined, trader-first perpetual DEX:
7-8 Months Design
Continuous iterations, testing rounds, and redesigns adapting to real trader feedback and competitive DEX developments.
9 Production Views
Delivered trading terminal, close drawers, market directory, network switcher, wallet manager, analytics, and history ledger.
Safe Position Closing
Eliminated accidental liquidation and panic market exits through explicit percentage sliders and pre-execution PnL calculations.
Production UI Kit
Comprehensive design system with high-contrast dark tokens, tabular numerals, and responsive multi-chain trading components.
Gallery
All 9 production screens designed for the moonBit perpetuals DEX. Click any view to inspect in high resolution: