Usable logo
back arrownext arrow

Strategic Planning and Production of Design System Components for CVS Retail Digital Teams in Figma

Imac mockup with design system on screen

Date Completed

June 2023

Overview

In August 2022, CVS began its organization-wide transition from Sketch to Figma, an effort designed to modernize workflows, improve collaboration, and enable greater design consistency across platforms. My contributions to this initiative spanned strategic planning, component creation, and advocacy for scalable design system solutions.

Solving for Efficiency and Consistency

One of the primary challenges was producing atomic design components that supported cascading edits. For components like Global Coupons, which consist of numerous tile variations, this approach was critical. By structuring work so that a single change could propagate across all variations, I saved significant production time and simplified ongoing maintenance for designers.

At the time, CVS’s migration to Figma presented both an opportunity and a learning curve for digital teams. As designers adjusted to Figma’s new tools, I played a role in leading this progression by demonstrating best practices for atomic design. This work not only improved workflow efficiency but also enhanced consistency across the organization, reducing technical debt in legacy files while preparing components for design system consumption.

Strategic Impact on Design Teams

The components I developed directly benefited designers across CVS digital:

  1. Reduced Production Time: Fewer components needed to be built from scratch.
  2. Improved Consistency: Designers could lift and reuse pre-built components, streamlining their workflows.
  3. Simplified Maintenance: Cascading edits minimized redundant work and increased file quality, improving handoffs and onboarding for new team members.

While specific metrics were not yet tracked, I contributed to future planning efforts by advocating for Figma’s built-in analytics. Metrics such as component placements, unlinking rates, and reuse patterns were identified as essential tools for evaluating adoption and improving component strategy.

Bridging Strategy, Governance, and Production

My work extended beyond production. I advocated for a crowdsourced approach to component creation, where designers across various trains contributed components for review and final production by the design systems team. This collaborative model balanced strategic governance with decentralized creativity, accelerating the build-out of CVS’s Pulse Design System.

In this role, I combined:

  1. Mastery of Figma Functionality: Atomic design principles, nested variants, and auto-layout configurations.
  2. Strategic Advocacy: Promoting scalable solutions to enhance design workflows.
  3. Technical Execution: Bridging the gap between design production and systems governance.

By driving these practices, I not only addressed immediate challenges but laid the foundation for a sustainable, federated design system that continues to support CVS’s digital teams.

Design System Production in Practice

The production of design system components for CVS marked a pivotal effort in modernizing workflows and establishing scalable, efficient design practices. My work spanned multiple components, including the Global Coupons, Table Cell, and Retail Banner, each addressing unique challenges while adhering to atomic design principles. These components, now foundational across CVS platforms, enabled cascading edits, streamlined workflows, and fostered consistency across iOS, Android, web, and mobile web experiences.

Beyond production, I played a strategic role in CVS’s migration from Sketch to Figma. This transition involved both technical execution and advocacy for design system governance, contributing to the development of the CVS Pulse Design System.

Atomic Design and Its Role in Modern Systems

The foundation of the CVS design system lies in atomic design, a methodology that breaks down complex user interface components into smaller, reusable building blocks. This approach ensures consistency, scalability, and efficiency in design production. By adopting atomic design, I worked to create components like the Global Coupons, where a single adjustment could cascade through a dozen or more variants, saving countless hours of production time.

Below is a view of the working file for the Coupons component, showcasing the early iterations of atomic design in practice.

Variant Creation and Dynamic Functionality

To make the coupons component adaptable, I structured it with numerous variants, allowing designers to quickly switch between states and styles. The variant menu in Figma exemplifies how seamlessly these adjustments could be made, enhancing productivity and enabling designers across CVS to use components confidently.

Bridging Strategy, Governance, and Production

The finalized Coupons file was not just a standalone achievement but a cornerstone for the broader design system. Built with scalability and reusability in mind, this component became a model for future work across CVS. By structuring it with nested elements and optimized layouts, I ensured the component was ready for system-wide adoption.

Below is the final Coupons file, integrated into the CVS design system, ready for reuse across platforms.

A figma coupon component selected with the figma UI showing options for variant selection

The Federated Design System Proposal

As CVS transitioned from Sketch to Figma, the organization faced a critical opportunity to rethink its approach to design system governance. Recognizing this moment, I independently developed a federated design system management model to align migration efforts with a scalable and collaborative strategy, leveraging my technical expertise and understanding of organizational workflows.

The core idea was to distribute component creation responsibilities across teams (“trains”) while maintaining centralized oversight for quality and consistency. This approach empowered designers to contribute to the system within their areas of expertise, fostering ownership and accelerating the build-out of CVS’s design library. By streamlining workflows and enabling cascading edits, the proposal demonstrated potential to reduce operational costs, improve efficiency, and enhance time-to-market for new features.

Proposal Highlights

  1. Atomic Design Focus: Components were organized into categories—Atoms, Molecules, Components, Screens, and Flows—ensuring clear guidelines for building reusable and consistent assets.
  2. Collaborative Governance: Weekly meetings provided a forum for teams to present components, receive feedback, and iterate collaboratively.
  3. Efficiency and Scalability: By structuring Figma libraries to support cascading edits and reusable components, the model reduced redundancy and enabled faster rollout of design updates.
Diagram of publishing from individual contributors to org.

The visuals (see Figjam board) illustrate the proposed distribution of responsibilities among design trains and the centralized governance structure. By creating a system that combined decentralized creativity with centralized oversight, the approach fostered alignment and collaboration across teams.

Although the proposed model was not fully implemented, its emphasis on collaborative governance and scalable libraries significantly influenced the governance approach adopted by CVS. This initiative highlighted the importance of alignment, consistency, and speed in design system management and reflected my ability to identify and execute on strategic opportunities.

This experience demonstrates my ability to combine strategic thinking, technical proficiency, and collaborative leadership to create scalable solutions that address complex organizational challenges.

The Role of Atomic Design in Final Production

The work initiated during the Sketch-to-Figma migration culminated in the creation of final design system components, such as the Coupons Component and Table Cell Component, now live across CVS platforms. These components exemplify the technical rigor and collaborative effort that defined the project.

The core idea was to distribute component creation responsibilities across teams (“trains”) while maintaining centralized oversight for quality and consistency. This approach empowered designers to contribute to the system within their areas of expertise, fostering ownership and accelerating the build-out of CVS’s design library. By streamlining workflows and enabling cascading edits, the proposal demonstrated potential to reduce operational costs, improve efficiency, and enhance time-to-market for new features.

Key Features of the Final Components:

  1. Cascading Edits: Structured to support cascading changes across dozens of variants, minimizing maintenance effort and ensuring consistency.
  2. Variants and Nested Elements: Designed with multiple configurations to adapt to various use cases without duplicating work.
  3. Platform-Specific Customization: Tailored to meet the unique needs of iOS, Android, and web platforms while maintaining a unified design language.
screenshot of part of one of the embedded figma components

Component Collaboration in Action

Weekly team meetings became a cornerstone of the project, fostering cross-functional collaboration and enabling designers at varying skill levels to contribute meaningfully. These meetings addressed technical challenges, shared best practices, and refined components for inclusion in the CVS Pulse Design System.

Skills Demonstrated

Through this project, I demonstrated a unique combination of technical expertise, strategic vision, and collaborative leadership. Specifically:

  1. Figma Mastery: Proficient use of auto-layout, atomic design principles, and variant structures.
  2. Strategic Advocacy: Effectively communicated the benefits of scalable design practices, influencing organizational decision-making.
  3. Collaboration and Governance: Bridged gaps between teams, ensuring alignment and quality in design system production.
  4. Technical Execution: Delivered high-quality, reusable components ready for implementation across platforms.

Reflections and Takeaways

Looking back, this project not only delivered immediate value through the creation of reusable components but also laid the groundwork for future improvements in design system management at CVS. Key takeaways include:

The core idea was to distribute component creation responsibilities across teams (“trains”) while maintaining centralized oversight for quality and consistency. This approach empowered designers to contribute to the system within their areas of expertise, fostering ownership and accelerating the build-out of CVS’s design library. By streamlining workflows and enabling cascading edits, the proposal demonstrated potential to reduce operational costs, improve efficiency, and enhance time-to-market for new features.

  1. The Power of Collaboration: Weekly meetings and shared ownership proved essential in aligning teams and fostering a sense of community.
  2. The Importance of Advocacy: Proposing and championing innovative approaches like the federated model can drive meaningful change, even if the exact solution isn’t adopted.
  3. Continuous Learning: This experience reinforced the value of staying at the forefront of tools and methodologies, such as variables in Figma, to enhance both individual and team productivity.

The work showcased here demonstrates not only my technical proficiency but also my ability to think strategically and contribute to long-term organizational success.

usable logo