Live trading and risk dashboard

An internal tool for the Paddy Power and Betfair trading desks

Role
UX/UI Designer, mid-weight at the time. Owned the full design process
Worked With
PM, BA, Tech Lead, Engineers, Compliance, Legal
Timeline
3 sprints, shadowing included
Research
Workshops with both desks, shadowing at Cheltenham Festival, March 2022
Feedback loop
Weekly show and tells with the traders
Outcome
Shipped iteratively. Added the first market suspend kill switch. Live when I left in 2022

Traders were in the room at every step

A group of traders was involved from the first workshop to the last release. I ran no A/B tests and no experiments. I tried ideas, such as moving components around the screen, and put each one in front of the traders at a weekly show and tell.

The screens in this case study are a rebuilt prototype, not the shipped UI. The last section explains the difference.

The problem

Paddy Power and Betfair traders did the same job for two different brands. The brands sit in the same business group, but to customers and to compliance they have to act as completely separate companies. The tool could not allow any overlap between the desks.

Live markets move in seconds. When something big happens in a live sport, such as a red card in football, the odds are about to get shorter or longer. If a trader reacted slowly, savvy bettors used those seconds to get their money on the old price.

Before this project there was no market suspend button. Traders had no kill switch for a live event.

Compliance added a third constraint. The tool and its data are always open to audit and investigation, so every action had to leave a record.

How we worked

The full design process took three sprints, shadowing included.

  1. Workshops. I ran a workshop with each trader group, Betfair and Paddy Power.
  2. Shadowing. I spent a few days with the traders during Cheltenham Festival in March 2022. A horse running fourth could fall, and every horse behind it needed shorter odds in an instant. I watched how fast the traders had to react. It was the first time I saw how fast these decisions get made, and how highly trained the traders are. That gave me clarity: colour would do more to make the key elements stand out than lots of flashing animation.
  3. Design and prototype. I built designs and prototypes. Shadowing changed my approach. I dropped the animation-heavy ideas and moved to colour-led states with subtle, clear notifications.
  4. Weekly show and tell. I took each version to the traders. I moved components around, tried alternatives and asked them to react.
  5. Role-play. We acted out live scenarios on the prototypes with the traders. It was guerrilla research, not formal testing.
  6. Ship. Everything shipped, in iterations.

Decisions I made

The traders shaped every version. These are the calls I made along the way.

Decision 1: colour over animation

The situation. Before I shadowed the traders, I believed animation and lots of “look over here” elements would help them catch what mattered.

What I saw. Much of what the traders were doing happened in their peripheral vision. They are highly trained and decide fast. They needed notifications that were subtle but clear, not more to process.

What I chose. Colour carries state: red for suspended or high risk, yellow for warning or pending, green for active or matched. There is no flashing and no attention-grabbing motion. The key elements stand out because they are the only ones with colour.

Screenshot of the rebuilt prototype. Suspended markets and the high-risk row are red, the pending price is yellow, the committed price and active markets are green. Nothing flashes.
Colour carries state. Nothing flashes. Rebuilt prototype with sample data, not the shipped UI.

Decision 2: one screen, not two

The situation. A lot of information competes for a trader’s attention. I tried a split screen: all the sporting information on one side, the odds and trading information on the other.

What happened. I showed it to the traders. Watching them was like watching a tennis match, with their necks swivelling to see everything.

What I chose. Everything stays on one page.

Wireframe 4. The split screen I tried and dropped. Sporting information on one side, odds and trading on the other. The traders had to swivel to see both.

Decision 3: the market suspend kill switch

The situation. There was no market suspend button. When a red card or a fall happened, a trader who reacted slowly gave savvy bettors seconds to get money on a price that was about to change. Traders had no kill switch for a live event.

What I did. I designed the first market suspend control for these desks, and it shipped. Compliance was in the squad, so every suspend had to land in the audit record.

The prototype below is my rebuilt version of that idea. It has a one-press global suspend, automatic suspension on triggers such as a red card, a countdown, a manual re-open, and keyboard shortcuts. It is not the shipped design.

Interactive. Click the buttons. Best viewed on desktop.
Prototype A. Rebuilt with sample data. Not the shipped UI. Slide the handle to confirm the high-risk price change.

Use Tab to move through the controls. Alt+S suspends all markets, Alt+Z rolls back the latest change. On a small screen, scroll sideways inside the frame or use full screen.

Prototype B. A second way to handle the highest-risk price change. Same screen, dual approval instead of slide to confirm.

The pushback I got

Nobody pushed back on the designs themselves. The pushback was about why we were changing anything when the current way of working was going well.

That wasn’t a question I could answer. The project came from the director of trade.

What worked and what didn’t

What worked. The traders saw every change before it shipped. Nothing reached the desk unseen. The biggest change came from watching them work, not from a request.

What I didn’t do. I ran no A/B tests and no experiments. The feedback was qualitative and came from the group of traders I worked with. I have no numbers on speed or error rates.

What the research couldn’t show. Role-play is not live trading. Cheltenham was the closest I got to real pressure, and it covered a few days.

About the screens

The prototype is not the shipped product. The shipped UI followed Paddy Power and Betfair branding. This version is rebuilt in a neutral style with sample data. The scoreline, odds and £ figures are made up. It exists so I can walk through the interaction design.

The prototype shows two ways I would handle the highest-risk price change: slide to confirm, and dual approval. The three wireframes below are illustrative layout directions for the same screen. They are my drawings for this case study. They are not the iterations I tried with the traders. The split screen in Decision 2 is the layout I did try and drop.

Wireframe 1. Illustrative layout direction: panel on the right.
Wireframe 2. Illustrative layout direction: adjustment strip under the grid.
Wireframe 3. Illustrative layout direction: grid first, audit trail collapsed.