A web‑OS trading terminal, redesigned twice and shipped every month

What a trader had, and the page that replaced it. Pull the handle across each frame. On a desktop the perps app and the XP page run live, as prototypes: pull the old page away and use the new one.

Perps

From Hyperliquid's own terminal to an app on the desk

After

Before

Before the app, traders used Hyperliquid's own terminal: the order book, one order form, positions in a table under the chart. Hyperliquid Lite keeps the chart and the form and brings the positions beside the chart as cards, each with its sparkline, its exits, a PnL card and a close. The form is one column: side, amount, leverage, the liquidation price, stop loss and take profit.

Ticker page

From an app in a window to a page traders arrange

After

Before

The first ticker page was an app in a window: the chart, a buy panel, trades and holders as tabs under the chart, token info in a column. The second is a layout: the chart with trades beside it, the order panel with amount presets, the PnL card docked under it, positions as a table that sells from the row. How a trader arranges it is its own chapter below.

XP

From a points table to a page that shows where you stand

After

Before

The first XP page was a table: a bar, missions and streaks as rows, an empty leaderboard. The new one is an account tab. At the top the rank, the XP total, what today added and how far the next rank is; missions in one column, streaks in the other, the leaderboard one tab away. Teal always means XP you have or can earn, and only the rank emblem, the podium and the XP mark glow. The same page runs on the phone.

A trader opens Explorer, a ticker page, futures and an account window side by side. Every app is dense market data, and the product adds or reworks one app roughly every month.

The job is a moving target: redesign the whole terminal without stopping it, then keep every new app and feature consistent with what's already live, so fourteen apps still read as one desk.

The first redesign turned the terminal into an operating system: windows, a taskbar, apps that open side by side. The second came from testing that with traders and unifying the trading flow across the apps. Neither froze the product: each cycle shipped, got used, and fed the next one.

Between the redesigns the feature work never stopped. Every new app and flow landed on the same system, was reviewed against its spec and tested before release.

• 01Redesign leadTwo full redesignsOS-style shell first, then the trading flow unified across apps. Each cycle live before the next.
• 02From zeroBinder, Explorer, Launch engineThree apps designed from scratch, including NFT drops tied to a token and an AI engine inside the launch.
• 03Every month~15 features, one appDesigned, prototyped and iterated on the same system, alongside whichever app is being added or reworked.
• 04Design QAAs much QA as featuresI test each build against its spec and write the feedback on why it works or doesn't.

Hyperliquid Lite is one of the terminal's apps. I designed an edit mode where stop loss, take profit and margin are adjusted on the price itself: add a level, drag its tag, and the order panel follows. The full story has its own case.

Every trader watches something different, so I designed the ticker page as a layout, not a screen. In edit mode blocks come in from a drawer on the left, drop onto the canvas, and the rest of the page reflows around them.

My part: the concept and the interactive prototype, then the development alongside the engineers. The prototype carries the real behaviour, not a picture of it: an empty state that explains itself, a “Block moved” toast with undo, a save bar that knows when nothing has changed, and a way back to the default layout.

Edit modeSaved layoutDragging a block

Copilot is the terminal's AI chat. It docks as a panel on the right and follows whatever is open: a Hyperliquid market, a token page, or the whole desk.

Its answers act on the real interface instead of staying in the chat. Key levels are drawn onto the chart. A stop loss, a take profit or a buy fills the real order form, and nothing is placed until the trader presses the button. Every answer shows what it was based on.

My part: the research, the redesign of the chat and its character, and a prototype on the real desk with scripted scenarios for every card and state. That prototype is below, docked in the terminal: ask it about BTC.

The answers in this prototype are scripted.

Nothing ships as a Figma link and a chat message. Each feature has a folder with the prototype, a spec page beside it and a handoff note, so an engineer, a designer and QA read the same thing.

Reviews happen against the spec page, then the build is tested against it. QA is the same volume as the feature work: for every feature that goes in, there is a test pass and written feedback on what fails, why, and how to fix it.

1. 01 · PrototypeBuilt on the real kitThe behaviour lives in the running shell: states, edge cases and test-mode rows to click through.
2. 02 · SpecA docs page beside itThe rule, the button, when it changes, edge cases to decide. Ticker back navigation, for example: seven sections, from the rule to a “For developers” part.
3. 03 · Cases, played liveThe table runs in the shellEvery case in the spec opens the real prototype in that state, so review happens on behaviour, not on a description of it.

Market UIs have moments most kits never cover: a reward landing, a level unlocked, a button confirming an AI action, a hover that carries meaning. I designed a motion library for these moments so they read the same in every app, plus an internal mini motion engine that lets us tune each one by hand instead of accepting whatever a generator produced.

Played live from the prototype: the notification kit for rewards and referrals. Each moment has its own entrance, hold and exit, and the kit page walks the team through all of them.

Traders share wins, so I designed the PnL card as a small editor, not a screenshot: pick the position, switch backgrounds, go square for stories or wide for X, show dollars or percent. On the terminal it reacts to the cursor with a glow, a moving border and a slight tilt. Concept and prototype first, then the development with the team.