Back to Work
Principal Product Designer·2024–2026

Andesite.ai

Sole designer building a design system that enabled a 20+ person engineering team to ship consistent, accessible UI without dedicated frontend resources.

Context

Andesite builds AI-powered tools for cybersecurity analysts—helping them investigate threats, triage alerts, and share knowledge across their organizations. I joined as the only designer on a team with limited frontend experience and no dedicated frontend developers until my last two months.

The challenge: build a design system from scratch that could scale with a fast-moving product while enabling engineers to ship polished UI quickly.

The Problem

The team had started with MUI defaults, leading to inconsistent UI, slow iteration cycles, and components that didn't fit the complex workflows cybersecurity analysts needed.

Analysts need to move fast while maintaining high confidence in their decisions. The UI needed to surface complex information clearly, support rapid triage, and build trust in AI-generated insights—all while being accessible to analysts with varying levels of experience.

Tokens-First Architecture

I started with semantic and system tokens—color, typography, spacing, radii, elevation—creating a shared vocabulary between design and engineering. This token-first approach meant global changes could cascade through the entire system safely.

Andesite design system token architecture
Semantic tokens mapped to primitives. This structure let us change the entire color palette in under an hour when we pivoted to a darker theme for analyst workflows.

Storybook as Source of Truth

I moved from MUI to a Radix-based component library and made Storybook the interactive source of truth. Every component had documented props, usage guidelines, variant matrices, and live examples.

Andesite Storybook welcome page
Storybook became the single source of truth—engineers could find any component, see all its variants, and copy working code without context-switching to Figma.
Working in Storybook was faster than local development environments, which weren't always reliable. Engineers could iterate on components in isolation before integrating them.
Button component variants
Button variant matrix showing all permutations—fill, gradient, icon, disabled states across primary and secondary colors.
Chip component variants
Chip variants across semantic colors and sizes. Variant matrices made coverage clear and prevented UI drift.

AI-Powered Analyst Workflows

In parallel with the design system, I designed AI workflows for cyber analysts—prioritizing clarity, trust, and speed. The key insight: AI should level up Tier 1 analysts by giving them access to the tradecraft of experienced threat hunters.

Investigation workspace with AI chat
The investigation workspace brought together AI summarization, next-best actions, structured sources, and inline Q&A. Analysts could capture related alerts and add documents to aid their analysis.

Integration Management

Analysts work with dozens of security tools—XDR/EDR, IAM, ITSM, cloud telemetry. I designed connectors that organized integrations by category and made it easy to assess coverage across the environment.

Connectors grid
Connectors organized by category (XDR/EDR, IAM, Ticketing, Cloud, etc.) let analysts quickly assess integration coverage and manage their environment without manual overhead.

Pattern-of-Life Visualization

Network pattern of life visualization
Pattern-of-life visualizations made complex network activity legible at a glance. Heatmap-style rows helped analysts spot anomalies and focus their attention on what mattered.

Code Contributions

I contributed directly to the frontend codebase—shipping Storybook components and production code. The system wasn't just designed; it was proven in product.

GitHub contribution graph
Direct code contributions to the frontend. Being able to run the codebase locally and iterate quickly was essential to ensuring the design system worked as expected.

Outcomes

System adoption: The design system became the default for all new UI work. Engineers could ship consistent, accessible components without design review for standard patterns.

Velocity: Component-based development in Storybook accelerated iteration. Engineers spent less time on UI decisions and more time on product logic.

Quality: Consistent tokens and documented components reduced visual drift and accessibility issues across the product.

Reflection

Being the sole designer with direct code contribution access gave me the freedom to move fast, but it also meant making tradeoffs constantly. I learned to prioritize ruthlessly—building the components that would have the highest leverage first, and documenting decisions so the system could evolve without me.

← No previousRebellion Defense →