Role
Company
Developed a unified design system with reusable components, streamlining design & development while ensuring consistency & quality across all products.
Role
Stepping in as a design team of one
Discovery
A culture of Ad-hoc design
I quickly realized that at ClearOps, designing was a free-for-all. Product Managers were pulling double duty as designers, creating mockups with disconnected or ad-hoc components that didn't exist in the codebase.
To see how deep the rabbit hole went, I conducted a comprehensive site audit.
The result? A graveyard of variants - dozens of different shadows, font weights, & button states for the exact same actions.
Beyond the technical debt, I faced the cultural debt of established norms - I had to convince the team that slowing down to build a system would eventually allow us to move twice as fast.
We weren't just missing a design system; we were losing immense person-hours trying to reinvent the wheel with every new feature.
Problem at hand
How can I create a design system that is simple, scalable, & understandable by designers & developers?
Solution
Building on a proven foundation
Rather than reinventing the wheel, I researched industry-standard frameworks & decided to leverage Material Design as our foundation. By building the ClearOps system on top of this established logic, I was able to fast-track our transition to a professional, scalable UI.
To bridge the gap between design & development, I focused on:
Material adaptation: I customized Material’s flexible components to fit ClearOps’ specific needs, ensuring we had battle-tested logic for spacing, elevation, & interaction.
Empowering devs via Figma dev mode: I structured the library specifically to support a technical handoff. By using clean component sets, developers could finally use Figma’s dev mode to pull exact CSS details & spacing, eliminating the guesswork that plagued previous builds.
Results
Efficiency by design
The impact of moving to a centralized, component-based workflow was felt immediately across the entire organization:
Zero-to-high-fidelity in minutes: What used to take earlier hours of Frankensteining layouts now takes minutes using pre-validated Material-based components & the “drag-&-drop environment.
Engineering velocity: By aligning Figma sets with the developers' reality, we significantly reduced front-end revision cycles. Developers now achieve 1:1 visual parity on the first deploy by pulling specs directly from Dev Mode.
Cultural buy-in: The initial resistance to new rules vanished once the team saw the speed of delivery. The design system is now the primary source of truth, allowing us to scale our app suite without scaling our stress.
Unified brand identity: For the first time, ClearOps product looks & feels like a single, cohesive ecosystem rather than a collection of separate products.
Lessons learned
The project proved that a design system is 20% UI kits & 80% communication. Starting with Material Design allowed me to focus on solving ClearOps-specific problems rather than debating the correct border-radius for a button.
Ultimately, I learned that the best way to overcome resistance to change is to provide tools that make everyone’s job - from designers to devs - undeniably easier.
Impacts at a glance
Designing & prototyping speed
Before: Hours of ad-hoc frankensteining
After: Minutes via drag-drop components
Handoff accuracy
Before: High friction; eyeballing CSS
After: 1:1 parity using Figma Dev mode
Component library
Before: Endless unique variants
After: 1 unified system built on Material
Revision cycles
Before: Multiple back & forth loops
After: First-deploy success
Key wins
Speed to market: Reduced the time from initial mockup to developer handoff by over 50%.
Technical precision: Successfully eliminated manual spec writing & CSS guesswork.
Team alignment: Shifted the company culture from freehand design to a system-first mindset, securing full buy-in from engineering.
Future-proofing: Established a scalable foundation using Material Design, ensuring any new apps in the ClearOps suite inherit a cohesive look & feel.
DISCOVER MORE
