B2B • SaaS • Design Systems
ObserveIT
SaaS Design System & Acquisition Readiness
I designed and built a comprehensive design system for a customer-facing cybersecurity SaaS platform. Three of six applications adopted the system, with the flagship cloud product reaching 100% adoption, directly contributing to ObserveIT's acquisition by Proofpoint.
Overview
As Design System Manager, I built ObserveIT's design system from scratch for their new cloud-based cybersecurity platform, hand-coding all HTML and SCSS without framework dependencies. I evangelized adoption across the organization, onboarding teams individually until 3 of 6 application teams adopted the system, with the flagship cloud product reaching 100% component coverage. The system's token-based architecture proved its ultimate value during Proofpoint's acquisition: I rebranded the entire application suite in minutes, with full verification across all products in under two hours.
Abilities Demonstrated
- Designed and built a comprehensive design system from scratch
- Custom-coded all HTML and SCSS without framework dependencies
- Created a dual-purpose system serving both designers and developers
- Implemented light and dark theme switching with CSS custom properties
- Facilitated regular check-ins with both design and development teams
Research & Audit
ObserveIT was building a completely new cloud-based digital threat analysis platform from the ground up. To properly coordinate between developers and designers, they needed a design system that could serve both teams simultaneously, acting as a code repository for developers and a style and brand guide for designers. The system needed to support light and dark themes, maintain clean and performant code, and stay synchronized with the product in real time.
Card Design Workshop
System Architecture
After carefully researching existing design systems, we decided on a completely custom build. This approach allowed us to check all of our requirements: support light and dark themes at the click of a button, have the design system look and feel like a style guide, and ensure the system could easily read from our codebase without too much additional work. I hand-coded all HTML and SCSS without bulky frameworks to ensure the cleanest product possible with the fastest load times.
Design System Components
- Comprehensive widget library with usage guidelines and code snippets
- Grid system and spacing documentation for consistent layouts
- Typography system and scale with clear hierarchy rules
- Color system with full theme support (light and dark modes)
- Interactive component library with live preview functionality
Cloud Dashboard
Explorations
Technical Implementation
- Hand-crafted HTML and SCSS without framework dependencies
- BEM naming methodology for semantic, maintainable CSS
- CSS custom properties for instant theme switching
- Real-time synchronization between design system and product
- Modular SCSS structure for maintainable styling
- Component-based architecture for maximum reusability
Results & Impact
The design system proved its ultimate value when Proofpoint acquired ObserveIT. The robust, token-driven architecture I had built made rebranding seamless; within minutes, I updated logos, colors, and copyright lines across the entire platform. What could have been a months-long effort became a near-instant transition, demonstrating the power of a well-architected design system that supported light and dark modes, white-labelling, and real-time synchronization between the system and the product.
Framework-free build
Across the platform
Light & dark support
Optimized performance
Project Outcomes
Acquisition-Ready Rebrand
When Proofpoint acquired ObserveIT, the design system enabled a complete rebrand of logos, colors, and more in minutes, not months.
White-Label Architecture
Built-in theming and token-based styling made white-labelling effortless, proving the system's value well beyond day-to-day development.
Optimized Performance
Optimized performance through shallow component structure, only pulling in information we absolutely require: a robust system with a lightweight footprint.
Contributed to Acquisition
The cloud-based insider threat platform (powered by a thoughtful design system) was a key factor in Proofpoint's decision to acquire ObserveIT.
