Visualizing cyber threats framework
We aimed to enhance the usability and effectiveness of the MITRE ATT&CK heat map visualisation in ServiceNow security incident response application, helping security analysts, threat intelligence professionals, and leaders gain better insights and make data-driven decisions.
Think of MITRE ATT&CK as a periodic table of cyber threats. It categorizes known attack behaviors (like credential dumping, lateral movement, data exfiltration) across different threat stages. Security teams use this as it categorizes threats into Tactics (what the attacker is trying to achieve), Techniques (how they achieve it), and Sub-techniques (specific implementations).
Team: Worked with 1 product manger, 1 tech lead, and 4 engineers.
Skills: Visual Design, Interaction design, usability & accessibility.
Users: Security analysts, threat intelligence teams.
Post-release, we saw a 60% reduction in manual effort for threat classification and mapping, making workflows more efficient.
The accuracy of attack technique identification improved by 23%, enhancing proactive defense.
With these improvements, analysts increasingly relied on in-platform MITRE ATT&CK insights, leading to higher adoption and reducing the need for external references.
The current MITRE ATT&CK framework visualization while comprehensive, presents challenges in usability, navigation, cognitive load, and not ServiceNow complaint. As cybersecurity threats evolve, security professionals require an intuitive, efficient, and accessible tool to analyze and apply threat intelligence effectively.
The initial requirement is to migrate the existing framework to ServiceNow without altering core functionality. However, rather than just a direct transition, we see this as an opportunity to enhance-
1) visual consistency 2) Improve usability 3) Future-proof the experience.
By redesigning MITRE ATT&CK with the ServiceNow Design System, we aim to:
• Standardize UI components for consistency and maintainability.
• Improve navigation and readability by leveraging ServiceNow’s structured layouts and typography.
• Enhance accessibility and responsiveness to support diverse user need.
"This redesign will transform MITRE ATT&CK from a static reference tool into a dynamic, adaptable experience that will help security professionals to act with speed and clarity"
We reached out to the internal security team within ServiceNow to understand key issues. Through these discussions, we discovered that navigating and interpreting attack techniques and coverage is a major pain point, often leading to inefficiencies in threat analysis and decision-making.
Looking Inward
We ran a comprehensive experience review of the standard experience across the triad.
Not aligned with ServiceNow design system
The UI doesn’t follow ServiceNow’s design system, making it hard to update, scale, and integrate with the existing security products.High cognitive load
Dense, text-heavy layout makes scanning difficult, with too much scrolling and inconsistent formatting.Unstructured information
Techniques and sub-techniques lack clear grouping, forcing users to manually search for relevant details.Slow & inefficient workflows
Too many clicks to access key details. No quick filters, overlays, or structured navigation, leading to frustration.
1) Exploring attack techniques
Security analysts research tactics, techniques, and sub-techniques, often cross-referencing multiple categories to assess threats.
Iteration 1 of the table cell:
Iteration 2:
2)Evaluating and visualising security Coverage
Coverage refers to the degree to which an organisation has visibility or defense mechanisms in place against specific adversarial behaviour's, outlined as techniques under ATT&CK's structured matrix of tactics and techniques.
The original navigator itself does not prescribe fixed values for coverage. Instead, it allows organisation's to input their own data, color-code them within the matrix. The most common convention we observed across teams was the use of a Red → Yellow → Green gradient to signify levels of detection or prevention:
While effective at a glance, this basic gradient fell short in granularity and scalability, especially for organizations managing complex infrastructures or working with multiple detection sources.
To improve clarity and accommodate diverse organizational needs, I explored multiple visual variations of the coverage model within the Navigator:
Heatmap-Based Coverage Visualization
“Security isn’t binary, it’s incremental. The heat-map helped us show progress, not just a pass/fail.” , Security Analyst, Internal team member at ServiceNow
We introduced a 0–100% heatmap scale, allowing teams to express prevention or detection frequency numerically.
Iteration 1:
👍🏾 Things Working Well
Logical color gradient from excellent (green) to none (red).
Minimal, clean UI as it is not overwhelming despite multiple data points.
👎🏾 Things that need work
The use of dots meters makes it look like a linear progress indicator, which it is not.
Some colors (blue, purple, teal) are visually too similar.
Detection and Prevention dots can feel too small or hard to distinguish quickly.
Color-only encoding still limits interpretability for colorblind users(Not accessible).
Lacks fast scanning for outliers (what’s missing coverage?
Iteration 2:
Impact:
1) 60% less manual effort in threat mapping.
2) 23% better technique identification
3) Higher adoption, fewer external references used
Thanks for stopping by! I'd ♡ to chat with you :)