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 and 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.
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 Need:
Designers, developers, and publishers struggled with unclear sources of truth and inconsistent handoffs. The fragmented system slowed delivery and diluted visual cohesion.
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
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.
The Cost:
Inefficient workflows
Design inconsistencies
Slower delivery and greater onboarding friction
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 Delivering Phase 2:
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
Hopes and 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: 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—closing the loop between intent and implementation.
The Opportunity: Brooks retired Pattern Lab in 2023 with no replacement. Its codebase exists in GitHub, unmaintained and disconnected from SFCC. Meanwhile, CMS development (via Sitecore) is vendor-owned and operates without formal oversight or standardized workflows. There’s an increasing need for better developer collaboration, governance, and consistency.
What’s Missing:
Code-based components that mirror designed UI patterns
A shared development reference system for CMS developers
Consistent standards for frontend development, documentation, and QA
A centralized collaboration space between design and engineering
"These libraries bridge design and development by housing technical specs, code snippets, and documentation that transform design intent into implementation reality—making them a core collaboration point for cross-functional teams."
Proposed Stages and Approach of Phase 3:
Secure Leadership Support – Ensure executive buy-in and allocate funding/resources
Choose a Tool & Assign Ownership – e.g., Storybook, integrated with GitHub
Design & Document the System – Define process, tooling, integration touchpoints
Allocate Resources & Execute – Small, focused team with a dev, designer, and PM
Launch & Rollout – Train teams, support adoption, and build feedback loops
As we consider the right time to activate this next phase, we’re evaluating the following:
Success will be unlocked by internal technical ownership, an automation and integration-first mindset, and a cross-functional governance model that bridges design and engineering
The biggest risks are lack of ownership, underestimating scope, poor documentation, low training support, and treating this like a one time launch vs a long term shift in the culture around our work
Readiness will look like knowing if we have enough and the right internal resources to own it and what needs to be true to support sustainable ownership and ongoing iteration of this system
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.