Case Study 04 · Real-Time Financial Risk

PORTFOLIO
RISKMONITOR

Portfolio managers are flying blind during market volatility — their risk tools update every 15 minutes while positions move every second. This is the design process behind a real-time risk dashboard that surfaces breach events before they become losses.

Real-Time Data UX Risk Visualization Portfolio Management Alert Design Data-Dense Interfaces

ROLELead Designer

USERSPortfolio Managers, Risk Officers

CORE PROBLEM15-min lag in risk data during live markets

SCOPEProduct + Data Visualization

TIMELINE7 weeks

Phase 01 — Discovery

THE 15-MINUTE PROBLEM

Portfolio managers at a mid-size asset manager discovered their risk system reported a VaR breach — 22 minutes after the breach had already occurred. By then, the position had moved further. The tool was built for end-of-day reporting, not live markets.

Contextual Research — Trading Floor Observation

I spent two days observing portfolio managers during live market hours. Three critical behaviors emerged that the existing tool completely ignored.

OBSERVATION FINDINGS

OBS 1: PMs have 3+ screens — risk tool was always the LAST tab checked
   → WHY: It didn't update fast enough to be worth watching
   → DESIGN IMPLICATION: If it's not live, it won't be watched. Make it live.

OBS 2: Alerts came via email — spotted 8-12 minutes after send
   → WHY: PMs aren't watching email during active trading
   → DESIGN IMPLICATION: Alert must be IN the tool, visually dominant

OBS 3: When a breach occurred, PM's first question was ALWAYS: "which position?"
   → WHY: System showed portfolio-level breach but no position detail
   → DESIGN IMPLICATION: Alert must link directly to the offending position

CRITICAL FINDING The existing tool was designed for the risk analyst, not the PM doing the trading

The Three User Modes — Time-of-Day UX

Portfolio managers use risk tools completely differently depending on time of day. The existing tool had one static view. I designed for three distinct modes.

USER MODE MAP

MODE	TIME	BEHAVIOR	DESIGN NEED
Pre-market	7–9:30AM	Planning, reviewing overnight positions	Summary view, scenario modeling
Live trading	9:30AM–4PM	Active monitoring, rapid decisions	Real-time alerts, minimal clicks to action
Post-market	4–6PM	Review, reporting, next-day prep	Historical view, exportable summaries

Phase 02 — Architecture & Flow

ALERT HIERARCHY

Information Architecture — Five KPIs, Ranked by Risk Speed

I ranked every metric by how fast it can move against a portfolio. The fastest-moving metrics get the most prominent position — not the most commonly-requested ones.

KPI PRIORITY RANKING

KPI	MOVES IN	VISUAL WEIGHT	ALERT THRESHOLD
Portfolio VaR	Seconds	T1 — largest display	Breach = immediate red flash
Gross Exposure	Seconds	T1 — equal to VaR	Breach = amber warning
Beta vs. Benchmark	Minutes	T2	±0.2 from target = amber
Sector Concentration	Minutes–Hours	T2	>40% single sector = amber
Sharpe (trailing 30d)	Daily	T3 — informational	No alert — context only

Alert Flow — From Breach to Action

I mapped the complete alert lifecycle. Every second between breach and action costs money. The design must collapse that gap to under 10 seconds from detection to PM decision.

ALERT LIFECYCLE FLOW

Threshold breachlive data

→

Visual flash + sound<1 second

→

Alert panel surfacesposition linked

→

PM reviews1-click drill-down

→

Acknowledge/Actlogged in audit

Phase 03 — Design System

DARK, DENSE, LEGIBLE

Aesthetic Direction — Bloomberg-Meets-Aerospace

Trading floor tools must work under stress, in low light, across multiple monitors. I chose deep navy-black with electric cyan and semantic color for risk states. Bebas Neue for data display — it reads faster at a glance than any serif. Every design decision serves speed of comprehension, not aesthetics.

DESIGN RATIONALE

Dark background (#06080f) → reduces eye strain across 8-hour trading sessions
Electric cyan (#00d4ff) → "live" signal — anything cyan is streaming in real time
Green (#00e5a0) → profit / safe / within threshold
Red (#ff4757) → loss / breach / action required — highest attention
Amber (#ffd32a) → warning — approaching threshold, watch closely
Bebas Neue display font → maximum legibility on numbers at large sizes
JetBrains Mono → all data values, IDs, timestamps — never body font

RULE Color encodes risk state, never decorative use of color anywhere

Visual Hierarchy — Attention Zones

I divided the screen into three attention zones. The PM's eye moves from Zone 1 (portfolio health) → Zone 2 (position detail) → Zone 3 (action) in under 3 seconds during a breach event.

ATTENTION ZONE MAP

ZONE	CONTENT	VISUAL TREATMENT	EYE PRIORITY
Zone 1 — KPI Strip	VaR, Exposure, Beta, Sector, Sharpe	Full-width, large display font, color-coded fills	First — always visible, always updating
Zone 2 — Chart + Positions	Risk chart over time, position table	2/3 width, medium density	Second — confirms zone 1 signal
Zone 3 — Alerts	Active breaches, thresholds	1/3 width, right rail, persistent	Third — scrollable, always present

Phase 04 — Working Prototype

LIVE DASHBOARD

Fully interactive. Data updates in real time every 3 seconds. Click any KPI card to see its detail. Click positions to see risk breakdown. Use threshold sliders to trigger alerts. Hit "Simulate Breach" to see the full alert lifecycle.

ATLAS MULTI-STRATEGY FUND

PORTFOLIO RISK MONITOR · Q4 2024

LIVE

14:02:31 EST

⚡ Simulate Breach

Portfolio VaR (95%)

$2.84M

↓ 0.3% · within threshold

Gross Exposure

$148.2M

↑ $1.2M last 5m

Beta vs Benchmark

0.94

Target: 0.8–1.1

Max Sector Conc.

38.4%

⚠ Tech · limit 40%

Sharpe (30d)

1.42

vs 1.18 benchmark

PORTFOLIO VAR — INTRADAY

POSITION

MARKET VAL

P&L TODAY

CONTRIB VaR

RISK

LIVE ALERTS 3 ACTIVE

ALERT THRESHOLDS

VaR Limit

$3.2M

Sector Conc.

40%

Beta Range

±0.3

Phase 05 — Reflection

WHAT THE DESIGN SOLVED

Key Design Decisions

D1 Live data refresh every 3s — makes tool worth watching
D2 Alert links directly to offending position — no searching
D3 Color = risk state only, no decoration anywhere
D4 Bebas Neue for numbers — maximum glanceability
D5 Threshold sliders in the dashboard — PM controls risk limits

Next Iterations