Shipped 2026
Backtest Performance Dashboard
UBC Trading Group’s quant team had every number they needed and no easy way to read them. I redesigned the dashboard around the questions they actually ask.
- TSLA
- MSFT
- IBM
01Overview
01 · Overview
The numbers were right. The dashboard just wasn’t helping
“Is 0.26 good?” The old dashboard couldn’t tell you. Every number on it was accurate.
None of it was interpreted. A researcher looking at a Sharpe ratio of 0.26 had no benchmark, no threshold, and no sense of whether to celebrate or worry. The dashboard showed the data and left all the meaning-making to the person under pressure.
How might we make the dashboard do the interpreting, so researchers can act on results instead of decoding them?
02 · The Problem
Three ways it made researchers work harder
- 01
Numbers with no context. Ratios floated on screen with nothing to compare them to.
The original risk ratios - 02
A table that made you do math. Weights sat in a column as decimals, so you had to compare every row in your head. In my audit notes: “I can’t feel the impact of the weights at all.”
The original allocation table - 03
Colour sending the wrong signal. The S&P 500 benchmark was red, and in finance red means loss. The chart told you something was wrong before you read a number.
The original performance chart
03 · The Approach
Use it first. Then redesign it
Before touching Figma, I used the dashboard the way a researcher would and wrote down every moment it made me stop and think. That audit became my brief: four modules, each with a list of what to keep, what to fix, and what was missing. Then I rebuilt the layout around the order researchers actually ask questions: How is it performing? → What’s driving it? → What’s the risk? → Details.
04 · Key Decisions
Five questions, five redesigned answers
01Which positions are driving my returns?
A 75% position should look bigger than a 5% one. In the old table, every weight was a decimal in a plain column.
Now, every row has a proportional bar, weights read as percentages, and rows are sorted so the biggest positions sit on top. Returns are coloured green or red on the number itself, and the harsh column dividers are gone.
02Is this strategy actually good?
In the old panel, Sharpe sat last in the list, and every ratio looked the same whether it was good or bad.
Now, the ratio researchers look for first is the first one they see. Each ratio is coloured against its own meaningful threshold instead of just positive vs. negative.
03How does it compare to the market?
The line chart was already the right format for time-series data, and familiarity matters in analytical tools. So I kept it.
floating titlea dot every monthwhich line is which?
Now, period filters let researchers zoom to the timeframe they care about, and the chart sits at the top because performance is the first question.
04What’s my downside?
The donut was trying to hold too much. Labels sat inside the ring, and a negative shortfall looked like any other number.
- TSLA
- MSFT
- IBM
Now, labels sit in a side legend, negative shortfalls turn red instantly, and the balance button has its own background so it stops blending into the numbers. I kept the hover, because it already worked.
05What’s happening beneath the surface?
My audit notes said “a heatmap would be cool, not sure what info would go in it though.” It grew into a full second page.
Now, researchers get the deeper analysis the main dashboard never had:
- Cross-correlation heatmap: lag relationships at a glance, with the key stats (peak correlation, positive vs. negative lags) pulled out as cards above it
- Rolling window & structural-break test: 12/24/36-month rolling Sharpe, with detected breaks marked on the chart and summarized by regime beside it
- Tear sheet: returns, risk, risk-adjusted ratios and benchmark comparison, each metric paired with a sparkline so you see the trend, not just the number
The same rules carry over from the main dashboard: green only for gains, red only for losses, and the number researchers need first is always the biggest thing in the card.
05 · Impact
Shipped, and in the quant team’s hands
2pages shipped
5modules redesigned
8+quant researchers using it
The redesign went from audit to shipped product. I designed it in Figma, then built it myself, and it’s now what the quant team uses to review backtests.
- TSLA
- MSFT
- IBM
