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

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.

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

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.

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.

4. ---
   status: in-progress
   owner: denys
   ---
   
   # Ticker back navigation
   
   | What      | Path                         |
   |-----------|------------------------------|
   | The spec  | ../ticker-back-docs.html     |
   | Shell     | shell/assets/sidebar.js      |
   | Ticker    | apps/ticker-page.html        |
   | Test mode | shell/assets/shell.js        |

   04 · Handoff noteOwner, status, where files liveA short README with the owner and status, a table of every file and function to touch, and a “For developers” section with messages and state.

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.

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.