Scalable Design System Development for TOXSquare

Project Summary: Drove the strategy and implementation of a scalable design system for TOXSquare to address fragmented UI patterns, duplicated engineering effort, and growing design debt across products. By establishing a shared foundation of components, tokens, and automation workflows, the system improved cross-team consistency, accelerated delivery, and enabled the product ecosystem to scale without proportional increases in design or engineering overhead.

My Role: Design System Strategy & Architecture / UX & Visual Design / Design Leadership / Documentation & Governance

Led the creation of a shared design language that aligned design and engineering teams and scaled across multiple products.

Inconsistent UI patterns and decentralized implementation practices were causing design and engineering teams to repeatedly solve the same problems. This fragmentation increased delivery timelines, introduced visual and interaction inconsistencies, and made onboarding new team members more costly. Without a scalable system, design decisions did not compound over time, they reset with each new feature or product.

Reduce design and engineering rework by eliminating duplicated UI patterns

Improve delivery velocity through reusable, production-ready components

Increase UI consistency to strengthen user trust and product coherence

Enable the platform to scale across teams without increasing maintenance burden

Execution began with a comprehensive audit of existing products to identify duplicated components, inconsistent patterns, and high-frequency UI elements. These insights informed prioritization of foundational tokens and components that would deliver the greatest impact. Design explorations were validated in close partnership with engineering to ensure feasibility and alignment with front-end architecture. Automation workflows were introduced to generate and maintain tokens, reducing manual upkeep and reinforcing consistency across products. Iterative feedback from product teams ensured the system supported real workflows and reduced friction during implementation.

Impact Metrics below: Based on comparative usability testing, stakeholder analytics review, tool reporting, and user satisfaction surveys.

Organizational Context: As TOXSquare expanded its product surface area, multiple teams were building and maintaining interfaces independently. While this allowed short-term velocity, it introduced long-term challenges: inconsistent user experiences, duplicated front-end work, and increasing difficulty maintaining quality at scale. The design system initiative was introduced to create a shared language between design and engineering and to support sustainable growth across the platform.

Strategy Insight: The core challenge was not the absence of components, but the absence of shared decision infrastructure. Rather than treating the design system as a static library, the strategy focused on building a living system that encoded design decisions, reduced ambiguity, and supported both design and development workflows. The goal was to ensure that design quality scaled automatically as the organization and product suite grew.

What Was Intentionally Simplified: The initial system focused on foundational tokens and high-impact core components, prioritizing adoption and usability over exhaustive coverage.

What Was Postponed: Advanced theming and role-specific variations were deferred until the core system proved stable and broadly adopted.

What Was Not Built: Highly specialized components and one-off interaction patterns were excluded to avoid fragmenting the system and increasing long-term maintenance cost.

Consistency Enables Speed: Standardized patterns reduce decision fatigue for teams and accelerate implementation by removing ambiguity.

Reuse Before Customization: A shared foundation should serve the majority of use cases before accommodating specialized variations.

Automation Over Manual Enforcement: Design and engineering standards should be reinforced through tooling and tokens, not documentation alone.

Scalability Over Completeness: A focused, extensible core provides more long-term value than a comprehensive but rigid system.

Design and Engineering Speak the Same Language: Close collaboration ensured that design tokens and components aligned directly with front-end implementation.

Improved delivery velocity by enabling teams to ship features using pre-validated components

Reduced duplicated UI patterns across core products, lowering design and engineering rework

Increased consistency across the platform, strengthening user experience coherence

Shortened onboarding time for new designers and engineers through shared patterns and documentation (Metrics were tracked through internal audits, delivery timelines, and qualitative feedback from design and engineering teams.)

This project underscored that successful design systems aren’t just libraries, they are shared operational agreements that reduce friction across teams. I learned that early alignment with engineering standards and automated token workflows can dramatically reduce maintenance costs and foster cross-team trust.

“Merilly has repeatedly demonstrated an unparalleled ability to turn complex problems into elegant, user-centric solutions. I'm thrilled to have had the chance to work with a top-tier UX Designer like Merilly and she has truly changed the way I approach project initiation and planning.”