Threat Visibilitya case study
Application security · data visualization

Threat
Visibility

One legible view of the attacks hitting a customer’s entire ecosystem — and the shortest path from seeing to acting.

The platform continuously discovers, tests, and protects the APIs, mobile apps, web, and cloud services in a company’s stack. This project lived inside the API-protection product: specifically, how to show the attacks hitting a customer’s APIs.

ecosystem — attacks by type (sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
Ecosystem — attacks by type
last 24h · all surfaces · sorted by volume
APIsMobileCloud
Attack typeVolumeRequestsSeverity
SQL Injection11,420Critical
BOLA9,970Critical
XSS6,880High
SSRF5,410High
Path traversal3,020Medium
Exposed credentials1,780Medium
Senior product / UX designerData visualizationDashboard designInformation designMUI design systemApplication security · API protection
00Context

A modern application-security platform.

It continuously discovers, tests, and protects the APIs, mobile apps, web, and cloud services that make up a company’s application stack. This project lived inside the platform’s API-protection product — specifically, how to show the attacks hitting a customer’s APIs.

Surfaces

APIs · mobile · web · cloud

Approach

Discover · test · protect

This work

API attack visibility

My role

Product / UX & data viz

01The problem

Teams don’t lack data. They drown in it.

A platform watches a customer’s whole ecosystem — mobile, APIs, cloud, web — and every surface streams security signal: attempted exploits, suspicious traffic, schema mismatches. The raw material is all there. What’s missing is a way to stand back and read it.

WARNsqli attempt · POST /v2/login
WARNbola · GET /users/{id} · token low-entropy
INFOschema mismatch · GET /orders · svc-billing
WARNxss · query · /search?q=…

“What’s hitting us right now, where’s it coming from — and what do I deal with before lunch?”

02The goal

Readable in seconds. Actionable in one move.

I designed toward five questions a security lead asks on sight. Every chart had to answer one — and encode severity so attention lands in the right place first.

What attacks are most common?

By request volume.

Where do they come from?

Source location.

How severe are they?

Severity encoding.

What's my attack surface?

Affected endpoints.

What are the trends?

Change over time.

03The users

Technical, time-poor, always mid-triage.

One primary persona shaped every call: the security lead responsible for threats across a whole portfolio of apps and services — who opens this dashboard between a dozen other tabs and needs the situation in seconds, not a morning of reading logs.

Primary persona · the security lead

“Tell me what’s being hit and how bad it is. I’ll decide what to do — I just can’t read logs all morning.”

AppSec teamPortfolio ownerMid-triage
What earns their trust
  • The important thing is the visible thing.
  • One consistent visual language — no hunting.
  • Every screen has an obvious “so what.”

Goals

Situation in seconds · triage by severity · act without leaving the view.

Frustrations

The log wall · alert noise · context switching across a dozen tabs.

Grounded in the personas artifact from the project record.

04Competitive landscape

Everyone showed a piece. No one showed the shape.

Three benchmarks — each useful, each partial. The opening was a view that reads the whole landscape at a glance.

A feed of attacks

Useful OWASP-type breakdowns — strong on events, weak on shape.

Organized by attacker

Most-attempted endpoints and types — a different lens, not the first question.

A blocked-request log

Precise, but a wall of rows to read line by line — precision without the vantage point.

05Directions considered

Three forks that shaped the frame.

Each was a live option, not a strawman. The design is the sum of choosing the right side of all three.

Considered

A live feed

Individual attacks — the market’s default.

Chose

Aggregate by type & origin

The shape reads in seconds.

Considered

Everything on the front page

Every stakeholder’s signal.

Chose

Only the five questions

Earn the glanceable layer.

Considered

A static overview

A poster to look at.

Chose

A working surface

Scan, filter, drill in, act.

06The design

One visual grammar. Five views.

Lead with type & origin. Rank by volume. Encode severity by color. Learn the grammar once on the ecosystem view, and every other screen — endpoints, trends, a single attack, an anomaly — reads the same way, with nothing new to learn.

ecosystem — attacks by type (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
Ecosystem — attacks by type
last 24h · all surfaces · sorted by volume
APIsMobileCloud
Attack typeVolumeRequestsSeverity
SQL Injection11,420Critical
BOLA9,970Critical
XSS6,880High
SSRF5,410High
Path traversal3,020Medium
Exposed credentials1,780Medium

Ecosystem dashboard

Lead with type & origin, ranked by volume — the shape of what’s hitting the whole stack, readable in seconds.

APIs by attack volume (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
APIs by attack volume
212 monitored · sorted by most attacked
Filter Search endpoints… Go
EndpointAttack volumeRequestsSeverity
/v2/payments9,340Critical
/v2/auth7,280Critical
/v2/orders4,860High
/v1/users3,180High
/v2/search1,760Medium
/v1/catalog820Medium

Attack surface

The same grammar turned on endpoints: which of my APIs is taking the most heat, ranked and severity-encoded.

attack volume over time (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
Attack volume over time
all attack types · daily total
7d14d30d
Sep 1▲ Sep 11 — spikeSep 14
In the spike window
POST /v2/loginSQL Injectionspike windowCritical
GET /users/{id}BOLAspike windowCritical
/search?q=…XSSspike windowHigh

Historical view

Spot the spike, jump to the window. Volume as a trend answers the fifth question — what are the trends?

attack history → detail drawer (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
SQL Injection — attack history
Sorted by date, descending
Critical
IDEndpointDateLocation
d4efa123POST /loginSep 4Brazil
a91c07f2POST /loginSep 4Netherlands
7b2e5d90GET /orders/{id}Sep 3Singapore
e0f4a6b1POST /checkoutSep 3United States
SQL Injection (Attack)
Attack detail
Critical
Affected assetPOST /login
Location in requestBody · Query
DescriptionSQL query inserted via input, letting an attacker read or alter data.
View remediationAssign

From seeing to acting

A working surface, not a poster. A selected attack opens a detail drawer — reusing the platform’s policy-violation pattern — carrying the payload, the path, and the one clear next action.

anomaly → same drawer (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
Anomalies — last 24h
threshold breaches · not attacks
Rate spikePOST /checkoutMedium
Schema mismatchGET /ordersMedium
Low-entropy tokenPOST /loginMedium
Bot pattern/searchMedium
Rate spike (Anomaly)
Anomaly detail
Medium
Affected assetPOST /checkout
What trippedRequests/min over threshold
Rate vs threshold239/min · limit 120/min
Window1m rolling
Review policyDismiss

Anomaly detail

Not every signal is an attack. Anomalies reuse the same drawer — what tripped, the rate against the threshold, the facts — so there’s nothing new to learn.

Restraint is the design

A chart that’s interesting but ambiguous is worse than none. A critical attack can never read as safe.

07The real work was editorial

Decide what earns the glanceable layer — and what gets demoted.

the taxonomy underneath — attacks up front, anomalies on demand (recreation, sample data)
APAPI ProtectionDashboardAttacksAPIsAnomaliesHistoryCatalog
Attack types
9
SQL Injectionpayload · location · path
BOLApayload · location · path
XSSpayload · location · path
SSRFpayload · location · path
Path traversalpayload · location · path
Command executionpayload · location · path
Function injectionpayload · location · path
Code injectionpayload · location · path
Exposed credentialspayload · location · path
Anomaly types
4
Schema conflict
Rate limiting
Bot detection
Low-entropy tokens

Promote

Volume, severity, attack surface — the glanceable layer.

Demote

Payloads, request internals — on-demand, in the drawer.

Encode

Severity by color; a critical attack can’t read as safe.

Restrain

A few chart types, used consistently — no novelty for its own sake.

Promoted ↑

Attacks up front — the glanceable layer.

SQL InjectionBOLAXSSSSRFPath traversalExposed credentials
Demoted ↓

Anomalies folded in on demand — same drawer, nothing new to learn.

Schema conflictsRate limitingBot detectionLow-entropy tokens
08Validation, as planned

The plan — and an honest line about the record.

Step 1

Test with real users — is it legible, is the remediation flow usable?

Step 2

Refine the encoding and the drawer before build.

Step 3

Partner with engineering on integration and rollout.

The surviving record documents the plan, not a committed KPI or measured outcome. Every figure shown is placeholder sample data — this case study makes no claim it can’t stand behind.

The learning

In a data-dense, high-stakes domain, editing is the design.

The hard part isn’t drawing the charts — it’s deciding what earns a place in the glanceable layer, how to encode severity so attention lands correctly, and how to keep the path from “I see a problem” to “I’m doing something about it” short and unbroken. Anyone can add another widget; the value is in what you leave off, and why.

The takeaway

The visualization is the front door. The value is the handoff.

Lead with type and origin. Encode severity so the important thing is the visible thing. Then get out of the way — scan, drill in, act, without ever leaving the view.