Building a unified design language that scales. A comprehensive design system that brought consistency, efficiency, and delight to G2's product ecosystem.
Creating a foundation for consistent, scalable design across G2's product suite
G2's products had evolved independently, resulting in inconsistent UI patterns, duplicate components, and a fragmented user experience that confused customers and slowed development.
Build a comprehensive design system that unifies G2's visual identity, accelerates product development, and delivers a consistent experience across all touchpoints.
A modular, token-based design system with 120+ components, comprehensive documentation, and seamless Figma-to-code integration that empowers teams to build faster.
I led the design system initiative from conception to adoption. This included auditing existing patterns, defining the token architecture, designing core components, creating documentation, building the Figma library, and driving adoption across 8 product teams. I collaborated closely with engineering to ensure design-to-code parity and established governance processes for system evolution.
Identifying the pain points holding teams back
The core values that guide every decision
Every component should be immediately understandable. We reduce cognitive load through clear visual hierarchy and predictable interactions.
Consistent patterns build user confidence. We maintain uniformity while allowing flexibility for context-specific needs.
Accessibility isn't an afterthought. Every component meets WCAG 2.1 AA standards and works for users of all abilities.
Components are designed with growth in mind. Token-based architecture enables easy theming and adaptation across products.
A systematic approach to building the system
Conducted a comprehensive audit of all existing components across 5 products. Documented 200+ unique patterns and identified opportunities for consolidation.
Defined a three-tier token system: primitive tokens for raw values, semantic tokens for meaning, and component tokens for specific use cases.
Designed 120+ components with variants, states, and responsive behavior. Each component includes accessibility specifications and usage guidelines.
Created comprehensive documentation with live examples, do's and don'ts, and code snippets. Ran workshops to drive adoption across all product teams.
A comprehensive set of building blocks
12 variants, 4 sizes
8 types, validation states
6 types, responsive
Sortable, filterable, paginated
Toast, banner, inline
Sidebar, tabs, breadcrumbs
Refining the system through feedback
Started with a flat token structure but quickly realized it didn't scale. Restructured to a three-tier system for better organization and theming support.
Initial components were too rigid. Added variant props and composition patterns to give teams flexibility while maintaining consistency.
Text-heavy documentation wasn't working. Redesigned with interactive examples, visual guidelines, and searchable patterns library.
Established clear processes for proposing new components, reviewing changes, and versioning. The system now evolves with input from all teams.
Quantifiable impact on teams and products
Reduced time to build new features significantly
Consolidated duplicate patterns across products
All 8 product teams using the system
WCAG 2.1 AA compliance across components
What I learned from this project
A good system that teams actually use beats a perfect system that sits unused. We focused on solving immediate pain points first to build trust and momentum.
Comprehensive, searchable documentation is just as important as the components themselves. We treated our docs site as a product with its own UX considerations.
Clear contribution guidelines and review processes don't slow things down—they give teams confidence to propose changes knowing there's a path forward.