Allegro Design System , JG Design
Case Study Design Systems SaaS

Scaling consistency with the Allegro Design System

Building and operationalizing a unified design foundation for MaestroQA , enabling a full product redesign while closing the gap between design, engineering, and user experience.

Role
Lead Designer
Tools
Figma
Focus Areas
Design Systems, Accessibility, Cross-functional Alignment
80%
AAA Compliance
Achieved the highest WCAG accessibility tier across the component library
Well above industry standard
95%
AA Compliance
Near-complete standard WCAG conformance across all product surfaces
Enterprise SaaS standard met
30%
Component Reduction
Redundant patterns eliminated through systematic product-wide audit
~130 variants reduced to ~91

A partially-built system with high stakes

When I took ownership of the design system mid-project, it was partially complete and lacked clear documentation, alignment, and adoption across teams. At the same time, the business was already investing heavily in a full product redesign built on this system , making the margin for error extremely small.

01
Inconsistent UI patterns
Interfaces varied significantly across features, creating friction for users and inefficiency for product and engineering teams.
02
Fragmented design decisions
Design choices lived in silos between designers and engineers, with no single source of truth to align on.
03
No system for scaling
There was no standardized foundation to support future product growth, new features, or consistent handoffs.

A product that outgrew its foundation

MaestroQA's product had grown rapidly without a unified design foundation. This project focused on building and operationalizing a scalable design system to unify the product experience, improve usability, and accelerate development, not just as a design artifact, but as a living operational tool.

Product Comparison
Side-by-side comparison of the old MaestroQA UI versus the redesigned interface using the Allegro design system
Design System Overview
Allegro Design System component library overview showing UI components, patterns, and design tokens

Five pillars that moved the system forward

01

System Audit and Gap Analysis

Evaluated existing components, identified inconsistencies, and prioritized missing patterns that were actively blocking product teams from moving forward.

02

Component Standardization

Rebuilt and extended components with a focus on scalability, reusability, and clarity, including usage guidelines and a deliberate reduction of redundant variations.

03

Accessibility First

Embedded AA compliance into the system by default, ensuring components met accessibility standards from the ground up and reducing costly downstream rework.

04

Cross-Functional Collaboration

Worked closely with engineering to ensure components were not only well-designed, but practical to implement, maintain, and extend over time.

05

Advocacy and Adoption

Actively reinforced best practices across the team, ensuring the system wasn't just built, but actually used, understood, and trusted by the people working with it daily.

Raising the bar beyond the minimum standard

Accessibility wasn't a checkbox. By embedding WCAG compliance into every component from the start, Allegro transformed MaestroQA's product from an inconsistently accessible interface into one that met, and in most cases exceeded, industry standards. The result was a product that genuinely worked for more people.

WCAG Compliance Results
Web Content Accessibility Guidelines 2.1
AAA Enhanced (Highest Tier)
80%
AA Standard Conformance
95%
AA compliance is the enterprise SaaS standard. Reaching 80% AAA places Allegro well above the bar most teams set. This was achieved through deliberate token decisions around contrast ratios, focus management, and semantic structure, enforced system-wide from day one.

Less is more: a leaner, sharper system

Before Allegro could grow, it needed to shrink. A thorough audit of existing patterns across the product revealed significant duplication: components that served the same purpose under different names, or minor variants that added complexity without adding value. Consolidating these freed the team to focus on quality over quantity.

Before audit
~130
Component variants spread across the product, many serving overlapping or near-identical purposes with subtle, undocumented differences.
After consolidation
~91
A tighter, fully documented set of components , each with a clear purpose, defined usage guidelines, and no redundant counterpart.
30% reduction
Fewer components meant less cognitive overhead for designers and engineers alike, resulting in a product that behaved more consistently.

Agent Performance: the system's first real test

The Allegro system and the product redesign didn't launch separately. They debuted together through Agent Performance, a new flagship feature that let us validate both simultaneously. For pilot customers, it was a concrete, visible signal of progress, and for the team, proof that the system worked in the wild.

Agent Performance: Pilot Launch

By unveiling the redesigned product alongside the new design library through Agent Performance, we tested both in a real customer context , gathering signal on usability, visual coherence, and feature adoption while building early momentum. Pilot customers experienced the system as a finished product, not a work in progress.

System validated in production. Agent Performance proved Allegro's components worked across a complex, data-dense feature without design debt accumulating.
Pilot customer excitement. Early users saw a dramatically more polished and consistent product, generating positive signal and momentum ahead of the full launch.
Internal alignment on system value. Shipping through a real feature gave engineering and product stakeholders tangible evidence of the payoff , converting skeptics into advocates.

A foundation the product could grow from

The Allegro system gave the team tools, confidence, and shared language, enabling a successful product redesign and sustainable development going forward.

Single source of truth for UI, reducing ambiguity across design and engineering
More consistent product experience across all features and surfaces
Faster design to dev handoff with clearer documentation and fewer back-and-forths
Reduced rework and design debt across the product organization
Enabled a successful full product redesign built confidently on the system
Accessibility baked in by default, not retrofitted as an afterthought

What this project taught me about systems work

Design systems are team products, not design deliverables
Adoption depends on shared ownership across design and engineering. A system that only lives in a design file isn't a system. It's a reference document.
Accessibility requires constant enforcement
Without active oversight, even strong systems drift out of compliance. AA standards need to be embedded into process, not just into components.
Timing matters as much as execution
A design system needs strong stakeholder buy-in and alignment with roadmap priorities to succeed. The best system built at the wrong moment won't get traction.

Explore the Allegro Design System

A public, limited-access version of the component library, viewable in Figma.

Public · Limited Access · View Only
Open in Figma
JG Design Allegro, MaestroQA Design System
Next
Next

MaestroQA: Agent Performance - Coaching Dashboards