Design System no Grupo Benner
Construir e manter a consistência no padrão visual, projetando com qualidade a boa experiência em diferentes soluções.
Contexto
Na Benner existem diversos produtos nas verticais ERP, Jurídico, Logística, RH e Saúde. Algumas soluções que eram desktop e vem sendo convertidas para Web, aplicativos mobile e microsserviços que são construído com APIs e suas integrações. Todos com a premissa de uma identidade visual única para todas as aplicações.
Desafio
Após uma decisão estratégica que a diretoria exigiu que todos os produtos de diferentes seguimentos tivessem integrações entre eles, surgiu a necessidade de projetar, atualizar e manter a consistência no padrão visual. Então começa o meu desafio de criar o Design System do Grupo Benner que é composto por Style Guide com a documentação visual, orientações de uso, boas práticas e princípios que guiam os designers e programadores no desenvolvimento das interfaces. Que além dos ganhos na produtividade interna, a maior vantagem é dos usuários estarem familiarizados com os componentes e conhecer o seu uso, melhorando na eficiência e sua experiência.
Processo
Primeiro me concentrei em analisar os diferentes elementos das interfaces já existentes, resultando o primeiro entregável que foi o inventário de UI. Classificando e reconhecendo todos os componentes, estilos e padrões usados. Aplicando o Atomic Design como método para entender as partes e agrupar os semelhantes, foi uma etapa importante para colocar a mão na massa, refletindo sobre os padrões usados e como poderia melhorar.
Na etapa de research, me reuni com programadores, analistas e com outros designers para entender com profundidade as dificuldades diárias do desenvolvimento, as suas dores e os desafios cotidianos. Isso ajudou a criar os princípios do Design System, sendo eles a clareza, escalabilidade, consistência e a qualidade.
Realizei o benchmarking para entender como outras empresas que passavam pelos mesmos problemas buscavam resolver tais questões. Analisei o cenário em que a empresa se encontrava, as perspectivas de crescimento dos times para definir os conteúdos e suas orientações. Além do planejamento de como disseminar os conhecimentos e garantir a sua aplicação no desenvolvimento dos produtos.
Problemas e oportunidades de melhorias
Alguns produtos utilizavam o MENU no topo na horizontal, o problema é quando se tem muitos itens no menu que acaba ocultando os itens, sendo necessário passar o mouse sobre o item mais para exibir na vertical.
Na nova definição o menu ficou posicionados ao lado esquerdo da tela na vertical. Melhorando na navegação, facilitando encontrar dentro dos grupos de categoria e seus subitens. Também foram ajustadas cores melhorando o contraste e aumentada a largura para melhorar o espaçamentos dos ícones e textos.
Posicionamento dos Botões
Antes alguns produtos utilizavam os botões alinhados à esquerda, impedindo um melhor posicionamento com cores e formatos sem padrão.
Com as mudanças os botões foram alinhados à direita na mesma altura dos títulos, melhorando o posicionamento e melhor uso dos espaços nas páginas. Também foram posicionados à direita os botões de ações dentro da lista de tabelas, tornando a leitura na ordem correta e deixando o processo mais eficiente. Outra mudança foi uma definição no formato dos botões e das cores primárias, secundárias, informativa e suas variações.
Formulários e seletores
Por padrão foi definido que os labels devem ficar posicionados no topo dos campos, pois na frente do campo eles ocupam mais espaço. Recomendei usar o comprimento do campo de acordo com a quantidade de caracteres. Também foram definidos os comportamentos dos elementos como ao selecionar o campo, campo obrigatório, seletores, placeholder, checkbox, radio button e switch.
Estrutura
Antes de desenhar os componentes eu defini a composição do Design System e os seus conteúdos. O guia de estilo com a documentação visual que incluiu a tipografia, ícones, cores e etc. As orientações de uso e recomendações de boas práticas. Biblioteca de componentes que inclui formulários, elementos, botões, grids e etc. Diretrizes da marca onde falei sobre o posicionamento da marca, como ela se comunica e os princípios. E a estrutura de CSS com os códigos para adicionar o estilo.
Styleguide
Defini a paleta de cores e suas variáveis, tipografia com o peso e tamanhos, seletores, componentes, alertas, brand, botões, campo de textos e outros elementos.
Organizei os componentes e suas variáveis, sendo possível alterar as propriedades do Figma de maneira simples, isso para ganhar na produtividade dos designers.
Estrutura de CSS com os códigos para os programadores Front-end aplicar os estilos.
Orientações de uso com recomendações do que fazer e o que não fazer com exemplo visual e explicativo.
Biblioteca de ícones | Font Awesome
Utilizando a versão PRO do Font Awesome com mais de 19mil opções de ícones e diferentes conjuntos nos estilos Duotone, Light, Regular, Solid, brands e Thin. Isso trouxe uma melhora significativa para o design, além da facilidade de encontrar no site da Font Awesome. Para alteração em escala, foi desenvolvida uma ferramenta que lê o código fonte e troca as classes e estilos.
Handoff
Junto com o time de desenvolvimento, defini e repassei o design tokens de cada componente, nosso principal objetivo foi estruturar o código para facilitar uma possível manutenção caso necessário, evitando assim um retrabalho.
Protótipo e validação
Evoluí visualmente as interfaces com referência do design system e realizei uma apresentação para a diretoria, arquitetos de tecnologia e algumas pessoas tomadoras de decisão. O objetivo foi coletar o feedback e ajustar os detalhes antes de realizar o lançamento.
Uma vez finalizado e hospedado no domínio certinho, o próximo passo foi realizar o lançamento com uma apresentação para todo o grupo Benner, foi explanado da importância e seus ganhos, depois foi passado um overview dos componentes do design system, explicando e tirando dúvidas.
Também ajudei no processo de atualização dos sistemas com os novos padrões do design system, esse acompanhamento foi necessário para solucionar os impactos.
Resultado
· Padronização e consistência nas interfaces dos produtos Benner, trazendo uma melhor experiência ao usuário;
· Ganhos financeiros no desenvolvimento do produto. Reduzindo a redundância de códigos, poupando até 20% do tempo de um designer e desenvolvedor. Proporcionando à equipe mais tempo para se dedicar em outras frentes;
· Agilizou o processo de análise através de referência concreta;
· Diminui a probabilidade de erros ou problemas de usabilidade;
· Maior sinergia entre as equipes de desenvolvimento;
· Escalabilidade de interfaces com constante atualização e evolução;
· Colaboração entre as squads na criação de novos componentes.
É extremamente importante entender que o Design System é um produto vivo e está constantemente em construção.
