Enterprise data visualization design

Interactive data visualization enabled intelligent tracing of suspicious transactions.

Interactive prototype of the Binance fraud detection diagram
Background
Crypto fraud was rising. Binance’s risk analysts traced stolen money through a dense table, one account ID at a time, and could close about 10 cases a day while 20 or more came in. Every case left open cost a customer’s trust and let fraud losses grow. I replaced the table with an interactive money-flow diagram, and ==daily case reviews doubled==.
Role
Product designer
Timeline
3 months
Team
1 PM, 4 engineers
Research

Every case starts with a customer who lost money.

To understand how an analyst finishes a case, I interviewed 25 internal analysts. A case starts as a ticket: a customer reports that 1,000 USDT left their account and asks Binance to get it back. The analyst’s job: ==find the final account that received the money, and every user in the chain.==

A Binance Support chat: the customer, UID 45530950, writes that 1,000 USDT just left their account, it wasn’t them, can Binance get it back; support replies that a case is open and a risk analyst is tracing the funds
The customer’s report becomes a case for a risk analyst.
The old workflow

Analysts traced the money by hand.

Step one: the analyst types the reported user’s UID, 45530950, into the old dashboard. From there they had to manually search, compare and connect data across modules, writing down each counterparty and searching again, one UID at a time.

Insight. Risk analysts spend significant time ==manually looking up UIDs and piecing together transaction relationships across multiple accounts==.

The goal

Transform a fragmented, manual investigation process into ==a visual, intuitive workflow== that helps analysts trace suspicious fund flows faster and make informed decisions.

Brainstorm

Interactive data visualization was the big bet.

With the PM and developers, I placed every idea on an impact-effort matrix. Filtering and sorting were easy wins, but they only make the same table faster. ==An interactive visualization changes how analysts work==: it shows how money moves between accounts, which is exactly what they were piecing together by hand.

Impact-effort matrix made with the PM and developers. High impact, low effort, easy wins: filtering and sorting, faster but still the same table. High impact, high effort, the big bet: interactive data visualization, the one that changes how Lin works. Low impact, low effort, fill-ins: color coding and grouping, tooltips and hover insights. Low impact, high effort, money pit: dashboard summaries
Every idea placed by impact and effort. Interactive visualization was the high-impact bet.
Exploration

A correlation diagram was best suited for the task.

I researched different diagram types and compared what each could show. ==Only the correlation diagram simplifies complex relationships and expands as the case grows.==

Four diagram types compared: network diagram shows every connection but overloads as data grows; chord diagram compares relationships but clutters with large datasets; correlation diagram simplifies complex relationships and expands as the case grows, chosen; tree diagram shows clear hierarchy but only fits hierarchies
Four diagram types compared. Only the correlation diagram stays readable as the case grows.
Iteration 1

Link everything.

User need

An easy way to explore the transaction relationships between counterparties.

Design decision

Put all the data on one graph, so every relationship is visible at once.

First iteration in the CSI Center: a relation graph where every account, action, IP address and device is linked to everything related, with no direction on the lines
Iteration 1: every account, action, IP and device linked at once, with no direction on the lines.
User feedback

==Only 4 of 25 analysts found it clear.== They could not see where the money went, and got lost in the lines.

Iteration 2

Group by type.

User need

See where the money goes, and what each transaction means.

Design decision

Group transactions by type and add arrows to show how the money flows.

Second iteration in the CSI Center: the flagged user James in the center, counterparties grouped by transaction type: Deposit on the left, Withdraw on the right, C2C below
Iteration 2: counterparties grouped into Deposit, Withdraw and C2C, with arrows for direction.
User feedback

==12 of 25 analysts found it clear.== The money flow was clearer, but the groups hid the next layer of counterparties.

Final iteration

Reveal layer by layer.

I went back to the analysts and rebuilt the diagram around three principles: anchor on the case, show depth only when asked, and make status and direction instant.

User need

Discover the next layer of counterparties without a new search.

Design decision

Click a counterparty to open its own transactions, one layer at a time, on a circular layout colored by status.

User feedback

==24 of 25 analysts found it clear.== They could see the whole picture and trace the money to the final counterparty.

Visual design

Color follows what analysts check first.

Color versions of the diagram, from the first to the final version
Color versions of the diagram, from the first (left) to the final (right).

From the first version to the final one (left to right), color follows the data hierarchy I learned from the PM: ==transaction status, then direction, then counterparty==. Users responded well to the final version.

Challenge with engineering

The first build was a hairball.

The design worked in Figma. With a real case loaded, the engineering build drew every link at once: ==all the lines cluttered together==, and analysts could not see the data clearly.

The first engineering build, redrawn: dozens of log-in nodes, red and white, with pink and grey lines all cluttered together as they converge on one masked account, its IP, email, devices and phone
The challenge from engineering: every link drawn at once, so the lines clutter together and the data is hard to read.
The challenge

Draw any number of counterparties around one account, so that no two ever overlap, with a rule the engineers could build.

Working it out

I sat down with the developers and we worked the geometry out on paper: one central node, lines at equal angles, a circle of room around every counterparty.

The rule

Every counterparty sits on one ring around the flagged account, 360° / n apart, with a circle of room of radius x for its label.

The formula

Neighbors just touch when sin(180° / n) = x / (x + r). Solved for the ring radius r, the ring is exactly as big as n counterparties need.

Why it spreads evenly

==Equal angles keep the lines evenly spaced, and a ring that grows with n keeps labels from ever overlapping.== More counterparties make a bigger ring, not a hairball.

The shipped diagram: a central account with evenly distributed counterparties and labelled links on both sides
Shipped: nodes spread evenly, labels that never collide.
Edge cases

Real cases are messier than the happy path.

==I designed for the extremes, not the average.==

The trace toolbar for James Page, UID 45530950, with Period: Last 3 months ringed in yellow
Edge case 1
Too much history

A 3-month window by default, chosen by testing windows with analysts.

On the diagram, a crypto address shortened to 123223…rtyuyu, ringed in yellow; the cursor hovers over it and a dark tooltip shows the full address
Edge case 2
Text too long

Long addresses and IDs are shortened with “…”. Hover to see the whole text in a tooltip.

Phase 2

From one case to the whole queue.

In phase 2, I extended the same thinking to the dashboard level. Instead of showing analysts everything at once, the dashboard surfaces the most important cases, explains why they need attention, and lets them drill into the underlying data when necessary.

CSI Center before: seven filters, seven unranked metrics, four charts and a long transaction table, marked with three problems
Before
Everything at once

1 · Seven metrics with no priority. 2 · A long table with no reason attached. 3 · Seven filters to set before any insight.

CSI Center Priority cases: the three cases that need attention, ranked by funds at risk, each with a one-line reason and a Trace funds button, beside a capital-flow preview, with all open cases below
After
What needs attention, and why

The top cases, ranked by funds at risk, each with a one-line reason, and the money flow one click away.

5 steps, repeated for every account
CSI Center before: seven filters, seven unranked metrics, four charts and a long transaction table, marked with three problems
Step 1 of 5
Find the case

Seven metrics, four charts and a long table, none of it ranked. The case that matters most sits in row 8.

Final outcome

Faster investigations, less fraud, happier customers.

An efficient workflow let analysts ==close twice as many cases a day==. Fewer open cases meant less fraud got through, and the customers who reported it got answers sooner.

Smiling face
90
Customer NPS

Satisfaction of users reporting to the risk team rose from 50 to 90.

A fraud analyst
2×
10 → 20 cases a day
Daily case reviews per analyst

Doubled for all 25 risk analysts, beating the 1.5× goal.

Money with wings
−20%
Fraud losses

Fewer fraudulent transfers got through once analysts could keep up with the queue.

Concept · not shipped

If I designed it today, an AI agent would trace the chain and act on my approval.

Shipped in early 2024. Analysts still followed the money one hop at a time. Today an AI agent would ==follow it layer by layer to the final receiver==, explain each hop, and act only after the analyst approves.

Why AI: one case can reach thousands of transfers and devices. ==AI searches and analyzes that much data in seconds.==

Find the chain

Follows the money hop by hop until it stops moving: the final receiver.

Explain

Says why it took each hop: the same amount, the same device, a brand-new account.

Freeze

One approval freezes every account on the chain, and it drafts the case report.

How it learns: each case is matched to similar confirmed ones, and every approve or edit trains it. ==Nothing is frozen until a person approves.==

Reflection

Challenge & reflection

Design for scale early

The canvas could not render unlimited history. Testing time windows with analysts gave us the 3-month filter; ==next time I would set that constraint in the first sketch==, not the third.

Simplify data presentation

I learned to present complex data in a format that’s ==easy to understand and act on==, so analysts can decide quickly.

Small flow, big impact

It was a small flow redesign, but it made a ==big impact on the company’s business growth==.