Back to work
Cover of the CVC chuí design system Team Library case study

môre · CVC Corp

chuí · Team Library

Team libraries to unblock the design system

Tags / Year
  • Study Case
  • Ops
2022

Overview

CVC’s Ops team launched chuí, a design system built on Atomic Design, starting from the most basic elements. Components, styles, colors, type, illustrations and brands were made available to every team. Daily use exposed bottlenecks, so we studied the situation to propose a way out.

Files too heavy

With every component, flow and prototype in one place, Figma files froze and crashed throughout the day.

3 teams, 19 squads

Flows started in one team and ended in another. Changes didn’t propagate and designers kept chasing alignment.

A queue at Ops

Only Ops managed libraries. Urgent requests, like the platform header, waited in the design system queue.

Pilot approved

The Team Library was piloted with the team’s most used components, presented to leadership and Design Ops, and approved for the other teams.

The process

fig.01

Who owns each layer

chuí organizes everything with Atomic Design. Before, ions, atoms and molecules belonged to the Design System, and the rest to the UX teams. The Team Library adds a middle ground: molecules, cells and organisms move to a library for each team, where Ops and the squads meet.

Yellow Figma warning: 74% of memory used, the file is almost out of browser memory. Red Figma warning: 74.2% of memory used, adding content is no longer safe and data may be lost.
fig.02

The problem

Figma memory warnings became routine. A separate file for complex components helped, but keeping several files in sync meant manual updates.

Before

With the Team Library

fig.03

One library per team

Before, the design system was monolithic: it fed every squad, and the squads didn’t talk to each other. To change a component, the proposal went up to the design system, waited to be published and only then reached the other squads, with a lot of blocking and red tape.

With the Team Library, Design Ops keeps the core structure and each team gets a library that feeds its squads and talks to the other teams’ libraries. The Ops documentation stays clean, and what belongs to each team lives in its own library.

Before

With the Team Library

fig.04

Versions in sync

Without the Team Library, each file copied components from another and versions fell behind. A squad that needed a component the Flights squad had already documented and built, flow included, would copy the material, but when Flights updated the component, the copy never heard about it.

With the Team Library, the component lives in the team library and squad files use instances of it. When it changes, the update reaches every screen and each squad accepts it. No more outdated versions between squads.

Design Ops

Ops Librarian

Looks after the design system and how it talks to the teams.

  • Design system communication
  • Managing the team librarians
  • Running the rituals
  • Component review
  • Backlog support
  • Styleguide support

UX teams

Team Librarian

Owns componentization and keeps the team library organized.

  • Fitting the styleguide
  • Component updates
  • Componentization
  • Managing the team backlog
  • Reporting to the Ops Librarian
  • Supporting product designers

Product designer

Uses the library day to day in flows, without editing it directly.

  • Proposing new components
  • Describing needs
  • Documentation
  • Bug reports
fig.05

Clear roles

Each role knows where it stops: the Ops Librarian reviews and decides what goes into the design system, the Team Librarian looks after the team library, and product designers use it in their flows and bring their needs to the librarian.

Impact

Lighter files, Ops and UX working together, and more consistency for the people using the product.