Voltar para trabalhos
Capa do estudo de caso Team Library do design system chuí, da CVC

môre · CVC Corp

chuí · Team Library

Bibliotecas por time para destravar o design system

Tags / Ano
  • Study Case
  • Ops
2022

Visão geral

O time de Ops da CVC lançou o chuí, um design system baseado em Atomic Design, começando pelos elementos mais básicos. Componentes, estilos, cores, tipografia, ilustrações e marcas ficaram disponíveis para todos os times. Com o uso diário vieram os gargalos, e estudamos o cenário para propor uma saída.

Arquivos pesados demais

Com todos os componentes, fluxos e protótipos no mesmo lugar, os arquivos do Figma travavam e quebravam ao longo do dia.

3 times, 19 squads

Fluxos começavam num time e terminavam em outro. Mudanças não se propagavam e os designers viviam correndo atrás de alinhamento.

Fila no Ops

Só o Ops gerenciava bibliotecas. Pedidos urgentes, como o header da plataforma, esperavam na fila do design system.

Piloto aprovado

A Team Library foi testada no time com os componentes mais usados, apresentada à liderança e ao Design Ops e aprovada para os demais times.

O processo

fig.01

Quem cuida de cada camada

O chuí organiza tudo em Atomic Design. Antes, íons, átomos e moléculas ficavam com o Design System, e o resto com os times de UX. A Team Library cria um meio de campo: moléculas, células e organismos passam para uma biblioteca de cada time, na interseção entre o Ops e as squads.

Aviso amarelo do Figma: 74% da memória usada, o arquivo está quase sem memória do navegador. Aviso vermelho do Figma: 74,2% da memória usada, adicionar conteúdo já não é seguro e dados podem se perder.
fig.02

O problema

Os avisos de memória do Figma viraram rotina. Um arquivo à parte para componentes complexos ajudou, mas manter vários arquivos em sincronia exigia atualização manual.

Antes

Com a Team Library

fig.03

Uma biblioteca por time

Antes, o design system era monolítico: distribuía para cada squad, e as squads não conversavam entre si. Para mudar um componente, a proposta subia para o design system, esperava a publicação e só depois chegava às outras squads, com muito travamento e burocracia.

Com a Team Library, o Design Ops mantém a estrutura principal e cada time ganha uma biblioteca, que distribui para as suas squads e conversa com as bibliotecas dos outros times. A documentação do Ops fica limpa, e o que é de cada time fica na biblioteca dele.

Antes

Com a Team Library

fig.04

Versões em dia

Sem a Team Library, cada arquivo copiava componentes de outro e as versões ficavam para trás. Uma squad que precisasse de um componente que a squad de Aéreos já tinha documentado e componentizado, com o fluxo pronto, copiava o material, mas quando Aéreos atualizava o componente, a cópia não ficava sabendo.

Com a Team Library, o componente fica na biblioteca do time e os arquivos das squads usam instâncias dele. Quando ele muda, a atualização chega a todas as telas e cada squad aceita o update. Sem versões atrasadas entre as squads.

Design Ops

Ops Librarian

Organiza o design system e a comunicação com os times.

  • Comunicação do design system
  • Gestão dos team librarians
  • Governança dos ritos
  • Revisão de componentes
  • Suporte com o backlog
  • Suporte ao styleguide

Times de UX

Team Librarian

Cuida da componentização e da organização da biblioteca do time.

  • Adequação ao styleguide
  • Atualização de componentes
  • Componentização
  • Gestão do backlog do time
  • Report ao Ops Librarian
  • Suporte aos product designers

Product designer

Usa a biblioteca no dia a dia, nos fluxos, sem mexer direto nela.

  • Proposta de novos componentes
  • Descrição de necessidades
  • Documentação
  • Report de bugs
fig.05

Papéis claros

Cada papel sabe até onde vai: o Ops Librarian revisa e decide o que sobe para o design system, o Team Librarian cuida da biblioteca do time, e o product designer usa o material nos fluxos e leva as necessidades para o bibliotecário.

Impacto

Arquivos mais leves, Ops e UX trabalhando juntos e mais consistência para quem usa o produto.