UX Case Study
Market Risk Dashboard
Unifying fragmented risk data across a 14-level business hierarchy — for analysts who need depth and executives who need clarity.
Credit Suisse Enterprise UX Data Visualisation Lead Product Designer
Client
Credit Suisse
Global investment bank with complex multi-portfolio risk exposure
Domain
Market Risk
Daily risk analysis across trading desks, portfolios, and business lines
My Role
Lead Product Designer
UX, flows & hi-fi UI
Tools
Adobe XD + Miro
Wireframes to hi-fi designs
Tech
D3.js · E-charts · Highcharts
Real-time visualisation
02 — Challenge
The Problem We Were Solving
Risk data existed across multiple disconnected systems. Analysts had no single place to see the full picture — slowing decisions and increasing the chance of missed breaches.
Pain point
Fragmented data
Risk data spread across disparate systems with no consistent format or view
Pain point
Slow analysis
Daily risk reviews took too long — analysts manually stitching together multiple reports
Pain point
No drill-down
Impossible to trace a top-level risk flag down through 14 hierarchy levels to its source
Pain point
Missed breaches
Senior management lacked clear summaries to quickly identify major risk drivers
Core design challenge
"How do we give both analysts and senior management a single source of truth — with the depth analysts need and the clarity executives require?"
03 — Users
Two Audiences, One Dashboard
The core design tension was serving two very different mental models — deep-dive analysts and time-pressured senior managers — within a single product.
User type 1
Business Analysts
Need to trace risk movements down 14 levels to validate positions and understand root causes
Daily usersDeep drill-downAccuracy-focused
User type 2
Senior Management
Need fast summaries that flag major risk drivers and limit breaches without navigating raw data
Periodic reviewsBreach alertsDecision-focused
The same data had to serve completely opposite use cases. That meant designing progressive disclosure — surface the summary, hide the depth until it's needed.
Design principle guiding the dashboard architecture
04 — Information Architecture
Designing for 14 Levels of Depth
The biggest UX challenge was making a 14-level business hierarchy navigable without overwhelming users. The solution was a progressive drill-down model.
Business hierarchy — drill-down model
Firm-wide risk summary
↓
Division
Division
Division
↓
Business line
Business line
Business line
↓
Trading desk
Trading desk
Trading desk
↓
Portfolio · · · 14 levels deep
Design decision
Breadcrumb trail
Always shows where you are in the hierarchy — so analysts never lose orientation
Design decision
Context persistence
Parent-level metrics stay visible as you drill down — comparisons stay meaningful
05 — Solution
What We Built
A dynamic Market Risk Visualisation Model — combining real-time charting libraries with a flexible drill-down architecture.
Market Risk Dashboard
Market Risk Dashboard — high-fidelity Adobe XD design
D3.js
E-Charts
Highcharts
Adobe XD
Miro
Reusable components
✓
Full drill-down
14 levels of hierarchy navigable from a single starting view
✓
Real-time visualisations
Live risk data rendered via D3.js, E-Charts, and Highcharts
✓
Executive summary view
Clear top-level summaries flagging major risk drivers and limit breaches
✓
Risk movement tracking
Analysts can trace risk delta movements across portfolios and time periods
✓
Design system components
Reusable component library ensuring consistency across all views
✓
Breach indicators
Visual flags alert users to limit breaches without burying them in data
06 — Process
How We Got There
From stakeholder alignment to high-fidelity delivery — a structured process keeping analysts, managers, and engineers in sync throughout.
1
Stakeholder discovery
Ran sessions with analyst and senior management groups to surface divergent needs — speed vs. depth — before any design work began.
2
Information architecture
Mapped the 14-level business hierarchy and defined the progressive disclosure model — what's shown at each level, what's hidden until needed.
3
Wireframes
Created low-fidelity wireframes for all key views — summary, drill-down, and breach alert states — validated with both user groups.
4
Miro ideation with stakeholders
Used Miro to refine concepts collaboratively, ensuring the visualisation model mapped to real analyst workflows.
5
High-fidelity Adobe XD designs
Delivered full hi-fi designs with a reusable component library — built for scalability across multiple dashboard streams.
6
Dev handoff & oversight
Coordinated across design and engineering to ensure accurate implementation of the visualisation model and component standards.
07 — My Contribution
What I Owned
I led end-to-end product design — from user flow definition through to high-fidelity delivery and cross-team coordination.
🗺️
User flows & information architecture
Designed full user flows for both personas, including the drill-down navigation model across all 14 hierarchy levels.
🎨
Wireframes to high-fidelity UI
Took the dashboard from low-fi wireframes to complete Adobe XD designs — all states, drill-down levels, and breach alert views.
🧩
Design system & components
Created a reusable component library ensuring visual consistency and scalability across multiple product streams.
🤝
Stakeholder coordination
Used Miro to facilitate ideation sessions and coordinated across design and engineering through delivery.
🚀
Multi-stream leadership
Oversaw design and prototyping across multiple concurrent streams to meet tight launch deadlines.
08 — Outcome & Learnings
Results & Reflections
The dashboard consolidated fragmented risk data into a single navigable interface — improving analysis speed, accuracy, and executive confidence.
14
Hierarchy levels made navigable
2
Distinct user personas served
3
Charting libraries integrated
1
Unified source of truth delivered
Key learning
Depth and clarity aren't opposites
Progressive disclosure was the key insight — reveal depth on demand rather than choosing between everything and nothing.
Key learning
Two personas need two entry points
Analysts and executives have fundamentally different mental models. The dashboard needed to honour both simultaneously.
If I did it again
Test navigation earlier
With 14 levels of hierarchy, wayfinding is critical. I'd run navigation testing at wireframe stage — before any visual design investment.
1 / 8