06 / AI dashboard
Nasdaq AI.
The problem
Nasdaq wanted an AI-powered, automated trading system, and the part people would actually look at was a dashboard. Its users were professional traders on investment teams. They watch the market all day, and a few seconds can change a decision. The question was what the system should surface and how little it could say while still being believable to people who know the numbers.
The brief was open. There was a concept to give shape to, a brand that had to look like Nasdaq without being a copy of its marketing site, and an audience that dislikes decoration. A dashboard for this crowd has to be dense, but it cannot be a wall of charts. Everything on screen had to earn its place, or traders would ignore it.
The approach
I worked as a freelance designer on the full arc, from flows and wireframes through to the visual system and brand, and I kept the first rounds in grayscale so structure came before style.
- 01
User flows
I started with how a trader would move through a day: pick a security and a portfolio, scan what was missed, check how they compared with peers, then look at the market around that moment. Mapping this first told me the dashboard needed one main view with two supporting panels, not a set of separate pages.
Mapping a trader's day first showed the order in which questions come up. That order gave the dashboard one main view with two supporting panels. - 02
First wireframe
The first wireframe put missed opportunity latency in the large left panel, because it was the question that mattered most. Beneath the bars I added a column of dots for individual orders, with a tooltip that lists the order's details. Peer benchmarking and liquidity sat to the right.
First wireframe: missed opportunity latency. - 03
Liquidity dynamics view
A second wireframe covered liquidity dynamics: buy and sell price lines over the day, with a table of order data beneath. Traders needed to compare the two sides, so I put them on one chart and gave each side its own summary column below, rather than hiding the comparison behind a toggle.
Wireframe: liquidity dynamics. - 04
Moodboard and brand
For the brand I collected imagery from Nasdaq's own world: trading floors, data walls, dark market screens, the logo in several treatments and its blue palette. I built moodboards from it and tested how far a dark, lit-from-within interface could go while still looking like Nasdaq and not like a generic finance template.
Brand and presentation boards. - 05
Golden ratio layout
I applied phi, the golden ratio, to the page framework. A large panel takes the main share and three smaller panels stack beside it, with their proportions drawn from the same spiral. It gave the layout a reason for its sizes, and it gave me an answer when someone asked why one chart was bigger.
The layout grid behind the panels. - 06
Visual design, light and dark
I designed a light theme first, then a dark one. The dark version suited long sessions and let one orange highlight stand out: the selected bar, its dots and the peers who ranked highest. Peer benchmarking became a grid of rings, each showing a rank out of 50, with a tooltip on hover.
The dark theme.
The solution
The Trading Insights Dashboard has a header with a security search, a portfolio selector and day tabs for the week. The main panel shows missed opportunity latency as bars and a cumulative line, with a column of dots under each time slot. Side panels show peer benchmarking as a ring grid, liquidity dynamics and missed opportunity liquidity. Each can open into its own full view.
The key idea was one shared time axis. Every panel lines up on the same hours, and a marker on one chart moves on the others, so a trader can point at a moment and see everything that happened then. The dashboard was designed for a laptop and a tablet, and a live beta build was demoed.
What I delivered
- User flows for the Trading Insights Dashboard
- Grayscale wireframes for latency and liquidity views
- Light and dark visual designs for laptop and tablet
- Golden ratio page framework
- Brand exploration, moodboards and presentation boards
- Interactive concept shown in a live beta build
Value added
For people using it
Professional traders could see missed opportunities, peer standing and liquidity on one screen, line them up by time and act on what mattered without moving between several tools.
For the business
Nasdaq had a concrete, branded picture of what an AI-powered automated trading system could offer investment teams, which made the idea much easier to discuss with clients and internal stakeholders.
For the team
Wireframes, a layout rule and two themes gave engineering a clear target for the beta build. The presentation boards also gave the client a way to explain the concept to others.
The result
The work shipped, and a live beta build of the Trading Insights Dashboard was demoed. Nasdaq received the dashboard on laptop and tablet, plus brand and presentation boards to explain it.
What I took from it
Grayscale wireframes let the client argue about what mattered before arguing about color. I would keep that order on the next data-heavy product and bring the traders into the very first review.