DeepBook Margin — project cover
Product Design UX Research Web3

DeepBook Margin

A lightweight, production-ready margin trading interface built on Sui — delivered in under three weeks to establish a key technical partnership in the Sui ecosystem.

01 — Overview

DeepBook Margin is the margin-trading layer built on Sui. Our goal was to develop a lightweight, production-ready trading interface in a very tight timeframe — roughly 2–3 weeks. This project was a strategic move to establish a deeper technical partnership with the Sui Foundation while showcasing our ability to deliver high-quality DeFi tools quickly.

Role
Staff Product Designer
Team
Product Design, Stakeholders
Product
DeepBook Margin
02 — The Problem

Building a sophisticated trading UI from scratch in under a month

Margin trading is inherently complex, and our research showed that users often struggle with three core issues:

Risk Visibility

Difficulty tracking real-time liquidation thresholds and margin ratios left users exposed to unexpected losses.

Research — risk visibility
Technical Constraints

Based on technical requirements, we had to support a Separated Account Model — where Spot and Margin accounts are kept apart. This naturally adds friction because users must manually transfer funds before trading.

Research — separated account model
Limited Modes

The initial version only supported Isolated mode — no Cross mode — meaning each position's risk had to be managed individually, increasing cognitive load.

Research — isolated mode only
03 — Process

We began by conducting a UX audit of major exchanges to determine the best path forward for our Separated Account requirement.

Process — UX audit and competitive research
Comparative Research

We compared the Separated Account Model (Binance/Bitget) against the Unified Account Model (OKX/Bybit) to find the right approach.

Key Insight

While unified accounts are easier for beginners, the separated model offers higher transparency on debt and risk — preferred by experienced traders who want full control over fund segregation.

Design Strategy

To hit the 3-week deadline, we reused core components from our existing 7K and Liquent codebases — wallet connect, orderbook modules — and adapted them to the margin context.

04 — Solution

A clean, modular UI prioritizing performance and intuitive margin health feedback

Solution — full trading interface
Comprehensive Trading Interface

A dedicated margin overview panel displays equity, borrowed amounts, P&L, and the liquidation threshold — giving traders a complete picture at a glance.

Solution — margin overview panel
Simplified Order Entry

The execution panel supports market and limit orders with an easily adjustable leverage slider, plus integrated real-time margin ratios and liquidation buffers to help users manage isolated positions.

Solution — order entry panel
Seamless Wallet Integration

Using the 7K Wallet Connect module, account linking was kept smooth and secure — abstracting away the complexity of the separated account model from the connection flow.

Solution — wallet integration
05 — Outcome

By leveraging our existing design system and technical stack, we successfully delivered the frontend within the 2–3 week target.

Strategic Relationship

The project served as a strong technical touch-point within the Sui ecosystem, positioning us as a go-to UI partner for future Sui DeFi initiatives.

Ecosystem Visibility

We aligned our communication strategy with the Sui Foundation to emphasize collaboration and shared innovation across the ecosystem.

Showcase Value

The final product effectively demonstrates our ability to design and engineer high-stakes financial interfaces under significant time pressure.

trannhan2212@gmail.com

Product Design | User Experience Design

I adore solving problems and designing digital products.