Na DataCamp, nossa missão é democratizar a educação em ciência de dados para todos, e com mais de 2 milhões de alunos no mundo todo estamos avançando rápido. Operar nesse ritmo de crescimento exige muito esforço de todo mundo na empresa e traz uma série de desafios empolgantes.
Para o time de design, isso significa sair do design página a página para uma forma de criar mais escalável. Reutilizar componentes existentes, reduzir o tempo de desenvolvimento, melhorar a usabilidade e aumentar a acessibilidade estão ficando cada vez mais importantes.
Este artigo mostra como começamos a organizar um design system.
O que é um design system?
Um design system reúne todos os componentes necessários para distribuir e reproduzir uma solução de design. Não é algo novo nem exclusivo do design de produtos digitais — há muitos exemplos ao longo da história.
Por exemplo, o primeiro império chinês tinha o problema de que arqueiros não conseguiam usar as flechas dos colegas. Cada flecha era desenhada especificamente para um arco, então as de outros simplesmente não serviam. O primeiro imperador chinês, Ying Zheng, padronizou a forma de projetar as flechas e isso teve um impacto enorme em suas conquistas militares.
Nos anos 50, cada estação do sistema de transporte de Nova York tinha sua própria sinalização. Isso gerava muita confusão, porque cada estação tinha um jeito diferente de orientar as pessoas. Como resultado, muita gente evitava usar o metrô porque não entendia como funcionava. Massimo Vignelli e Bob Noorda criaram o NYC Transit Authority — Graphics Standards Manual, que documentava como as placas deveriam ser feitas e posicionadas nas estações. Com o tempo, esse sistema permaneceu mais ou menos o mesmo e ainda é usado ativamente hoje.
Por que ter um design system?
Quando cada página é desenhada isoladamente, muitos componentes acabam com duplicatas ou variações parecidas. Isso deixa o produto digital difícil de entender para os usuários e difícil de manter para engenharia. Na DataCamp, descobrimos mais de 20 tipos de botões no produto, cada um com suas peculiaridades (estados de hover diferentes, estados desabilitados inconsistentes etc.). É difícil acompanhar todos esses componentes quando o produto cresce rápido, e mantê-los beira o impossível. É aí que um design system entra em cena.
Em um produto digital, um design system descreve os componentes de interface que podem ser usados para criar uma interface que resolve um problema e gera uma experiência coesa para o usuário.
Quando um design system é bem executado, ele gera um efeito em cascata que …
- reduz a comunicação truncada
- reduz o tempo de implementação
- reduz o trabalho de manutenção
- reduz bugs
- reduz os chamados de suporte
- aumenta a qualidade
- aumenta a eficiência
- aumenta a longevidade
- aumenta a aprendibilidade
- aumenta a usabilidade
- aumenta a acessibilidade
- aumenta a inovação
- aumenta o foco
- aumenta as vendas
Não é fácil …
Criar, manter e fazer cumprir um design system exige muita disciplina e um esforço contínuo de todo mundo envolvido no processo. Não é só design; engenharia e gerenciamento de produto também são partes fundamentais. Todos precisam fazer perguntas difíceis, como: “Por que estamos construindo isso?”, “Dá para reutilizar este componente em outro lugar?”, “Já temos algo parecido?”, “Este componente customizado traz benefício suficiente em relação ao esforço necessário?”.
Design System 101 na DataCamp
1. criar um inventário de componentes
Objetivo: garantir que todos conheçam a existência e o status de um componente.
Quando entrei na DataCamp, havia um arquivo do Sketch com cores, ícones, fontes e alguns componentes básicos. Estava longe de completo, mas era um bom ponto de partida. A engenharia de front-end também tinha uma coleção de componentes usados nos projetos.
Juntos, criamos um inventário no Airtable com base nos componentes usados em produção. Isso deu ao time de design uma visão do que já existia e evitou que criássemos novos componentes sem saber. Também mostrou quantos componentes semelhantes tínhamos e quão séria era a situação.
2. usar convenções de nomenclatura
Objetivo: evitar ruídos entre Design e Engenharia.
Quando começamos a comparar os componentes, percebemos que Design e Engenharia não falavam a mesma língua. Por exemplo, a “cor primária” definida por design era a “cor secundária” no código. Coisas assim geram ruídos quando os times escalam e causam confusão e frustração. Garantimos que a mesma linguagem fosse usada entre os times.
3. otimizar o fluxo de trabalho de design
Objetivo: evitar perda de trabalho e ter um fluxo transparente.
Trabalhar em time de design traz seus próprios desafios. Guardávamos os arquivos no Dropbox, mas, quando o time começou a crescer, o risco de perder trabalho e o esforço para acompanhar mudanças aumentaram muito.
O time de design estava super aberto a mudar o fluxo e passamos a usar o Abstract. Ele nos permitiu versionar corretamente os designs, manter um fluxo transparente e ganhar mais confiança durante o processo criativo.
4. melhor documentação + onboarding
Objetivo: acelerar o onboarding e evitar excesso de comunicação.
Começamos a documentar nosso processo e o design system usando o Slite. Se precisamos explicar algo mais de uma vez, isso deve ser documentado e compartilhado com o time. Isso evita muito retrabalho de comunicação e impede que informações se percam.
5. design reviews
Objetivo: alinhar expectativas entre Design e Engenharia.
É importante que as design reviews aconteçam nos dois sentidos. Designers devem poder revisar o front-end, e o front-end também deve revisar o design. Designers têm aquela vontade de criar algo novo e incrível. Engenheiros precisam fazer perguntas difíceis, como: “Por que estamos criando algo customizado?”, “Não dá para reutilizar este componente?”, “Como podemos melhorar este componente?”, “Vale o esforço extra de desenvolvimento?”. É sobre justificar decisões e alinhar expectativas com todos os envolvidos.
Conclusão
Acabamos de começar a montar nosso design system e ainda estamos tentando organizar todos os componentes duplicados que encontramos no produto. Ainda há um bom caminho pela frente, mas, a cada componente que revisamos, criamos um produto melhor, mais consistente e mais fácil de aprender para nossos clientes.
Estamos curiosos para saber como outras organizações organizam seus design systems. Me mande um email se quiser compartilhar sua experiência.
Na DataCamp, estamos sempre em busca de talentos para o nosso time. Ficou interessado? Veja nossas vagas abertas.
