ThreatConnect
Threat Intelligence Platform Design System
Role
Lead Designer on Project
Cross-Functional Partners
UI/UX Director, UX Team, Frontend Engineers, & Product Management
Core Focus
Components, Multi-Theme Mapping, Interaction Specifications, & WCAG Accessibility
Design Ecosystem
Figma, Storybook, Angular, & JIRA
Project Summary
The ThreatConnect Threat Intelligence Platform (TIP) Design System was architected to provide comprehensive visual, behavioral, and technical guidelines. Prior to its inception, siloed product lines and a fragmented interface footprint created high frontend technical debt, driving inconsistent user experiences and highly redundant design-to-development cycles.
To establish absolute product cohesion and unlock organizational velocity, I led the end-to-end architecture, documentation, and governance of a centralized design system. Frontend developers directly referenced these extensive, multi-state specifications to construct an identical, reusable component library in Angular in Storybook. This foundational infrastructure dramatically accelerated the platform's evolution toward a modern tech stack and unified aesthetic, optimizing delivery pipelines across the entire product ecosystem.
Contextualizing The Complexity
Contextualizing The Complexity
The Core Challenge
Scaling an enterprise-grade design system is fundamentally an operational and cultural challenge, not just a visual one. The ThreatConnect platform needed to mature its technology stack, but shipping continuous features while relying on legacy UI structures resulted in systemic interaction disparities and bloated frontend codebases.
To build a sustainable system, the framework had to conquer severe enterprise constraints:
Symmetrical Multi-Theme Mandate
I needed to create an infrastructure where colors & typography map perfectly between Light and Dark themes with zero theme-specific code overrides.
Deep Functional Complexity
Highly intricate enterprise patterns had to be set and standardized. These patterns included permissions-based element states, interactive multi-variant data tables, & advanced filtering controls.
System Synchronization
A continuous governance loop was required to ensure Figma assets and live Storybook code remained perfectly synchronized over time as product requirements evolved.
Deep-Dive Product Pillars
Deep-Dive Product Pillars
Multi-Theme Token Architecture
The design system was built to be fully WCAG AA contrast compliant & colorblind accessible from day one. To eliminate maintenance overhead & scale styles effortlessly, I created a highly structured color token system. Variables were meticulously chosen & cross-mapped so that there was a 1-to-1 relationship between the dark & light themes. This approach prevented the need for complex, theme-specific style overrides & achieved massive business flexibility: when corporate leadership requested product variations later on, the architecture allowed additional color themes to be rapidly researched and deployed.
Standardizing Enterprise Interactions & Micro-interactions
A design system fails if it only dictates static visual artifacts. To drive true product consistency, I focused heavily on documenting behavioral standards for high-density UI elements. Every reusable element had its interactive lifecycle documented, explicitly detailing neutral, hover, active, selected, focus, disabled, & error states. Moving beyond basic components, I authored end-to-end interaction specifications for highly complex enterprise operations. This included designing scalable data table frameworks, drag-and-drop movable cards, intricate filtering components, and systemic error/alert distribution guidelines to ensure that regardless of the feature tier, user interaction mechanics remained consistent.
Cross-Functional Handoff & Governance
To ensure the system operated as a functional software bridge rather than a static UI kit, I established an as-needed governance cadence with the frontend development team. When new product features revealed the need for a new design pattern, we collaboratively mapped out the component requirements in Figma.
I delivered exhaustive code blueprints detailing exact spacing standards, typographical hierarchies, and accessibility parameters to streamline the implementation phase. Once engineering built the component into their Angular Storybook ecosystems, we executed a rigorous UX review phase. This bi-directional feedback loop ensured that Figma components and live Storybook code remained perfectly in sync, blocking visual regression and code divergence before it could reach production.
Operational Impact & Retrospective
The Outcome & Proxy Metrics
The ThreatConnect Design System completely transformed the organization's cross-functional product development workflow, yielding massive operational benefits:
Drastic Reduction in Engineering Effort
Shifting to a reusable component architecture dramatically decreased engineering effort, & QA teams could focus their testing resources on core functional stability rather than auditing visual styling disparities.
Maximizing Design Strategy
The system enabled the UX team to rapidly assemble high-fidelity mockups using standardized component assets. We reclaimed premium cognitive real estate, and were able to focus entirely on solving complex user flows and system-level product logic.
Senior Retrospective
An enterprise design system is never complete; it is a living software utility that must adapt as a product matures. Its success does not depend on how beautiful the UI library looks, but on how seamlessly it minimizes friction between design intent and engineering execution. By treating accessibility, multi-theme tokenization, and strict governance as core architectural constraints, we created an enduring infrastructure that allowed the entire organization to ship high-fidelity software significantly faster.
Back to Work List