MohamedSenior Product Designer
Utrecht

WorkUser interface design

A trading workspace built for four-hour sessions

I redesigned ThndrX, Thndr’s advanced web platform for active traders, turning a light MVP built on Ant Design into a dark, branded workspace of widgets that traders arrange, save and theme for themselves.

The MVP trading screen: light, fixed panels built from stock Ant Design components
The redesigned ThndrX workspace: dark, branded and made of movable widgets
Before · MVPRedesign
Drag across the screen to compare the MVP with the redesign.
Company
ThndrX
Discipline
User interface design
My role
  • Turn the functional MVP into a considered, on-brand UI
  • Identify the experience gaps from research
  • Collaborate with brand and marketing
  • Handoff and build with engineering

The starting point

ThndrX is Thndr’s advanced web platform for active traders in MENA. The first version was built quickly to validate the concept and carry complex business requirements, on top of Ant Design so the team could ship and test an MVP early.

It did its job, but it looked and behaved like a prototype. The people using it are experienced traders who expect clarity, speed and reliability, and many of them spend four or more hours a day on the platform.

Problem

A bright, generic interface on stock components, one fixed layout for every kind of trader, and sub-menus that were hard to read. It didn’t feel like Thndr, or like a professional tool.

Goal

Make ThndrX feel fast, trustworthy and modern, hand traders control of their own workspace, and close the accessibility and affordance gaps the MVP left behind.

The MVP trading page · explore the pins

The MVP trading page: a watchlist, chart, order book and positions table on a white background
  1. Cramped, truncated dataThe watchlist cut its own headers down to “Pr…” and “C…”. The fixed grid couldn’t give the numbers room.
  2. A bright white canvasHard on the eyes across a four-hour session, and the first thing traders asked to change.
  3. One layout for everyoneEvery panel had a single fixed place. Traders couldn’t rearrange or personalize them around how they trade.
  4. Stock componentsDefault Ant Design tabs, buttons and blues, with very little of Thndr in them.
  5. Feedback that’s easy to missWarnings like “You don’t own enough balance” sat in pale yellow on pale yellow.

What research told us

UX research on the MVP pointed at two areas: the main trading page and its sub-menus. Each finding turned into a design decision.

  • 80%

    of traders preferred a dark interface.

    Dark by default, with Auto and Light one setting away.

  • 4h+

    a day, five days a week, is a normal session for many of them.

    Quiet chrome, so colour is left for prices and actions.

  • 1

    fixed layout for every kind of trader. They wanted to rearrange and personalize widgets.

    A workspace of widgets, saved as named layouts.

  • 2

    key sub-menus, balance and widgets, were hard to read and unclear to use.

    Rebuilt as solid, high-contrast panels with previews.

The redesign

The new UI goes beyond a visual refresh. It brings the Thndr brand into the product, feels faster and more modern, and hands control of the layout to the trader through a workspace of widgets. It also fixes the accessibility and affordance issues the MVP left behind.

01 A dark workspace made of widgets

Everything on the trading page is now a widget in a shared frame, with the same header, settings and close controls whether it holds a chart, an order book or a positions table. Colour is saved for the data itself, so green and red only ever mean price direction.

The redesigned trading page · explore the pins

The redesigned trading page: two order books, a candlestick chart and a positions table on a dark violet workspace
  1. Workspaces as tabsTrading, Market Watch and Simple View are saved layouts. The plus starts a new one.
  2. Add a widget from anywhereThe widget menu is always one click away in the top bar.
  3. One frame for every widgetSymbol on the left, settings and close on the right. Learn it once and every widget works the same way.
  4. Depth before detailA depth curve sits above each order book, so the balance of bids and asks reads at a glance.
  5. Colour only where it means somethingThe chrome stays quiet. Green and red are for price direction, yellow for the live price under the crosshair.
  6. One widget, four viewsTrades, open orders, past orders and alerts switch with tabs instead of separate pages.

02 Menus you can actually read

The MVP’s sub-menus were translucent grey panels laid over a busy page, which made them hard to read and unclear to use. The widget menu is now a solid panel where every widget shows a preview of what it adds.

Before

The MVP balance menu: grey translucent panel with low-contrast text
Balance breakdown, grey on grey over the order book.
The MVP add-widget menu: small previews on a translucent grey panel
Add widget, with previews too small to tell apart.
The redesigned widget menu: seven widgets, each with a live preview
  • Trading View ChartCandles and volume for any symbol.
  • Trades ManagementBuy and sell, one click away.
  • Market DepthBids and asks as a depth curve.
  • Market WatchLive prices for a watchlist.
  • Profile SummaryPortfolio value and return.
  • Order ExecutionTrades, open and past orders.
  • Trading JournalA record of past trades.

03 Workspaces traders name and save

A new workspace starts from a template or from a blank grid. Templates cover the most common setups, so nobody starts from nothing, and every saved workspace sits in the top bar like a browser tab.

Workspace name New workspace

Rebuilt from the design. Pick a template to name the workspace.

04 Dialogs in the same language

Settings and alerts follow the same rules as the workspace: solid surfaces, clear labels and a single violet action.

Settings dialog with market, theme and language switches
Settings. Market (US or Egypt), theme (Auto, Light or Dark) and language (English or Arabic) in one place.
Price alert dialog, set to one-time at 56.25
Price alert. Recurring or one-time, set against a single price.

05 A theme for every desk

The workspace theme is fully customizable. Beyond light and dark, traders can tint the whole workspace to their own taste, and every theme keeps prices in the same greens and reds.

The trading workspace in the violet theme

Theme Violet

Shipping it

ThndrX rolled out gradually. After the rollout, users reported noticeably higher satisfaction with the overall experience.

The redesigned ThndrX workspace on a laptop

What I took away

The redesign started as a visual refresh and became a change in who owns the layout. Once traders could arrange, save and theme their own workspace, the product no longer had to guess at one layout that suits everyone.

  1. 01

    Let research set the defaults

    With 80% of traders asking for dark mode, the default was an easy call. Light and Auto stay one setting away for everyone else.

  2. 02

    Design the container, then the content

    One widget frame, with the same header and controls everywhere, is what made a customizable workspace possible to build and quick to learn.

  3. 03

    Customization needs a starting point

    Templates like Trader Pro and Simple View mean nobody faces an empty grid on their first day.