DS

DS

Estruturamos o design system do Hurb, do inventário à primeira versão.

Suitcase

Suitcase

Estruturamos o design system do Hurb, do inventário à primeira versão.

Imagem com algumas telas da documentação do Suitcase Design System na ferramenta Supernova.

Hurb · traveltech

2 designers · 3 devs · 2 stakeholders

2022 / 2023

O Hurb tinha produtos em web, iOS e Android crescendo sem uma linguagem comum. No primeiro time dedicado ao design system, estruturamos o Suitcase do inventário à primeira versão. Minha frente foi a facilitação entre design, produto e engenharia de todas as squads. O desafio: dar consistência e escala sem travar quem já estava entregando.

Web, iOS e Android

numa só linguagem

Útil desde o dia 1

para todos os times

Saúde medida

em cada componente

Roadmap

guiado por quem usa

Cada produto falava uma língua

As demandas cresciam, e as inconsistências também, entre o design e cada tecnologia. Havia bibliotecas no Figma, mas elas não refletiam o que estava em produção, e o handoff travava.

O ponto de partida real era a documentação técnica do front web, enquanto o time definia processos e como seria o dia-a-dia.

Time responsável pela área de Design Ops e o Design System do Hurb.

Medir antes de construir

Antes de criar qualquer componente, reunimos design, produto e engenharia para mapear o que existia.

Definimos critérios de saúde para cada componente, em design, tecnologia, documentação e priorização.

Imagem ilustrando os critérios de avaliação em design: overrides, propriedades, naming, ordem das camadas, design tokens 2.0, resizing e estados.
Imagem ilustrando os critérios de avaliação em tecnologia: design tokens 2.0, fidelidade em design, revisão e teste.
Imagem ilustrando os critérios de avaliação em documentação: estrutura, boas práticas, acessibilidade, handoff, visualização e código.

Saúde à vista

Com os critérios, avaliamos todos os componentes da biblioteca web e cruzamos com o que existia nas outras bibliotecas.

O resultado virou a base de acompanhamento do design system: indicadores, gatilhos de tarefas e o filtro do backlog.

Databases e boards de acompanhamento da saúde dos elementos do design system.

Um time com rotina própria

Com o escopo claro, o desafio passou a ser o time. Documentação interna, kanban alinhado às tarefas de engenharia, arquivos organizados por momento da tarefa e cerimônias semanais de evolução.

A estrutura de dentro preparou as bibliotecas de quem usa.

Matriz das camadas de consumo dos elementos do design system e estrutura da documentação interna no coda.
Etapas do processo completo das tarefas de evolução do design system.

A primeira versão

Faltava um marco para os times começarem a transição. Lançamos a primeira versão do Suitcase, com design tokens, bibliotecas e documentação aberta.

Materiais de apoio ajudaram cada squad a levar o design system para o dia a dia. Ver a documentação oficial ↗

Materiais de apoio para o dia-a-dia da squad e consumo dos usuários.

Escuta contínua

Com a primeira versão no ar, pesquisas com designers, PMs e devs viraram termômetro e alimentaram um catálogo de insights.

O roadmap das próximas releases saiu daí, priorizado em conjunto. Consistência não se impõe: se negocia com cada time.

Catálogo de insights coletados através das interações com pontos de interesse.
Resultados de uma das pesquisas realizadas com pessoas envolvidadas com o design system.
Imagem do roadmap inicial definido com o time.
Select some of this text to see the custom selection colors.