Graphic Design
Graph Node & Icon System
Built a scalable vector icon system of over 400 custom nodes and a layout framework for complex threat intelligence graphs. Focused on micro-scale legibility, contrast compliance, and automated developer handoff. The new system resolved years of technical debt and optimized rendering performance.
Project Duration :
2023 - 8 weeks
Client :
Maltego
Industry :
Tech, Cybersecurity
Role :
Lead UX/UI Designer
Team size :
Cross-functional (PMs, Devs, Designers)
Tools :
Figma • Adobe Illustrator • SVG Optimization Tooling
Problem :
The legacy graph visualization relied on static, fixed-color PNG assets. This setup introduced severe technical and visual debt. The assets completely blinded analysts in dark mode. They failed basic contrast compliance. They also pixelated heavily on modern high-DPI screens.
Because there was no standardized grid or naming system, adding new nodes required manual work. This friction delayed product releases. It also slowed down engineering velocity.
Solution :
Designed a clean, unified 4px vector framework on a strict grid for the entire set of 400+ icons. This ensures every icon remains crisp at micro-scales down to 16px. Implemented dynamic design tokens. This allows the icons to switch instantly between light and dark themes.
To automate developer handoff, mapped all assets using a programmatic PascalCase naming convention. Developers can now reference assets directly in code without manual exporting.
Open Figma Prototype
Challenge :
The core difficulty was visual taxonomy engineering. We had to translate highly abstract, complex cybersecurity concepts into simple visual metaphors. This included metaphors for malware strains, system vulnerabilities, and network hubs.
Every single node had to align perfectly to a pixel grid. Even a tiny deviation would cause rendering blur on dense screens. This required daily, close pairing with front-end engineers to build a reliable SVG pipeline.
Summary :
Replaced thousands of fragmented PNGs with a single, highly optimized library of 400+ SVGs. This structural update cut production file sizes by 82%. It also completely eliminated manual asset maintenance.
Analysts can now conduct high-stress investigations with flawless, contrast-compliant clarity. The design system is fully future-proofed and scales seamlessly with the core platform.
More Projects
Graphic Design
Graph Node & Icon System
Built a scalable vector icon system of over 400 custom nodes and a layout framework for complex threat intelligence graphs. Focused on micro-scale legibility, contrast compliance, and automated developer handoff. The new system resolved years of technical debt and optimized rendering performance.
Project Duration :
2023 - 8 weeks
Client :
Maltego
Industry :
Tech, Cybersecurity
Role :
Lead UX/UI Designer
Team size :
Cross-functional (PMs, Devs, Designers)
Tools :
Figma • Adobe Illustrator • SVG Optimization Tooling
Problem :
The legacy graph visualization relied on static, fixed-color PNG assets. This setup introduced severe technical and visual debt. The assets completely blinded analysts in dark mode. They failed basic contrast compliance. They also pixelated heavily on modern high-DPI screens.
Because there was no standardized grid or naming system, adding new nodes required manual work. This friction delayed product releases. It also slowed down engineering velocity.
Solution :
Designed a clean, unified 4px vector framework on a strict grid for the entire set of 400+ icons. This ensures every icon remains crisp at micro-scales down to 16px. Implemented dynamic design tokens. This allows the icons to switch instantly between light and dark themes.
To automate developer handoff, mapped all assets using a programmatic PascalCase naming convention. Developers can now reference assets directly in code without manual exporting.
Open Figma Prototype
Challenge :
The core difficulty was visual taxonomy engineering. We had to translate highly abstract, complex cybersecurity concepts into simple visual metaphors. This included metaphors for malware strains, system vulnerabilities, and network hubs.
Every single node had to align perfectly to a pixel grid. Even a tiny deviation would cause rendering blur on dense screens. This required daily, close pairing with front-end engineers to build a reliable SVG pipeline.
Summary :
Replaced thousands of fragmented PNGs with a single, highly optimized library of 400+ SVGs. This structural update cut production file sizes by 82%. It also completely eliminated manual asset maintenance.
Analysts can now conduct high-stress investigations with flawless, contrast-compliant clarity. The design system is fully future-proofed and scales seamlessly with the core platform.
More Projects
Graphic Design
Graph Node & Icon System
Built a scalable vector icon system of over 400 custom nodes and a layout framework for complex threat intelligence graphs. Focused on micro-scale legibility, contrast compliance, and automated developer handoff. The new system resolved years of technical debt and optimized rendering performance.
Project Duration :
2023 - 8 weeks
Client :
Maltego
Industry :
Tech, Cybersecurity
Role :
Lead UX/UI Designer
Team size :
Cross-functional (PMs, Devs, Designers)
Tools :
Figma • Adobe Illustrator • SVG Optimization Tooling
Problem :
The legacy graph visualization relied on static, fixed-color PNG assets. This setup introduced severe technical and visual debt. The assets completely blinded analysts in dark mode. They failed basic contrast compliance. They also pixelated heavily on modern high-DPI screens.
Because there was no standardized grid or naming system, adding new nodes required manual work. This friction delayed product releases. It also slowed down engineering velocity.
Solution :
Designed a clean, unified 4px vector framework on a strict grid for the entire set of 400+ icons. This ensures every icon remains crisp at micro-scales down to 16px. Implemented dynamic design tokens. This allows the icons to switch instantly between light and dark themes.
To automate developer handoff, mapped all assets using a programmatic PascalCase naming convention. Developers can now reference assets directly in code without manual exporting.
Open Figma Prototype
Challenge :
The core difficulty was visual taxonomy engineering. We had to translate highly abstract, complex cybersecurity concepts into simple visual metaphors. This included metaphors for malware strains, system vulnerabilities, and network hubs.
Every single node had to align perfectly to a pixel grid. Even a tiny deviation would cause rendering blur on dense screens. This required daily, close pairing with front-end engineers to build a reliable SVG pipeline.
Summary :
Replaced thousands of fragmented PNGs with a single, highly optimized library of 400+ SVGs. This structural update cut production file sizes by 82%. It also completely eliminated manual asset maintenance.
Analysts can now conduct high-stress investigations with flawless, contrast-compliant clarity. The design system is fully future-proofed and scales seamlessly with the core platform.