Design system
Design system para uma holding com três empresas dentro, sem padrão comum entre elas. Entrevistei seis áreas, desenhei a arquitetura do sistema e o mantive versionado. Sistema completo que levava meses passou a sair em semanas.
Recriação para fins de portfólio. O projeto real está sob acordo de confidencialidade: a empresa não é identificada e nada do sistema original aparece aqui. O que você vê nesta página é o Núcleo Design, um sistema construído do zero, com marcas e conteúdo fictícios, para mostrar o raciocínio. Real são o método, as decisões e o resultado.
Artefato Capa e princípios do sistema
Um núcleo, três marcas.
O sistema de design da holding e das três empresas dentro dela. Fundação, princípios e tom de voz são comuns. O que cada marca tem de próprio mora em uma camada fina por cima.
Se o atalho é mais lento no primeiro uso, ele não é atalho, é regra.
Toda regra vem com o motivo. Quem entende o motivo resolve sozinho o caso que a regra não previu.
Fundamento é comum às três marcas. Personalidade é camada, nunca exceção improvisada.
Componente sem responsável apodrece, e apodrece em silêncio.
Documentação que precisa ser pedida por mensagem já perdeu para o jeito antigo.
01 O contexto e quem era afetado
Havia brandbooks espalhados, cada um com um designer ou um setor, e nenhum conversava com o outro. Como a holding tinha três empresas dentro, toda inconsistência valia por três.
No dia a dia isso aparecia assim:
Seis áreas eram afetadas: marketing, comercial, RH, audiovisual, desenvolvimento e os próprios designers. Nenhuma delas tinha pedido um design system.
02 O que eu descobri
Entrevistei marketing, comercial, RH, audiovisual, desenvolvedores e os outros designers, esperando encontrar irritação acumulada.
As pessoas gastavam tempo refazendo o mesmo componente e a mesma arte padrão, toda vez, e estava tudo bem.
Ninguém tinha aberto chamado, ninguém tinha pedido sistema nenhum. O desperdício estava normalizado: refazer parecia parte do trabalho, e não sintoma de algo faltando.
Isso mudou a natureza do projeto. Problema que ninguém reclama não se resolve com norma: como regra a cumprir, o sistema entraria como trabalho novo em cima de quem nem achava que tinha problema. Ele precisava chegar como atalho, e ser mais rápido já no primeiro uso, sem período de adaptação.
A segunda descoberta veio do audiovisual, e ela mudou o artefato, não só o discurso. Aquele time trabalhava com cor de cenário, então precisava de RGB. A gráfica pedia CMYK. O desenvolvedor usava HEX. Era a mesma cor, e ninguém tinha as três. Passaram a entrar lado a lado, em toda cor do sistema.
Artefato Cor, com as três notações lado a lado
03 O método
Nada de uma rodada de entrevistas seguida de meses de construção em silêncio. Cada área passou pelo mesmo ciclo, e ele terminava com algo publicado.
Sem proposta na mão. A conversa servia para ouvir o que atrapalhava aquela área e o que ela refazia sem perceber.
Eu voltava com as soluções possíveis, ainda em rascunho, para serem derrubadas ou corrigidas por quem faz o trabalho todo dia.
A terceira já era a página daquela área dentro do sistema, pronta e no ar. Quem tinha sido entrevistado via a própria conversa virada artefato.
Uso real, dúvida que aparecia, exceção que alguém precisava. É daí que saíram as versões seguintes, e não de uma lista minha de vontades.
O ciclo faz duas coisas ao mesmo tempo. A área deixa de ser fonte de requisito e vira coautora, o que resolve adoção antes de ela virar problema. E a terceira conversa entrega em vez de pedir: em nenhum momento eu apareci pedindo que alguém mudasse o jeito de trabalhar em troca de uma promessa.
04 Por que esse problema primeiro
Eu tinha acabado de entrar na área de produtos digitais e havia outras frentes pedindo atenção. Escolhi essa por dois motivos: era a única que cruzava todas as áreas ao mesmo tempo, e enquanto não houvesse base comum todo produto digital novo nasceria do zero, com o custo dobrando a cada superfície nova.
O que já existia não foi descartado. Os brandbooks espalhados foram absorvidos em parte, e o que veio deles foi reconstruído dentro da estrutura do sistema, em vez de virar anexo solto. Substituir o trabalho dos outros designers custaria a adesão deles logo no começo.
05 Decisões de design
Construí de baixo para cima, conversando com os setores e desenhando padrões que não dificultassem o trabalho de ninguém. A presidência entrou depois, com a adesão já acontecendo, e não antes, como autorização.
A ordem importa. Aprovado de cima, o sistema seria mais uma exigência para áreas que não tinham pedido nada. O aval da presidência serviu para sustentar o que já estava de pé.
Vem da descoberta 02
Nenhuma seção entrou por completude: cada uma existe porque alguém, em alguma conversa, precisava dela. Por isso o sistema não parou em cor, tipografia e ícone.
| Seção do sistema | De onde ela veio |
|---|---|
| Fundação, princípios, tom de voz, marcas | a holding tinha três empresas, e nenhuma sabia dizer o que as unia |
| Cor, em HEX, CMYK e RGB | HEX para o desenvolvedor, CMYK para a gráfica, RGB para a cor de cenário do audiovisual |
| Tipografia, iconografia, grid e espaçamento | designers de áreas diferentes decidindo cada um por conta |
| Fotografia e ilustração | não havia critério para o que era, e o que não era, imagem da casa |
| Peça impressa, papelaria e assinatura de e-mail | a peça que voltava errada da gráfica |
| Componentes de interface | cada desenvolvedor criando o próprio componente dentro do mesmo sistema |
| Audiovisual: lettering, efeitos de entrada e saída, margens, enquadramentos | o setor que quase nenhum design system atende, e que aqui foi entrevistado |
| Redação | quem escrevia não tinha onde consultar como a empresa fala |
| Materiais de apoio: logos, modelos de Word e de apresentação | o colaborador que montava a própria apresentação, sem designer por perto |
A linha do audiovisual é a que mais diz sobre o método. Lettering, efeitos de entrada e saída, margens e enquadramento não estão em quase nenhum design system, e não estariam neste se aquele time não tivesse sido ouvido.
Vem do método 03
Artefato Tom de voz, da seção de redação
Regra: dizer o que aconteceu, depois o que a pessoa faz com isso.
Três sistemas separados multiplicariam o esforço por três e devolveriam a holding ao ponto de partida. Uma marca só não servia: cada empresa fala com um público diferente.
Fundação, princípios e tom de voz ficaram comuns. A seção de marcas é onde cada uma ganha o que tem de próprio, e o componente não precisa saber qual delas está vestindo.
Vem do contexto 01
Artefato O mesmo componente, sob as três marcas
Institucional da holding. É a marca padrão de todo material que fala pelo grupo.
A mais clara das três, e a única que inverte a tinta do botão em vez de mudar o componente.
Mesma estrutura, mesmo espaçamento, mesma altura de toque. Só a camada de marca muda.
Três variáveis mudam entre as marcas. O componente não muda nenhuma linha.
Arquivo baixado envelhece na máquina de quem baixou, e a versão errada circula por e-mail durante anos. O sistema foi distribuído por link único: quem tinha acesso via sempre a versão corrente.
Dentro do sistema vale a mesma lógica. A regra de uso fica colada no componente, e não numa página de diretrizes separada, porque consultar precisava ser mais rápido do que perguntar a alguém.
Vem da resistência 06
Artefato Componentes, com a regra ao lado
Um primário por tela. Se dois botões disputam a mesma decisão, o problema é da tela, não do componente.
Rótulo sempre visível. Rótulo dentro do campo some quando a pessoa começa a digitar, que é justamente quando ela ainda tem dúvida.
Aviso diz o caminho. Mensagem que só informa o bloqueio devolve a pessoa para o suporte.
Cor não carrega o sentido sozinha. O texto do estado vem junto, sempre, para quem não distingue as duas cores.
06 A resistência, e como ela virou
A resistência veio do time de desenvolvimento, com um argumento honesto.
Era mais rápido olhar a tela no Figma e programar aquilo do que criar o componente uma vez e seguir a governança do sistema. Na primeira tarefa eles estavam certos: o sistema cobrava adiantado e pagava depois.
O que virou o jogo foi evidência, não convencimento. Quando viram o ganho dentro do próprio Figma para montar função nova, tela nova ou sistema novo, levaram isso para o código por conta própria. A adoção no código não foi pedida por mim.
Adesão de uma área sobre a qual eu não tinha poder de mando não se consegue com documento. Consegue-se devolvendo tempo.
07 Como saiu do papel
O sistema foi construído no Figma e entregue como protótipo de alta fidelidade em formato de site navegável, distribuído por link único. Quem tinha acesso abria o endereço e via a versão corrente, o que elimina a falha clássica da documentação de marca: o PDF de dois anos atrás ainda circulando por e-mail.
É a decisão 5.4 por outro ângulo. Navegar é o gesto que as pessoas já fazem, e documentação que exige aprender a usar a documentação perde para o jeito antigo antes de começar.
08 Qualidade e escala
O sistema tinha release e versionamento semântico, no formato maior, menor e correção, mantido por mim.
Componente novo, ajuste em um tipo de texto, correção de regra: cada mudança virava uma versão, com o registro do que mudou. É o que permite usar o sistema sem precisar perguntar a alguém.
O limite: por ser iniciativa individual, e não processo com dono institucional, algumas mudanças escapavam do registro. O sistema funcionava porque uma pessoa cuidava dele todos os dias, e isso é fragilidade, não virtude.
Artefato Histórico de versões
Seção de audiovisual: margens de segurança e enquadramentos para vídeo vertical. Menor · pedido do audiovisual no acompanhamento
Correção do CMYK da Vértice, que saía escuro demais no papel fosco. Correção · reportado pela gráfica
Etiqueta de estado ganha texto obrigatório junto da cor. Menor · acessibilidade
Camada de marca substitui os três conjuntos separados de estilo. Maior · quebra compatibilidade com arquivos da 1.x
09 Resultado
Sistema completo que levaria meses passou a sair em semanas.
Funcionalidade nova passou a sair em dias, organizada e documentada. O ganho não veio de gente trabalhando mais rápido, veio de ninguém precisar redecidir o que já tinha sido decidido uma vez.
10 O que eu faria diferente
Ele sobreviveu em boa parte, mas a governança foi para outra área, onde eu já não atuava, e sem dono próximo o sistema foi se diluindo. As duas coisas que eu faria diferente têm a mesma causa.
A primeira: deixar a governança escrita e com responsável nomeado antes de considerar a entrega pronta, em vez de tratá-la como consequência da adoção. A segunda: tornar o registro de versão obrigação de processo, e não disciplina individual, que foi onde as coisas escaparam.
Adoção conquistada não se sustenta sozinha. Ganhar a área é a parte visível, e manter o sistema vivo depois disso é o que decide se ele existe em três anos.
A próxima etapa deste case é publicar o Núcleo Design como página própria, com o sumário completo, incluindo audiovisual e materiais de apoio, agora em código.
Método, decisões e o que não coube aqui eu detalho em conversa, dentro do que o acordo de confidencialidade permite.