ThirdWatch
One company, every file, IP and URL tied to it, live. Move through the graph.
Blackwired tracks state-sponsored attackers and advanced cybercriminals around the clock. ThirdWatch is the platform that turns that intelligence into something a security team, or a board, can act on. At TechGrayscale, I led design on the product: a design system built for dense, high-stakes data, the interface and its data visualization, and a family of intelligence reports.
- Client
- Blackwired
- Agency
- TechGrayscale
- Product
- ThirdWatch
- Role
- Creative Lead
- Scope
- Design system, product design, data visualization, product onboarding, report design
Too much intelligence, not enough clarity.
Thousands of threat events, hundreds of connected companies and dozens of live campaigns, all needing to make sense in seconds to an analyst and an executive alike. Before any screen, we set three rules: answer first, color means risk and nothing else, and one system for every surface.
Ninety tokens, one rule.
Every color in ThirdWatch is a token: nine ramps from 50 to 900. Navy surfaces and one electric blue carry the interface. The five threat ramps are reserved for risk, so when red appears it always means the same thing. The charts below put that rule to work.
Fig. 01All nine ramps from the ThirdWatch design library. Hover any swatch for its token.
Every chart has one job.
A gauge carries the headline number. A score distribution shows where a company sits among fifty others. A risk triangle explains why its score is high. A beeswarm puts it in the context of the whole portfolio. All four are colored only by the threat scale.
NET RISK
SCORE DISTRIBUTION
ShowKMR GROUP
01 / 04PORTFOLIO BY NET RISK
Fig. 02The four core charts drop into place as you scroll, then come alive. Drag, hover and click to explore.
DATA VIZ. A + B is the hybrid: the live chart cards begin pulled apart in 3D like the exploded dashboard, then fall flat into the grid as you scroll and play their intro once they land. Locked as the only version.
Three voices, each with one job.
Gemsbuck 01 is the mission-control voice for titles and labels. Bebas Neue carries the scores. Inter does the reading. In the library's ladder, Gemsbuck and Inter take turns, so every heading level is either a signal or a sentence, never both.
Module titles, labels, levels. Wide, caps only, Thin to Black.
Every headline score. Tall and narrow, so a big number fits inside a gauge.
Names, tables, tooltips and sentences. Readable at 11px.
A vocabulary for threats.
119 icons in four sets. The specialized set is the deepest: 74 icons that give names like ransomware, IOCs, MITM and persistence a shape an analyst learns once. Every icon is drawn on a 48 px grid and ships at 48, 24 and 16, in default, hover and active.
Ransomware
Specialized setFig. 03All 119 icons on a true pixel grid, one square per icon pixel. Click any icon to see its sizes and states.
Fig. 01Delta analysis
Fig. 02Attack flow
Fig. 03Leverage points
Fig. 04Unified campaign
Fig. 05Action framework
Fig. 06Analytical notes
Intelligence, ready for the boardroom.
Every ThirdWatch report is assembled from one set of modules, and the same icon library runs through every one. The SITREP, ThirdWatch’s situation report, is the flagship, from the delta since the last hunt to the full attack flow and a five-step action plan.
Fig. 01
REPORTS v101. One report per screen on the KLH-style outlined laptop. Reports bleed out to the right edge of the window and are clipped by the screen on the way out to the left. Order: Delta, Attack flow, Leverage, Unified campaign, Action framework, Analytical notes. Delta still shows a swapped domain in this preview only.
Six ways in.
Each module looks at the same risk from a different distance, from a whole portfolio down to a single malicious file.
Fig. 01
Fast Hunt
The investigation. Every file, IP and URL tied to the company sits in one graph. Pick a campaign to see what it touched and how bad it is.
HUD
Three gauges score one company out of ten, each colored by its threat level. Underneath, the signals that move them.
Dashboard
Every subject company in one ranked list. A score distribution shows where each one sits among the rest, and a risk triangle explains why a score is high.
3D Visual
The same evidence in space. Indicators orbit the company they touch, grouped by how they connect, so clusters read before details do.
Ecosystem
Vendors, partners and suppliers in rings around the company, each dot colored by its threat level. Pick one to see its links and profile.
Reports
The findings, written up. A sitrep turns a hunt into a brief the board can read: summary, scope, evidence and key findings.
1,174
Every milestone, in order.
A design partnership with Blackwired, from March 2025 on. Almost everything here has shipped.
- Mar ’25First call with Blackwired.
Work starts with a QA pass on the HUD and the Ecosystem, and a first call with Jeremy.
- May ’25Ecosystem v2 and Reports on staging.
The redesigned Ecosystem and the first report templates reach the staging build.
- Aug ’25API and pre-dashboard.
Designs for the API page and the view before a dashboard is set up.
- Sep ’25Light reports, first Fast Hunt report.
Reports get a light, print-ready mode, and Fast Hunt gets its own report.
- Nov ’25eASM report.
The external attack surface report, on screen and as a PDF.
- Dec ’25Fast Hunt highlights.
New campaigns and sequences are flagged the moment they appear in the graph.
- Jan ’26Ecosystem redesign.
The ring view of vendors and partners, approved by Blackwired.
- Mar ’26Utility nav, single sign-on, CTI report.
Shared navigation, SSO sign-in, a threat intel report and empty states throughout.
- Jun ’26Report Builder and the new library.
Reports assembled from modules, and the Dashboard and HUD restyled on the new design library.
- Aug ’26SITREP and the guided tour.
The flagship SITREP report ships as a PDF, and the interactive tutorial, from concept and copy to plan, goes to development.
- Sep ’26Notifications and tutorial build.In progress
Notification designs, and the tutorial animation in build.
TIMELINE. Dates come from the project messages. Per-row status tags were dropped (Nick: almost everything shipped); only work still in progress is tagged.