GDS Browser Extension | Prateek Dhaka

Overview

As part of the Design System team, I defined a comprehensive matrix framework and built a dedicated Chrome browser extension to measure design system adoption across all company websites. The extension captures page elements via browser inspect mode, evaluates them against design system and brand guidelines, and generates detailed reports, eliminating ~6,000 hours of manual tracking effort annually.

The Problem

The Design System team was responsible for ensuring consistency across all websites and mobile apps, but had no mechanism to verify whether teams were actually adhering to the design system guidelines. Every check required asking designers or dev teams directly, creating heavy dependency. Manual follow-ups, audits, and tracking consumed approximately 6,000 hours per year across the team.

                            6,000 hrs
                            Annual manual tracking and follow-up effort
                        

                            No Framework
                            No mechanism to measure DS adoption across websites
                        

My Role

As Product Manager on the Design System team, I drove this from POC to production:

Identified the dependency bottleneck and proposed the self-sufficient solution
Secured dedicated budget for the POC
Defined the comprehensive matrix framework for measuring DS adoption
Led the creation of the Chrome browser extension with the tech team
Defined what the extension should evaluate: colors, typography, icons, components, patterns, accessibility
Transitioned from POC to dedicated production extension after successful results

Stakeholders

Internal

Design System Team (own team)
Tech Team (LIT framework)
Design Teams (across products)
Product Owners / Website Owners

Scope

90+ company websites
Mobile app design consistency
Brand guideline compliance

How It Works

GDS browser extension flow: input website URL, capture via inspect mode, evaluate against design system guidelines, generate detailed report. Checks colors, typography, icons, components, patterns, and accessibility.

What It Evaluates

Colors and Contrast

Checks if colors used adhere to the design system palette and meet accessibility contrast ratios

Typography

Validates font families, sizes, and weights against design system definitions

Icons, Pictograms and Images

Verifies that visual assets follow brand and design system standards

Components and Patterns

Checks individual UI components and multi-component patterns against design system specifications

Results

6,000 hrs Annual manual effort saved

90+ Websites monitored for DS compliance

Zero Dependency on other design or dev teams

Self-Sufficient One-time solution, reusable across any website

Key Learnings

Eliminate dependency before scaling: The team could never have scaled DS adoption across 90+ websites while depending on other teams for every check. The extension made the team self-sufficient first.
POC with budget builds credibility: Starting with a funded POC and proving value made the case for a dedicated production extension straightforward.
Detailed reports change conversations: Instead of vague "please follow the design system" requests, the team could now point to specific pages, sections, and violations with evidence.