⎯ escalando as decisões de design e desenvolvimento dos produtos Hurb com o design system.

ds
suitcase

motivation

O trabalho de design system no Hurb nasce da necessidade de unificar a linguagem entre produtos digitais de um mesmo ecossistema - ou partes deles.

Tem por objetivo trazer consistência aos projetos, possibilitar maior escalabilidade e consequente ganho em eficiência.

Suitcase é a mala de viagem com tudo o que você precisa para projetar as melhores experiências para os produtos Hurb.

# design system
# design ops
# user testing
# facilitation
Como Staff Product Designer, participei ativamente de toda a organização, planejamento e implementação do design system do Hurb em um time multidisciplinar.

Além de mim, o time de product design para o design system teve participação de @willyfontenelle e @mayconcr.

context

No início de 2022, o escopo de trabalho das equipes de produto do Hurb vinha crescendo com novas demandas e a necessidade por projetos de interface que escalassem com mais eficiência tornava-se cada vez maior.

Além disso, cresciam também as inconsistências considerando todo o ecossistema da empresa, seja no contexto de design ou entre as diferentes tecnologias web, ios e android.

Para isso, integramos o primeiro time com pessoas exclusivamente dedicadas ao design system. Algumas iniciativas análogas corriam em paralelo, como bibliotecas de estilos e componentes no Figma, mas que ainda não eram fiéis ao que existia em produção. Do lado do time de front end web já existia uma documentação técnica de componentes no Storybook, que viria a ser nosso principal ponto de partida para as nossas evoluções.

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

Primeira fase

Durante a primeira fase do trabalho, conversamos diretamente com os principais envolvidos, seja em design, produto ou desenvolvimento. Montamos uma “força-tarefa” envolvendo os times técnicos para mapear o inventário existente e definir os próximos passos junto das lideranças.

Da mesma forma, a aproximação e o feedback dos designers de produto seria fundamental a cada progresso ou atualização, assim como o suporte prestado por nós com as melhores práticas especialmente para este período inicial, sempre estudando outros design systems no mercado e inovações.

definition

Buscamos olhar para os "clusters" do que podemos considerar como importante para a manutenção e evolução de um design system e que, como resultado, ajudaria a definir os próximos passos.

Como está a saúde do design system?

Para um design system funcionar, refletindo no negócio e usuário final do produto, ele precisa estar saudável, espelhado em todas as suas frentes de atuação e com o menor número de falhas (ou bugs).

Só assim ele reflete positivamente no processo de desenvolvimento do produto, facilitando a comunicação entre design e desenvolvimento durante a etapa de handoff e validação (QA).

O quanto estamos ajudando no processo?

Não adianta ter o design system mais completo e saudável possível, se ele não está usável e alinhado com a rotina e processos das pessoas que o utilizam.

E aqui está o desafio: se designers entregam telas (imagens, protótipos) e os desenvolvedores linhas de código, como chegar em um consenso para apoiar ao máximo o dia-a-dia de ambos?

As frentes do DS estão consistentes?

Por fim, tudo isso vai resultar em entregas no produto "real" e que impactam usuários finais da companhia, portanto tudo isso deve convergir para algo consistente, coerente e muito bem alinhado com as diretrizes e posicionamento de marca da empresa, a tal da "padronização".

Tudo isso vai muito além de usar a paleta de cores correta, a fonte definida na identidade visual ou respeitar os tamanhos do logo, mas também preservar a experiência entre os diferentes dispositivos, a aplicação e manutenção nas diferentes plataformas.

Monitorando esses pontos, conseguimos termômetros sobre o nosso design system para serem nossos guias, KPIs e triggers de iniciativas, tarefas e próximos passos.

indicators

Nesse começo, em um ambiente com muitas inconsistências entre bibliotecas e gargalos nas etapas de handoff entre designers e desenvolvedores, mostrou-se necessário mapear os elementos desenvolvidos para entender o real cenário em cada frente de atuação.

Critérios de avaliação

Levantamos com todo o time alguns pontos principais para medir a qualidade de um componente do design system, critérios que seriam os nossos guias para manter os elementos saudáveis.

Design

Em design, definimos critérios que iriam garantir que o componente estava funcional para uso com a ferramenta e critérios perceptíveis de acordo com os princípios que foram definidos no produto e marca Hurb.

Imagem ilustrando os critérios de avaliação em design: overrides, propriedades, naming, ordem das camadas, design tokens 2.0, resizing e estados.

Tecnologia

Para o código a importância maior era garantir o funcionamento do elemento com revisões e testes definidos pelo time de engenharia e o alinhamento com as definições de design.

Imagem ilustrando os critérios de avaliação em tecnologia: design tokens 2.0, fidelidade em design, revisão e teste.

Documentação

Na documentação o principal objetivo era garantir que o bom uso do componente seja preservado.

Imagem ilustrando os critérios de avaliação em documentação: estrutura, boas práticas, acessibilidade, handoff, visualização e código.

Priorização

Por fim, definimos que alguns critérios também poderiam apoiar na visibilidade sobre os próximos passos, trazendo insumos para o dia-a-dia do time e definição de backlog.

Imagem ilustrando os critérios de avaliação em priorização: status em figma, web, android e iOS, critérios de esforço, frequência, classe e criticidade.

Monitoramento

A partir dos critérios levantados, avaliamos todos os componentes da biblioteca web e relacionamos com o que tinha disponível nas outras bibliotecas, gerando uma fonte de dados para apoiar no mapeamento das evoluções quanto à saúde do design system.

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

structure

Com o escopo de trabalho e nossos medidores de sucesso definidos, o desafio passa a girar em torno da organização enquanto equipe.

Nossa documentação interna na ferramenta Coda ganhava robustez a partir de estudos sobre onde os elementos do design system seriam manifestados e suas influências nas entregas do time.

Imagem: Matriz das camadas de consumo dos elementos do design system e estrutura da documentação interna no coda.

Adotamos a metodologia kanban para evoluir de forma contínua, com etapas sempre alinhadas às tarefas de desenvolvimento para amarrar os processos e fluxos de trabalho.

Imagem: Etapas do processo completo das tarefas de evolução do design system.

Também definimos a organização dos arquivos no Figma para respeitar o momento de cada tarefa, desde a exploração de uma nova hipótese até as colaborações e validações finais.

Imagem: Organização dos arquivos de uso diário do time do design system.

Toda essa estrutura interna do time de design system ajudou a preparar o terreno para a organização dos arquivos de uso, entendendo como seria a melhor abordagem para as bibliotecas de design.

Imagem: Estrutura de arquivos de consumo dos usuários do design system.
Imagem: Materiais de apoio para o dia-a-dia da squad e consumo dos usuários.

Deliverables

Conseguimos evoluir o dia-a-dia do time e gerar uma rotina de squad com um processo para guiar as tarefas, cerimônias semanais sobre evoluções contínuas e estrutura de bibliotecas e arquivos bem definidos, só faltava definir o caminho que queríamos percorrer.

Olhamos para os indicadores, algumas requisições, necessidades técnicas e conseguimos um norte para os próximos passos.

Imagem do roadmap inicial definido com o time.

Definição da versão inicial

Mas ainda era importante para a companhia a gente ter um marco inicial, definir uma primeira versão que ajudaria na virada de chave para todos os times de produto começar a acompanhar as evoluções contínuas e dar início a um primeiro período de transição.

Imagem: Elementos presentes na versão inicial do Suitcase Design System: design tokens.

Começou a nascer a documentação de negócio na ferramenta Supernova, nela detalhamos todos os elementos definidos para a primeira versão e tudo o que os usuários precisam para utilizar a acompanhar a evolução do design system.

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

improvements

Ufa! Chegamos em uma primeira versão, mas a atuação do time continua evoluindo e as novas entregas precisam ser definidas.

Alguns aprendizados ao longo do caminho ajudaram a refinar o roadmap, rever alguns pontos do processo e principalmente entender melhor o escopo de atuação.

Imagem: Levantamento de possíveis tarefas para as próximas releases do roadmap.

Imagem: Resultado da dinâmica com o framework MoSCoW, para entender o escopo de atuação.

Melhoria contínua

Durante todo o processo, algumas pesquisas com designers, gerentes de produto e desenvolvedores serviram como termômetro sobre as entregas das primeiras etapas, mas também já foi possível receber insights importantes para as próximas etapas.

Imagem: Resultados de uma das pesquisas realizadas com pessoas envolvidadas com o design system.

Mantemos a continuidade dessas pesquisas em paralelo das tarefas de rotina, criando uma cultura de sempre ter um discovery contínuo para reforçar a adoção dos times e alimentar um board de insights e hipóteses para apoiar no refinamento das próximas etapas.

Imagem: Catálogo de insights coletados através das interações com pontos de interesse.

conclusion

Além da evolução dos indicadores de saúde, é esperado que o acompanhamento da adoção e impacto nos produtos sejam priorizados como próximos passos do Suitacase.

Link para a documentação externa: https://hurbdesign.supernova-docs.io/suitcase/

Aprendizados

⎯ Negociação e priorização de tarefas com pontos de interesse;
⎯ Facilitação e negociação com diversos times de diferentes contextos;
⎯ Exercícios e dinâmicas para definição de processos e rotinas do time.

contact

living in Sao Paulo, Brazil.
contato@nathansantos.design