TPRM Dashboard

Design a Command Center for Third-party Risk

Transforming a static dashboard to a decision surface that connects compliance, audit, evidence, and cyber posture across the ResilientX AI Platform.

Role
Product Designer
Timeline
10 weeks · 2025
Team
Solo design · Eng team
Scope
Web · B2B SaaS · Cybersecurity
Toolkit
Figma · Figma Make · shadcn-vue
Before
  • Static dashboard — no decision guidance
  • Users scanned briefly, then left
  • Work happened in other modules
After
  • One decision surface, not a report
  • Connects supplier risk, compliance, audit
  • Surfaces evidence + cyber posture
Impact
  • Functions as the entry point
  • Identifies priority suppliers
  • Routes users into the right workflow

A dashboard that showed data, but didn’t drive action

The dashboard had become a static report, not a decision surface. Users scanned briefly, then left to find meaning elsewhere.

What wasn’t working
01
Weak information hierarchy
  • Every metric competed for attention
  • Nothing signaled what needed action
02
Difficult to scan quickly
  • Dense data, no visual grouping
  • Meaning lost at a glance
03
Didn’t reflect new capabilities
  • Layout predated new features
  • Couldn’t surface what shipped
04
Navigation over guidance
  • Users had to know where to go
  • No next-step guidance
Original TPRM dashboard

The original dashboard — data-rich but decision-poor. Every metric had equal visual weight.

Hotjar session recording — users briefly scanned the original dashboard before navigating away

Hotjar · session recording of the legacy dashboard

Behavioral evidence

Session recordings and heatmaps confirmed it: users scanned the top-level KPIs, then navigated to other modules to do their work.

Why users were skipping the TPRM dashboard

Behavioral data showed the problem; the cause came from session analysis, click maps, stakeholder interviews, and competitor research.

01 — Key Insight
Users bypassed the dashboard entirely
Source: Clarity session recordings
Design Decision
The dashboard needed to route, not inform
Users arrived with a task. Orient them, route them — don’t present data for exploration.
02 — Key Insight
Goal-oriented users execute — they don’t explore
Source: Clarity click maps · scroll depth
Design Decision
Every signal needed a clear drilldown path
Data without a next step is noise. Every element had to connect to an actionable workflow.
03 — Key Insight
Best-in-class TPRM dashboards are launchers, not posters
Source: Panorays · OneTrust · SecurityScorecard · UpGuard
Design Decision
Hierarchy had to reflect user urgency
Layout had to serve executive scans and analyst workflows without compromising either.
What we took from each
Panorays
Tabbed work queues
Action-first structure
SecurityScorecard
Every widget = filtered list
Routing, not exploration
OneTrust
Pure reporting mode
What we avoided
FigJam ideation board: current dashboard analysis, competitor scan of Panorays, OneTrust, SecurityScorecard, UpGuard, SAFE, and synthesized redesign plan.
Ideation board — current-dashboard audit, competitor scan, and synthesis that shaped the redesign brief.

One dashboard. Three users. One hierarchy decision.

The core challenge surfaced from CEO/CTO conversations and sales feedback: one dashboard had to serve three users, each with different questions and urgency.

To decide what goes where, three inputs: user urgency (time available), business value (what sales and leadership heard customers cared about), and competitor analysis of Panorays, OneTrust, SecurityScorecard, UpGuard.

One Dashboard
Layer 01
Executive
Fast TPRM posture
Are we compliant?
Are audits progressing?
Are suppliers risky?
Do we have urgent issues?
Layer 02
Risk Manager
Coverage & program health
Where are the coverage gaps?
Which suppliers are non-compliant?
Are audits progressing?
Are documents or evidence missing?
Layer 03
Analyst
Investigation & action
Where are the gaps?
Which suppliers are non-compliant?
Are audits progressing?
Are evidence or documents missing?

Turning TPRM complexity into one clear control layer

Hierarchy became reading order: orientation at top, compliance and audit health in the middle, cyber posture and tasks below — one layer per user.

Design principle
Every widget answers two questions.
Data
What do I need to know?
Action
What should I do next?
Design moves
01
Designed for 3-second understanding
The top strip surfaces overall risk posture through KPIs and visual signals — no scanning required.
02
From data display to decision-oriented KPIs
Threshold status and risk labels replace raw metrics, supporting faster decisions.
03
A routing layer, not exploration
The dashboard guides users directly to relevant workflows instead of inviting drilldown.
Reading order
01
Exposure now
Where are we at risk?
02
Work queue
What should I do next?
03
Coverage
Are we covering all suppliers?
04
Progress
Are we improving?
Annotated TPRM dashboard — five modules mapped to user needs

Three loops — founders, eng, and the data

Design Lead on the redesign. Solo design, with eng pairing on the front-end build and instrumentation feeding the design hypothesis from day one.

Direction
Founders + sales feedback

Partnered with the CEO and CTO on the strategic question — should the dashboard inform or route? Sales fed in what customers were actually asking for in calls.

Build
Eng pairing on the front-end

Designed in production Vue + Tailwind + shadcn-vue — no Figma-to-eng handoff. Backend support pulled in for routing and data-shape changes.

Validate
Microsoft Clarity, day one

Heatmaps, session recordings, and attention maps on the new surface from launch — so the design hypothesis could be falsified by data. The metrics in the next section come from this same instrumentation.

Friction metrics dropped to near-zero

Same Microsoft Clarity instrumentation, same product surface — pre-launch baseline against the first 10 weeks post-launch. Users went from clicking around hunting (40% of clicks hit nothing, 1 in 3 sessions bounced right back) to a clean interaction surface where they know what is interactive and where it leads.

Metric
Old dashboard
New dashboard
Change
Dead clicks
Click attempts that hit nothing interactive
40.4%
2.7%
−93%
Quick backs
Sessions that clicked into a page, then bounced right back
31.9%
0%
Eliminated
Rage clicks
Repeated clicks in the same spot — classic frustration signal
2.1%
0%
Eliminated
Before · Old dashboard
Clarity dashboard for the old TPRM dashboard showing 40.43% dead clicks, 31.91% quick backs, 2.13% rage clicks across 47 sessions over 14 months.

40% dead clicks, 32% quick backs. Users clicked around hunting, found themselves in the wrong place, came back.

After · New dashboard
Clarity dashboard for the new TPRM dashboard showing 2.73% dead clicks, 0% quick backs, 0% rage clicks across 366 sessions in 10 weeks.

2.7% dead clicks, 0% quick backs, 0% rage clicks. Users know what is interactive and where it routes.

Source: Microsoft Clarity, same workspace surface. Old dashboard: Dec 2024 – Feb 2026, 47 sessions · New dashboard: Mar 1 – May 14, 2026, 366 sessions. Sample sizes differ because the new dashboard launched into a higher-traffic period; figures are normalized percentages, so the before-and-after comparison holds.

Designed reading order, confirmed by attention

Clarity’s attention heatmap shows the time-spent distribution across the new dashboard. Highest attention sits on compliance KPIs at the top, moderate on audit health and documents in the middle, lower on cyber posture below — matching the hierarchy decision made from user-urgency analysis.

Clarity attention heatmap of the new TPRM dashboard, with highest attention on top compliance KPIs, moderate on the middle audit and documents row, lower on cyber posture below.

Microsoft Clarity attention heatmap · New dashboard, Mar – May 2026 · Red = high attention · Blue = low attention

More Case Studies