Construindo Design Systems inclusivos
E como trabalhar com isso me fez aprender mais sobre pessoas do que sobre componentes
Criar um sistema de componentes vai além de fabricar suas peças e promover seu uso no dia a dia. É sobre unir equipes ao redor de uma linguagem visual comum. Exatamente por serem tão transversais, Design Systems envolvem centenas de decisões difíceis. Aqui no QuintoAndar, facilitamos essa tomada de decisão ao focar em inclusão. Porém, isso não foi óbvio desde o princípio.
Quando começamos nosso trabalho no QuintoAndar, tínhamos apenas um arquivo de Sketch com nossos principais símbolos. Poucos estavam implementados no código e tinham regras documentadas. Era comum ver o mesmo componente sendo aplicado de diferentes maneiras, o que, além de ser um entrave para escalar o trabalho de design e engenharia, poderia comprometer nosso crescimento como startup.
Como nosso Design System nasceu
Apesar do nome, Design Systems não sobrevivem só com designers. No nosso contexto, o movimento de trazer ordem a casa começou pequeno, mas organicamente. A equipe de design se uniu com um projeto de organização dos símbolos no Sketch. Paralelamente, a equipe de engenharia montou um grupo com interesse em compartilhar os componentes que criavam.
Toda essa organização começou a provar valor para as equipes. Só que não adiantava as duas áreas resolverem seus problemas isoladamente, focando apenas em suas disciplinas. A partir de um diagnóstico geral, o time de Design Operations sugeriu a criação de um time multidisciplinar focado em construir o Cozy, nosso Design System.
Arrumando a casa
Parecia que formar uma equipe centralizada totalmente dedicada a implementar o Cozy era tudo que precisávamos para organizar interações entre plataformas e zelar pela consistência. Mapeamos todas as páginas dos produtos do QuintoAndar para destacar todas as inconsistências, de cores a interações. Em seguida, entrevistamos designers, desenvolvedores, gerentes de produto e os envolvemos em Design Critiques e rodadas de feedback no Slack. Depois dessa pesquisa, priorizamos o que mais fazia sentido para o nosso contexto e planejamos os lançamentos.
Novos desafios
Conseguimos padronizar alguns componentes; no entanto, nos deparamos com outros obstáculos:
- Nosso processo de componentização centralizado em uma equipe não era rápido o suficiente para atender à demanda das mais de 20 equipes;
- Tínhamos baixo engajamento e adoção dos componentes já padronizados, às vezes porque as equipes não ficavam sabendo que foi lançado ou porque não sabiam usar;
- Nossos componentes não estavam levando em consideração todos os aspectos de acessibilidade.
Mudando a estratégia
Aprendemos que nosso processo de decisão sobre componentes não deveria ser algo imposto (o famigerado top down). Não precisávamos fabricar um volume maior de componentes em alta velocidade, mas sim incluir mais pessoas nesse processo. Isso significa oferecer as ferramentas necessárias para que todos pudessem participar na construção de componentes (para conseguirmos volume e velocidade) e nas tomadas de decisão (para termos adoção e engajamento). Decidimos focar no seguinte desafio:
Como podemos empoderar as equipes de design e engenharia para que pensem sistemicamente e estrategicamente?
Quando falamos em inclusão, queríamos abranger tanto a parte de acessibilidade quanto a de colaboração e co-criação.
Tomamos 7 ações que nos ajudaram nessa jornada e esperamos que elas também possam ser aplicadas ao contexto de vocês:
1. Faça parcerias
Fizemos parcerias com as equipes para que elas pudessem propor e desenvolver novos componentes. Nessa parceria, acompanhávamos de perto a necessidade das equipes e ajudávamos a padronizar os componentes. Isso elevou a adoção e o engajamento do Cozy rapidamente, já que as equipes se sentiam parte da criação do Design System.
2. Alinhe combinados
Ao dar esse poder para diversas equipes, também alinhamos alguns combinados, ou seja, princípios e requisitos que devem ser seguidos ao projetar um componente para o Cozy. De início, o squad de Design System elencou os primeiros princípios, mas depois abrimos a discussão para os designers nos ajudarem a colocá-los em ordem de importância.
3. Pense em acessibilidade desde o começo
Um dos requisitos definidos em grupo foi acessibilidade. Neste ano, começamos um movimento para verificar o quanto nossa experiência estava acessível para todos. Percebemos que tínhamos muito o que melhorar, por isso criamos um grupo de estudos para pesquisar sobre esses tópicos e fomentar a discussão.
Chamamos pessoas com deficiência para conversar e entender quais eram as necessidades e dificuldades que enfrentavam ao tentar encontrar um lar e usar produtos digitais. Afinal, era a elas que a entrega final deveria atender.
4. Tenha pessoas com deficiência no time
Não queríamos apenas conversar e testar nossos produtos com pessoas com deficiência, queríamos que elas construíssem conosco e fizessem parte da nossa equipe.
É muito fácil projetar uma experiência excluindo algumas pessoas, mesmo sem perceber. O convívio com pessoas com deficiência no nosso dia a dia tornou indissociável acessibilidade e a prática de projeto. Ficou mais difícil esquecer de considerar todos.
Tem uma frase famosa usada pela comunidade de pessoas com deficiência que é:
“Tudo sobre a gente, nada sem a gente.”
Esses profissionais nos ajudam a respeitar os princípios de acessibilidade desde o nascimento de cada componente. Com a adoção do Design System pela maior parte dos nossos produtos, tornar toda nossa experiência acessível se tornou mais factível.
5. Ensine sobre acessibilidade, dando o exemplo
Não adianta tomar essas ações de tornar interfaces acessíveis isoladamente. Temos que ensinar as pessoas a pensar e aplicar acessibilidade.
Um dos botões que mais usados no nosso produto não passava no contraste mínimo de texto e fundo recomendado pela WCAG, não era fácil de ser lido por pessoas com dislexia e tinha área de toque pequena demais para dispositivos móveis.
Ao padronizarmos componentes respeitando as diretrizes da WCAG, conseguimos mostrar às equipes o que é preciso considerar ao projetar experiências acessíveis. Assim, o processo começa a ficar mais orgânico.
6. Dê espaço para a criatividade
Com todas essas regras e requisitos, é natural que haja um receio de que Design Systems possam limitar a criatividade dos designers. Queríamos endereçar isso, dando aos designers um lugar seguro para brincar. O nostálgico parquinho, que a gente brincava quando criança, hoje é um lugar no Cozy onde os designers podem testar variações malucas de um componente.
Em um arquivo do Sketch eles podem aplicar as variações em diversos contextos do produto (de B2B a aplicativos de corretores), para ver se faz sentido propor uma alteração no componente atual ou criar um novo. Quando o componente entra lá, as equipes também podem testá-lo e conferir se é útil para elas. Quando as discussões sobre o componente amadurecem e concluímos que realmente faz sentido implementar o componente no Design System, ele sai do parquinho.
7. Promova a comunicação
Comunicação é a parte mais difícil para fazer o Design System ser um sucesso. Mesmo com um site para documentar os componentes, ainda tínhamos dificuldade para todos ficarem sabendo das atualizações e novos componentes. Com uma equipe de mais de 40 designers é sempre difícil ter visibilidade de todas as deficiências do Cozy para cada squad. Por isso, criamos um programa de embaixadores: um designer de cada tribo fica responsável por levar as novidades do Cozy para os diversos squads da tribo e entender o contexto de cada squad para trazer para a gente.
Conquistas
Ainda temos muito trabalho pela frente, nem toda nossa jornada está totalmente acessível, mas já conseguimos conquistar algumas vitórias. Fomos de 77 variações de cores para 27, com regras de uso para cada uma. Reduzimos problemas de contraste, eliminamos dezenas de componentes legados e tornamos nossos componentes acessíveis para leitores de tela.
Nosso Design System tem trazido não só maior consistência para nossa experiência, mas também maior interação entre os designers e desenvolvedores nas discussões. Com isso, estamos construindo produtos mais robustos e preparados para as mudanças rápidas que uma startup precisa passar para se estabelecer.
Estabelecer um sistema de componentes é um trabalho contínuo que vai acompanhar todos os estágios de maturidade do produto. Cuidado para não gastar tanto tempo pensando e elaborando caminhos que podem nunca sair do papel, comece pequeno e engaje mais pessoas na missão!
Parte desse conteúdo foi apresentado no ILA 2019 com a Ana Cuentro, no ILA Redux e no Product Camp 2019 em São Paulo.
