Cultivando Design Systems no Grupo Boticário
Flora¹:
- O reino ou a vida vegetal.
- [BOT] Conjunto de todas as espécies que caracterizam a vegetação de um país ou região, uma época, ou determinado meio ambiente.
- [POR EXT] Conjunto de todas as plantas usadas para um fim específico.
- [BIBL], [BOT] Tratado descritivo ou trabalho científico que descreve ou analisa as espécies vegetais de determinado período, meio ambiente ou região.
Posso ter começado de forma curiosa, mas este é sim um artigo sobre Design Systems(DS). Mais especificamente sobre a construção, aplicação e sustentação do Design System do Grupo Boticário.
Acredito que nossa história com DS começa como a de diversas outras empresas: um grupo de pessoas designers e desenvolvedoras apaixonadas pela construção de interfaces se une para debater o tema pois acredita no potencial de otimização entregue pela ferramenta. Após diversos fóruns, definem que é possível construir componentes reutilizáveis e uma biblioteca para catalogá-los em paralelo às demandas das squads. O Design System ganha um nome, representantes, canais no slack e agenda recorrente. Com o tempo, essas pessoas percebem evolução, porém entendem que não conseguem dar a devida prioridade ao tema, o que leva a iniciativas de evangelização da pauta junto à liderança. É nesse momento que Design Systems nascem ou morrem.
Aqui, no Grupo Boticário, essas pessoas apaixonadas têm a sorte de trabalhar com líderes que acreditam em formas melhores de desenvolvimento, no potencial de retorno financeiro de um Design System e estão dispostos a apostar em seus times. Assim, o Flora ganhou um time dedicado à sua evolução.
Por que Flora?
Retornando à definição do dicionário, a flora é a representação do conjunto de espécies vegetais características de determinada área, época ou meio ambiente e, assim como o Design System, é um sistema. Ou seja, todos os elementos de uma flora estão conectados, são dependentes entre si e desempenham funções distintas responsáveis pela manutenção do todo.
Flores são incumbidas da reprodução e mantêm o sistema em constante crescimento. Folhas são encarregadas da respiração e geram energia através da fotossíntese. Raízes são responsáveis pela absorção de água e nutrientes do solo, mas ao mesmo tempo o protegem da erosão.
A flora varia de acordo com o clima e localização. Em ambientes frios, ela apresenta comportamentos e estruturas dedicadas à proteção térmica. Em locais quentes, manifesta órgãos específicos para a absorção de líquidos e armazenamento de água.
Já em um Design System, tokens, tipografia, botões e outros elementos interativos são exemplos de estruturas comuns em diferentes plataformas, que possuem funções específicas mas que necessitam de representações únicas dependendo do cenário no qual são vistos.
Estes diferentes componentes de uma flora, suas funções e suas manifestações em diferentes cenários representam analogias para a construção do nosso Design System e seus pilares, a construção da nossa Flora.
Principais desafios
O panorama tecnológico do Grupo Boticário é muito maior e complexo do que as pessoas se dão conta. Além da já conhecida operação de e-commerce² das diversas marcas, a vice-presidência de Tecnologia é responsável pela criação e sustentação de produtos digitais voltados para venda direta, produtos financeiros, operação de franquias, backoffices, marketplace, sistemas internos para os colaboradores e diversas outras cadeias de valor. Desenvolvemos desde o bot que realiza atendimentos pelo whatsapp até o painel de comando utilizado pelos proprietários de grandes franquias.
Mais do que uma prova do volume de times atuando nos produtos do grupo, a abrangência deste cenário é a representação da diversidade de clientes que utilizam diariamente nossas plataformas. Pessoas que possuem experiências, necessidades e níveis de digitalização completamente diferentes. Em um meio tão diverso, é parte do desafio do Flora considerar estes contextos na criação de cada componente para que botões, campos de formulário, menus ou carrosséis preencham todos os requisitos de acessibilidade, carregamento e usabilidade, refletindo visualmente a qualidade que o Grupo Boticário preza em todas as suas marcas.
Outro grande desafio está em sua disseminação. O volume de times, cenários tecnológicos e produtos legados representam obstáculos no ganho de consistência entre experiências. É preciso que os benefícios da aplicação do Design System sejam significativamente maiores do que continuar em uma metodologia de desenvolvimento padrão e é necessário um grande volume de componentes prontos para que uma migração seja viável. Aqui no GB, acreditamos que a melhor maneira de superar esse desafio é através de uma governança estruturada que permite que qualquer pessoa contribua com o Design System.
Governança
Todo Product Designer e Dev é especialista no contexto de sua squad. São essas pessoas que vivem diariamente as dores de clientes de seu produto e, portanto, são as mais preparadas para propor soluções efetivas. É com essa perspectiva que orquestramos as contribuições feitas ao DS e dividimos nossos componentes em 3 bibliotecas:
Core Components
Contêm tudo que é primitivo e altamente replicável. Nesta biblioteca estão todas as pequenas peças que podem ser utilizadas para construção de qualquer interface como: botões, campos de input, tabs e acordeons. Estas pequenas peças genéricas são construídas e mantidas exclusivamente pelo time Flora.
Team Components
Biblioteca de adição e edição livre para todos os times. Utilizando o que existe em Core Components, Product Designers e Devs podem construir componentes mais complexos e disponibilizá-los para que outros times possam reaproveitá-los.
Não encontrou o DatePicker na biblioteca disponibilizada pelo time Flora? Não tem problema. Utilizando os tokens de cor e texto somados a componentes de popover e button é possível criar um DatePicker perfeito para seu contexto. Ao manter este DatePicker disponível, outro time pode reaproveitá-lo ou até mesmo utilizá-lo como base para criação de um DatePicker ligeiramente diferente que possa atender seu cenário específico. Com o passar do tempo, esses componentes similares, mas que resolvem problemas diferentes, se tornam candidatos para a próxima fase do pipe.
Shared Components
Biblioteca de componentes complexos, testados e de alta maturidade. Quando diversas aplicações de um mesmo componente ocorrem, como no exemplo do DatePicker, o time Flora identifica a necessidade de consolidação deste padrão. Considerando os diferentes cenários de aplicação já existentes e aplicações de mercado, é criado um novo componente versátil o suficiente para utilização em todos os cenários anteriores que atenda aos requisitos de acessibilidade, carregamento e usabilidade estabelecidos.
Novos Team Components podem surgir para desafiar padrões consolidados ou para contribuir com eles. Esse processo iterativo permite a evolução constante da experiência proporcionada pelo Flora.
Conclusão
Vejo o Design System como um produto de complexidade tripla, desenvolvido tanto para clientes finais quanto para Product Designers e pessoas desenvolvedoras. Um input precisa apresentar todos os feedbacks possíveis para que exista clareza em fluxos de cadastro e considerar também leitores de tela. Deve ser compacto para garantir um bom aproveitamento de espaço enquanto é grande o suficiente para que não ocorram cliques acidentais, bem como apresentar um visual apelativo, consistente com os demais elementos do sistema, que reflita a qualidade dos produtos do grupo passando a sensação de segurança necessária para que dados sensíveis sejam compartilhados. Na biblioteca, precisa também de uma documentação robusta para que Product Designers tenham clareza dos diferentes cenários de aplicação reforçando a necessidade da construção de textos de feedback claros que orientem pessoas usuárias à resolução do erro. Por fim, é necessário registrar Props e demais APIs para que Devs sejam eficientes em sua aplicação.
O Flora ainda não atingiu sua maturidade final e precisamos evoluir para entregar tudo que prometemos. Mas essa é a diversão de se construir um produto, sobretudo um que é feito para utilização de nossos colegas e onde os feedbacks chegam constantemente. A organização de times internos pode mudar, assim como o contexto de clientes, porém acreditamos que nossos valores e estratégias de contribuição livre e alto padrão de qualidade são as corretas para que objetivos sejam alcançados.
Encerro aqui agradecendo o time de Design Ops. Agnes, Edu, Frank, Juliana, Lis, Marcos, Mylane e Otávio, sem vocês o Flora não seria o que é hoje e seria uma injustiça da minha parte não citá-los. Obrigado!
Gostou do texto e quer saber mais sobre o Flora ou time de UX do Grupo Boticário? Envie seu email aqui! Buscamos cada vez mais dividir nosso conhecimento e estamos sempre procurando pessoas que queiram fazer beleza em nosso time, seja como Researcher, Writer, Dev ou Product Designer. Venha ajudar a gente aplicando ou construindo Design Systems. 😉
1. Definição do Dicionário Brasileiro de Língua Portuguesa Michaelis
2. Boticário, Beleza na Web, Eudora, Quem disse berenice?, Beautybox e Vult.
