Backtest Performance Dashboard

Overview

The right data. The wrong hierarchy.

The UBC Trading Group's quant team runs algorithmic backtests to evaluate portfolio strategies — but the outputs were landing in a dashboard that made the data hard to act on. Numbers existed. Meaning didn't.

This project was an end-to-end redesign: from user research with quant researchers, to information architecture, to high-fidelity Figma prototypes. The goal wasn't to add more data — it was to make the existing data actually communicate.

The Problem

Accurate, but not useful.

Risk ratios sat without context — no indication of what a "good" Sharpe ratio looks like, no comparison to a benchmark, no sense of whether 0.26 is something to celebrate or worry about.

The asset allocation table listed weights as decimals in a column with no visual weight — meaning a researcher had to mentally convert, compare, and rank every row themselves. The portfolio performance chart used red for the S&P 500 benchmark, a colour the entire finance world associates with loss, creating a false signal before you'd read a single number.

The dashboard was accurate. It just wasn't doing any of the interpretive work that would make it useful under pressure.

Research & Architecture

Mapping the actual decision workflow.

I started by sitting with quant researchers and mapping their workflow — not what the dashboard showed, but what decisions they were actually trying to make with it.

That surfaced a clear hierarchy the original layout had ignored: T1 — Performance: How is the portfolio doing? Against itself, against the benchmark, over time. T2 — Asset Allocation: What's driving performance? Which assets carry the most weight? T3 — Risk: What's the downside exposure? Expected shortfall, volatility. T4 — Details: Granular numbers — monthly breakdowns, individual asset returns.

The redesign reorganised the entire dashboard around this hierarchy. What researchers needed first was now visually first.

Portfolio Performance

Colour should signal meaning, not just differentiate.

Kept the line chart — it's the right format for time-series data, and familiarity matters in analytical tools. The key change: replaced red for the S&P 500 benchmark line with a muted neutral colour. Red in finance means loss. Using it for a benchmark comparison was creating a false negative signal that had nothing to do with actual performance.

Added a gradient fill beneath the portfolio line for visual weight, and period filtering — monthly, quarterly, 6-month, 1-year — so researchers can zoom into the timeframe relevant to the strategy being evaluated.

Risk Ratios

Context turns a number into a signal.

Two significant changes. First, Sharpe ratio moved to the top — it's the primary metric quant researchers reach for first, and burying it mid-grid made no sense. Second, colour differentiation was added based on each ratio's own scale, not a generic green/red binary. A Treynor ratio of -0.04 is red because it's negative. A Sharpe of 0.26 gets contextual colouring based on where it sits relative to meaningful thresholds.

Hover interactions now expose the formula behind each ratio — so a researcher doesn't have to hold the definition in their head while reading the number.

Asset Allocation Table

Visual weight should match analytical weight.

The original table listed weights as decimals in plain text with no visual representation of relative size. A researcher looking at TSLA: 1.00, MSFT: 0.75, IBM: 0.00 has to do the comparison mentally across every row.

The redesign adds inline weighted bars — a proportional horizontal bar next to each asset so relative weight is immediately visible. Decimals converted to percentages. Assets sorted by weight descending so the most impactful positions are always at the top. Returns colour-coded green for positive, red for negative — applied to the number itself, not the row background, keeping the table readable.

Column dividers removed entirely. They were adding visual noise without adding information.

Asset Allocation Chart

Remove clutter. Surface the signal.

The donut chart previously had text labels inside the donut itself — creating a cramped, hard-to-read centre. Labels moved to a clean side legend. The chart area was resized relative to the table to better balance the panel.

Negative expected shortfall values are now highlighted red, positive values green — making the risk signal instant rather than requiring the researcher to parse the sign of the number. The balance button received a distinct highlighted background to visually separate it from the shortfall figure it was previously blending into.

Heatmap Addition

A view the original dashboard didn't have.

A cross-correlation heatmap was added as a supplementary view — showing lag relationships between portfolio metrics. Darker green indicates positive correlation, darker red indicates negative. For quant researchers evaluating strategy robustness, this surfaces structural patterns that a performance line chart alone can't show.

The Through Line

The dashboard's job is to get out of the way.

Every change traces back to the same principle: the dashboard shouldn't make researchers do interpretive work that the design can do for them.

Colour should signal meaning, not just differentiate. Hierarchy should reflect how decisions are actually made, not how data happens to be structured. Visual weight should match analytical weight — if an asset represents 75% of the portfolio, it should look like 75%.

The quant team's job is to evaluate strategies. The dashboard's job is to get out of the way and let them.

Next Project