Scaling Chick-fil-A’s Design System from Tool to Service

After a successful launch of a new internal Digital Design System at Chick-fil-A, critical issues arose behind the scenes around scaling and support services. For my team who is tasked with supporting the design system, the issues revealed an opportunity to completely overhaul how we manage this suite of design tools and libraries.

The new design system intended to enable product team development and drive alignment in the digital experience for our users. While we provided this value to end users in the beginning, the launch spurred an influx of issue reports that quickly overloaded the team. We realized that in order to scale the system successfully for user adoption, we needed to streamline our ability to address issues to maintain excellent customer service for our adopter community.

Taking Inventory of Our Team and System

When the issue reports began arriving, my product development team was eager to address them. However, we first needed to assess our limitations. We identified three critical areas for improvement:

• Our team was near capacity and unable to add additional work streams.
• Existing work streams were leaking inconsistencies into our design and development documentation.
• Our backlog prioritization strategy was ineffective in incorporating new issues within our existing roadmap initiatives.

Addressing all these project needs would require a thoughtful and innovative strategy.

Enter DesignOps

DesignOps, or Design Operations, is an agile product development practice focused on optimizing team processes, tooling, and development workflows to improve design team efficiency, alignment, and collaboration. For Chick-fil-A’s Digital Design System, our approach to DesignOps has focused on:

• Standardizing triage and governance processes
• Unlocking untapped potential in our development tools
• Improving deployment workflows to ensure consistency and stability in our growing design system

Designating a Support Team

To address the immediate need for a better triage and prioritization strategy, we introduced a Support Team. In our case, this pod — our term for a DesignOps support team— consists of a designer and developer who rotate each sprint monitoring our support channels and triage incoming issues according to defined issue triage model. If bandwidth opens up during a sprint, our support pod will address bug tickets from the backlog or time-box research in high-priority areas.

We implemented Kanban-inspired practices into our project planning space to ensure high-priority issues are captured and not lost in the product backlog. Additionally, working on support has provided our developers and designers with more opportunities to learn how our adopters are using the design system, thus informing and improving new product development.

Tool Integration and Optimization

Our team identified a primary cause of diverging system documentation: the number and inconsistencies of handoffs between designers, developers, and stakeholders during the product development and release lifecycle. We developed a strategy to:

• Reduce the number and cost of handoffs.
• Better integrate our core design and development tools, leveraging the many automations these integration tools provide.

We expanded our use of Figma’s branching capabilities to ensure design updates are merged in unison with parallel code releases. This has significantly reduced documentation and functionality inconsistencies.

Additionally, we leveraged Vercel to present live product development prototypes to designers and stakeholders. This has involved stakeholders sooner in the product development lifecycle, enabling earlier product pivots and faster delivery.

Tying it All Together

A major risk limiting our ability to scale our design system service model was the significant amount of time our team spent managing a predominantly manual deployment pipeline. To address this, we focused on adding automations throughout our product management, testing, and deployment tools.

By adding automations, we were able to unify and solidify many of the repetitive communications and status checks between designers, developers, and quality engineers. These have also helped keep our adopters informed of changes as they are released.

Lastly, we strengthened and extended automations in our testing pipelines. By integrating these pipelines to run against a feature’s live deployment in Vercel, we are able to test against pristine and contained deployment artifacts, which boosts confidence in our releases and frees time for our quality engineers to focus on improving, rather than maintaining, testing ecosystem quality. As a result, we have significantly reduced the rate of system inconsistencies without compromising the delivery of impactful design changes for our adopter community.

In Summary

The adoption of a DesignOps strategy has helped Chick-fil-A’s Digital Design System scale to meet the needs that accompany healthy design system adoption. By establishing a dedicated support channel, deepening the integrations between our product development tools, and expanding automations in our testing and release workflows, we have been able to improve the speed and quality of product delivery while solidifying our system’s ability to scale well into the future.