Duc PhamLeverX case study Talk to Duc

Projects LeverX

Designing LeverX for traders who have seconds to read their risk

UX/UI lead for a perpetual DEX on MegaETH: 190 screens in a 12-week sprint.

Talk to Duc
LeverX trading terminal before a wallet is connected

(Summary)

LeverX is a perpetual DEX on MegaETH that pairs CEX-grade speed with full self-custody. I led UX/UI across the product, from first connect through positions, portfolio, earn and rewards. The challenge: a trader has seconds to judge liquidation risk, and the rules behind that risk live in a smart contract.

LeverX

Perpetual DEX on MegaETH

A hybrid perpetual DEX with CEX-grade speed, deep liquidity and full self-custody.

Role
Led UX/UI
Length
12-week sprint
Designed
190 screens, 55 shown here
Worked with
PM, smart-contract engineers
See the screens

(Problem Framing)

How close am I to liquidation?

Every perp trader needs that answer when the market turns, and a wrong read can close a position for good. Major terminals supply the ingredients, but the trader still has to put them together. Key problems:

  • The safety figure has a different name on each venue, and it sits beside equity and maintenance margin for the trader to read together.
  • A ratio on its own doesn't say which way is safe, how much room is left in dollars, or what to do next.
  • The rules live in a smart contract. When on-screen words drift from them, traders misjudge what they stand to lose, however clean the screen looks.
  • Traders think "my money is in the account". The protocol splits it into one Cross wallet and one Isolated envelope per market, so idle money can block an order with no visible reason.
VenueIts safety figureShown with it
HyperliquidDocs Cross Margin Ratio Account Equity, Maintenance Margin, Liq. Price
AsterTerminal Account Margin Ratio Account Equity, Account Maintenance Margin, Liq.Price
BitgetTerminal Maintenance margin rate (MMR) Maintenance margin, Position tier guide
edgeXDocs Risk Rate Total Equity, Maintenance Margin, Liq. Price
LighterDocs None visible before connecting Est. Liq. Price, Position Margin. Its docs use three margin requirements.
LeverX design Margin coverage, in words: "Liquidation at 1.00, higher is safer" How far: $17,988.69 before liquidation. What next: add collateral or close positions.

Labels read from each public terminal on 5 November 2026 with no open position, so warnings that only appear on a live position were not seen. Hyperliquid's docs also call its liquidation price an estimate that funding and other positions can move. LeverX figures are design sample data.

The design job was to keep one name, say in words which way is safe, and turn the ratio into a dollar buffer and one next step.

(Role & Team)

What I owned

I led UX/UI for LeverX during a 12-week sprint, working with the PM and smart-contract engineers. Flows, states and draft copy were mine. The PM approved final text and the engineers confirmed contract logic. My scope covered:

  • Turning protocol documentation and PM-approved specs into flows and screens
  • End-to-end UX: connect, order entry, positions, account, onboarding, portfolio, earn and rewards
  • Copy checked against the contract, with unconfirmed points batched into questions for the PM and engineers
  • Interactive HTML prototypes for complex flows such as TP/SL and margin health
  • Figma handoff with plain-language notes for developers and QA

55 of the 190 product screens are in this case study. Browse them all

(Approach)

Strategy: the contract first, then the trader's question

A screen had to be true to the protocol first and readable under pressure second. So the work ran in this order, and nothing unconfirmed was guessed:

  1. Specs first

    Every screen started from the protocol documentation and specs approved by the PM, so the numbers and rules on screen match how the exchange works.

  2. Questions batched

    When something was unconfirmed, it went into a batched question list for the PM and engineers.

  3. Benchmarks

    edgeX, Hyperliquid, Aster, Bitget, Lighter and Drift.

  4. Prototypes

    Complex flows such as TP/SL and margin health were prototyped as interactive HTML before they went into Figma.

  5. Handoff

    Finalized in Figma with plain-language notes for developers and QA.

Each area starts from what a trader is asking

  • What am I risking before I press Buy?

    The leverage dialog states the max position at that level and warns that a 0.5% move at 150x liquidates. Margin mode explains what each choice means at liquidation.

  • Can I change this without starting over?

    One Edit popover for price and amount, signed once. Adjust margin shows the new liquidation price before you confirm.

  • I made a profit. Why can't I withdraw it?

    A reminder names the unsettled amount. The Settle dialog says where profit is paid from and that the position stays open either way.

  • Where does this yield come from, and what can I lose?

    Each card names its source: revenue share plus trading results for LXPO, protocol revenue for the Insurance Fund. Cooldowns sit on the card, and yields are labelled variable and not guaranteed.

  • Why did I get these points?

    The bonus dialog shows the formula and each multiplier: tier, streak and maker share. The streak rule sits beside it: missing a day resets it to ×1.00.

  • What do I do first?

    A tour highlights whole sections, then five quests unlock one by one, from first deposit to Risk Manager.

(Challenges)

What made this hard

The hardest problems came from the gap between how traders think and how the contract works. Here are three, with what I weighed and what each one cost. Team names and contract internals are left out.

Idle money a trader can't see

Proposal, waiting on contract answers

Traders think "my money is in the account". The protocol splits it into one Cross wallet and one Isolated envelope per market. Money left in an envelope can block a Cross order and shrink what looks withdrawable, with no visible reason.

ChoiceFirst proposalWhat I proposedWhy
PlacementBanner across the order areaOne line under the Margin buttonClose to the decision. A wide banner gets skimmed like an ad.
ToneYellow warning with a triangleNeutral, with an info iconThe money isn't lost, and a warning overstates the risk.
ActionSolid lime "Return to Cross"Outline "Move to Cross"Lime stays on one action per screen. The verb matches the Transfer dialog.
Copy"is sitting in SOL-USD isolated margin with no position or order""3.81 USDM is idle in SOL-USDM Isolated."Fits the narrow panel and drops system language.

Trade-off. Switching to Isolated automatically surfaces the money but takes control away. So the mode never changes once someone has typed a size or picked a mode, and the line explains why it switched. If the contract can't hold Cross and Isolated together in one market, the planned default-on checkbox becomes a false choice, so the design falls back to a fixed line.

When the copy was wrong, not the UI

In Figma

Two descriptions disagreed with the contract. A trader reading them would misjudge what they stood to lose, however clean the screen looked.

WhereIt saidIt now saysWhy
Isolated margin"won't affect your other positions or account balance""you can't open new positions or withdraw until you add margin"A shortfall blocks more than the one position.
LXPO yield"Fees + AMM PnL""Revenue share + trading results"The pool does not take the other side of every trade.

How. I batched coded questions for the engineer, drafted text for the PM to approve, and kept a list of old phrases to scan the file for. The Earn labels alone sat in about 60 places. Trade-off. The accurate Isolated text is longer, so the dialog grew to fit it.

One trigger price, one name

Tables in Figma, selector open

Trigger cells were written four different ways, and some named the wrong price: triggers run on Index, not Mark. Reading an order should not depend on which table it sits in.

Decision. One format everywhere, Index ≥ 80,500.0, changed in the shared components first so every copy follows. Still open. The Last and Mark selector in TP/SL waits on a product decision: if the contract only supports Index, it should go.

(Solutions)

A terminal that answers before the trader has to ask

The design rests on three principles. The first two are live below: move the slider, keep scrolling, and the page runs on your choice. Nothing here touches a wallet.

  1. Explain risk where it's taken. Leverage, margin mode and TP/SL state their consequence inside the form, at the moment someone commits.
  2. One safety number, in words, with one next step. Margin coverage keeps its name everywhere, says which way is safe, and ends in a single action.
  3. One decision at a time. Each surface removes the thing a trader is stuck on, so a dense terminal still has an obvious next move.
Principle 1

Set your leverage. The page keeps it.

Leverage is chosen here, before the position exists, so the form has to explain the risk at the moment someone takes it. Move the slider, then keep scrolling.

10x
Size
0.8000 BTC
Entry
62,641.20
Initial margin
Est. liq. price
Move to liquidation

Demo only. No wallet, no funds, no orders. Coverage uses R = Equity ÷ MMR from the LeverX design with sample margins, so these figures are a simplified illustration and not LeverX's margin engine or trading advice.

Principle 2

Position open.Now the market moves.

Margin coverage, sample BTCUSD long 10x

2.40

Normal. Nothing to do.

Mark
Move
Buffer

Demo data. Nothing here is real money.

Portfolio with positions, margin coverage 2.37 Margin coverage explained, with normal, warning and liquidation states Liquidation warning, coverage in red with an Add collateral action Add collateral dialog with the minimum amount to leave Caution
Principle 3

One decision at a time, across the terminal.

Each screen below starts from what a trader is stuck on, then shows the decision that removes it.

Onboarding quests

Problem

A terminal shows the whole market at once. A first-time trader sees everything and no obvious first step.

Decision

A floating list of five quests, each unlocked by the last: deposit, first trade, maker order, hold a position, manage risk.

Market selector

Problem

Choosing a market takes more than a price, and hopping between markets to compare them loses the thread.

Decision

One searchable list with Favorite, Top, New, Meme and AI filters, plus price, 24h change, funding, volume and OI side by side.

Positions table

Problem

One market can carry several triggers, and when they scatter across rows the real exposure gets hard to read.

Decision

One merged row per market, editable current margin, the nearest TP/SL with a +N chip, and Market or Limit close in the row.

An arm, a fulcrum, a force.

The identity behind the product: a mark built from the mechanics of a lever.

Mark construction

Two shapes and one anchor point.

Color palette

No gradients, every color has one role.

Typography

Space Grotesk in five weights.

Apparel and ID badge

The construction grid as a pattern.

Storefront sign

The stacked logo, lit, against brick.

(Results & Impact)

Outcomes

190
screens designed
12
week sprint
55
screens shown here
  • In Figma

    Two descriptions that disagreed with the contract were corrected, including the Isolated margin warning and the LXPO yield label.

  • In Figma

    Trigger cells in the order tables read one way, Index ≥ price, through shared components.

  • In Figma

    Margin coverage has one rule behind every state: one name, a dollar buffer and one next step.

  • Proposal

    The idle Isolated money line is designed and waits on contract answers.

  • Open

    The Last and Mark selector in TP/SL waits on a product decision.

This case study shows no usage metrics or test results.

(Next Step)

With the sprint's screens in Figma, the next work is to close the open contract questions, settle the TP/SL selector, then put margin coverage in front of real traders: do they read the state correctly, and do they act in time?

Next time I'd put the contract questions before the first draft, not after review.

(All Screens)

Every screen shown here.

55 of the 190 product screens, plus 17 brand slides. Figures inside the screens are design sample data.

    Next project

    See all projects
    Interaction DesignCardMastersOpening digital card packs that redeem real physical cards. Product DesignDtravelMaking Dtravel's Web3 vision feel like a product, not a whitepaper.

    Bring Duc the hard screens.

    I'm here about

    Your message

    Talk to Duc

    Nothing is sent from this page. Copy the message, then paste it into LinkedIn.