Usable logo
back arrownext arrow

Producing User Interface Kit components for CVS retail digital teams in Figma

Imac mockup with design system on screen

Date Completed

June 2023

Overview

Back in August of 2022 CVS began their transition from Sketch to Figma. As a part of this change MIgration work was scheduled across CVS digital.

I addition to working in atoms and nested components, I advocated for a federated design system strategy with the digital director of design systems. Months later my manager on Build a Basket has informed me that I played a role in the decisions about design system planning and management that he appreciated.

Kinds of UI Kit work

  1. The work I was doing on CVS shopping list was unfolding in meetings with my own team, product leads and digital directors. By working with atoms, molecules and autolayout screens I was able to make some changes live in meeting as well as make changes that would cascade through all screens. Both of these strategies saved time and allowed me to push the work forward more quickly with fewer iterations.
  2. Around the beginning of the year I was scheduled to begin spending half of my time developing components for the CVS retail design system. This work was equal parts planning how to constrain the use of the component and technical understanding of how to produce the component controls that would serve designers best.

In addition to my work on shopping lists

I was tasked to produce global coupon migration work. I created them with atom masters for all elements allowing for cascading edits.

Component States and structure in Figma

Producing components for the CVS Pulse design system

Is an example of working with the complex practices involved in populating the right rail in figma with the properties necessary to maintain consistency while allowing the right leve of configurability.

Tiles for the deals pages at CVS

Advocating for a federated model of design system management

I produced these flows as part of the presentation I emailed the new director of design systems at CVS digital.

Months later I found that m train manager was point person for the UI Kit. While the configuration of Figma team publishing in the way I had proposed was not adopted, what had been organized was a federated system.

The federated org structure

  1. Designers are assigned tickets in Rally for producing a component
  2. Completed components are submitted within a template that collects a standardized set of information
  3. A group of design managers, team leads and product leads hold regular meetings in which an air table of work produced by designers are reevaluated for inclusion in the kit
  4. Components that are selected are then assigned in Rally to one of two designers who produce the components that are added to the Pulse UI kit for all retail teams.

I produced these flows as part of the presentation I emailed the new director of design systems at CVS digital.

Months later I found that m train manager was point person for the UI Kit. While the configuration of Figma team publishing in the way I had proposed was not adopted, what had been organized was a federated system.

The federated org structure

  1. Designers are assigned tickets in Rally for producing a component
  2. Completed components are submitted within a template that collects a standardized set of information
  3. A group of design managers, team leads and product leads hold regular meetings in which an air table of work produced by designers are reevaluated for inclusion in the kit
  4. Components that are selected are then assigned in Rally to one of two designers who produce the components that are added to the Pulse UI kit for all retail teams.
A screen grab of a Miro board created to advocate for a federated model of design system governance
A system diagram for the figma teams configuration for crowdsourcing components across CVS
System at a inclusive size, showing all elements
usable logo