Operation Shoelace: Unifying the tools that power the Brooks digital experience. This project operationalized design at scale through strategic tooling decisions, governance processes, and centralized documentation.
Project Overview
In 2020 Brooks, in partnership with our agency of record at the time, underwent a huge brand and website refresh. As a result of that effort, Brooks’ digital experience teams inherited design and development libraries across four tools (Sketch, Zeplin, Frontify, and Pattern Lab) each accounting for a different part of the design system and lifecycle. There was no clear internal strategy or governance process for the tools. Over the next several years, the design system became fragmented, outdated, and ownerless. This created workflow inefficiencies, design inconsistencies, and onboarding challenges across eCommerce, Marketing, and Digital Products teams.
Problem Definition
The design system was scattered across disconnected tools with no clear ownership:
Pattern Lab for code components
Frontify for documentation
Sketch (and Zeplin) for UI design
Without a central source of truth, design and engineering teams worked inconsistently, often duplicating or misaligning efforts. The UX team became the de facto bridge—syncing files, resolving conflicts, and translating between systems.
Business Goal
Create a unified, scalable design system by consolidating tools, aligning cross-functional workflows, and improving onboarding, governance, and efficiency across the digital organization.
User (internal) Need
Designers, developers, and publishers needed one system, a single source of truth, to help them regain efficiency with handoffs and eliminate unintended diverging visual styles.
My Role
As UX Manager with a DesignOps lens, I led the strategic consolidation initiative, internally known as Operation Shoelace, to unify teams, tools, and workflows into a cohesive, sustainable system.
Success Metrics
Sunset 3 of 4 legacy tools (Sketch, Zeplin, Frontify)
Migrate and relaunch documentation into Figma
Establish governance model and reduce design/engineering friction
Improve onboarding and vendor collaboration
Align all design teams to one single source of truth by mid-2025
Approach & Process
Strategic Roadmap:
Phase 1 (2022–2023): Migrate UI design and dev handoff into Figma → sunset Sketch and Zeplin
Phase 2 (2024–2025): Migrate documentation into Figma → sunset Frontify
Phase 3 (Planned): Replace Pattern Lab with Figma-connected code components → tool TBD
Summary of Phase 2: Migrating documentation to Figma
In January 2025, I launched and facilitated a working group of power users from:
Digital Design (Creative)
Site Publishing (eCommerce)
Digital Merchandising (eCommerce)
UX (Digital Products)
To shape the sunset plan for Frontify, I ran a workshop to uncover each team's key pain points, system dependencies, and hopes or fears around migration.
By ending the workshop with a single question, “What’s the most important thing to you?” I uncovered 5 shared themes that guided our work:
System Organization
Video Spec Strategy
Archiving Process
Ownership Areas
Smart Integrations
What We Delivered
Module Matrix: A central navigation hub for the design system, co-created with stakeholders
Video Strategy: Standardized specs and embedding approach for training and documentation
Governance System: Form-to-Jira intake process for new requests and updates
Tool Consolidation: Migrated and reorganized content from Frontify into Figma
Sunset Plan: Frontify fully deprecated by June 30, 2025
My Contribution
Designed and facilitated the cross-functional working group
Created alignment through workshops, documentation, and shared planning
Developed and operationalized communication plans, training, and intake systems
Served as bridge between creative, product, publishing, and development
Results & Impact
Sunsetting 3 legacy tools (Sketch, Zeplin, Frontify)
Streamlined onboarding and team education
Single source of truth for all design and documentation in Figma
Cross-functional governance process in place
Improved velocity and consistency across publishing, design, and UX
On July 1, 2025, Brooks officially completes a two-year initiative to consolidate its design stack—uniting tools, teams, and systems into a single platform to work smarter and faster together.
Looking Ahead to Phase 3: Code Component Library
With the design system consolidated and functional for design and documentation, we’re now exploring the third and final phase: building a Code Component Library that connects the design system to development workflows.
Brooks has a clear opportunity to close the gap between design intent and development execution. When Pattern Lab was retired in 2023, it left no replacement, its codebase remains in GitHub, unmaintained and disconnected from our SFCC implementation. At the same time, CMS development in Sitecore is primarily vendor-owned and operates without consistent oversight or standardized workflows. The result is fragmented frontend patterns and limited shared infrastructure for quality and consistency. A Code Component Library would address what’s currently missing: code-based components that mirror our designed UI patterns, a shared reference system for CMS developers, consistent standards for frontend build + documentation + QA, and a centralized collaboration space where design and engineering can align on implementation as a living system.
As we consider the right time to activate this next phase, we’re evaluating the following:
Success factors: Clear internal technical ownership, an automation and integration first mindset, and governance that bridges design and engineering
Primary risks: Lack of ownership, underestimating scope, weak documentation or training support, and treating the effort as a one-time launch instead of a long-term cultural shift in the way we work
Readiness signals: Confidence in internal capacity to sustainably own, maintain, iterate and evolve the system over time
Reflection & Learnings
My key takeaway is that there’s a time for consensus, and there’s a time to lead decisively. People want to feel heard—and they also appreciate a confident guide. This initiative reminded me that while tools are important, people, process, and ownership are what make systems work. Sometimes alignment means bringing everyone to the table; other times, it means bringing a strong point of view and the plan to back it up.
DesignOps is the infrastructure for scale and systems thinking is what turns that infrastructure into impact.