Criando um Design System para a Nelogica

PT

Criando um Design System para a Nelogica

Nelogica

Entendendo o Desafio

A Nelogica é uma empresa com mais de 500 funcionários e grandes equipes funcionando em conjunto para a criação e gestão de produtos que alcançam todas as plataformas de tecnologia. O Design System (DS) tem o objetivo de criar pontes entre a equipe de UX/UI Design e Programação, e pensando nisso, a implementação foi em cima de um produto em fase inicial que atende ao mercado de criptomoedas.

Pesquisa

A oportunidade de implementar o sistema veio no momento de criação deste novo produto, no qual identifiquei que seria possível aprimorar a comunicação entre designers e desenvolvedores. Então comecei a estudar processos de criação, no qual fiz o curso de Design System da Meiuca e da Alura para entender como poderia ser aplicado o DS.

Durante os cursos, o que notei, foi que o processo de construção do Design System se assemelha bastante com o Double Diamond, que é um modelo de processo de design, no qual começamos descobrindo o problema em si e passamos por etapas de definição, desenvolvimento e entrega do produto. Pensando nessa estrutura, utilizei o método de construção criado pela Meiuca, que está representado na imagem abaixo e será abordado ao decorrer do artigo.

Introdução

Nessa etapa, o mais importante de tudo foi a definição do que é um Design System, que resumidamente, é um produto que ajuda a criar interfaces mais fácil e consistente, no qual contém um conjunto de estilos, componentes e regras que vão guiar o desenvolvimento das interfaces.

Outro ponto interessante é que nessa etapa já é comentado sobre os Design Tokens, que na programação chamamos de variáveis, que é um token com alguma identificação que recebe uma informação, o destaque aqui é que podemos trocar a informação do token e reutilizar ele.

Com esses dados, consegui enxergar os pontos que poderiam ser utilizados para justificar a construção do sistema, e entre eles foram: redução no tempo de criação e desenvolvimento de novas interfaces e melhora na comunicação entre as equipes de desenvolvimento e design.

Através do entendimento do funcionamento do produto, foi possível realizar um esboço de como o Design System iria gerir a aplicação, que insiste em construção e criação de novas funcionalidades primeiro para o DS e depois para as marcas que utilizam ele, como demostrado na imagem abaixo:

Com esse conhecimento sobre o que é, o funcionamento e a justificativa do porquê deveríamos investir na construção do Design System, consegui comunicar aos meus líderes sobre o impacto positivo que esse produto poderia trazer para as equipes, e os mesmos toparam o desafio.

Descobertas

Após a definição de algumas nomenclaturas e a proposta de valor do Design System, entramos na etapa de descobrir o produto, no qual foi necessário realizar um levantamento de todos os detalhes de estilo da interface como: cores, tipografia, espaçamento, arredondamento, etc. E nesse processo já foi possível perceber inconsistências na interface, como uma cor que tinha uma variação dependendo da interface do sistema e poderia gerar confusão nos usuários.

Foi necessário catalogar também os componentes, como por exemplo, um botão, inputs, modais, select, todo e qualquer artefato de design na interface. Esse catálogo foi necessário para que pudéssemos organizar e documentar, de modo a guiar os atuais e futuros designers da empresa, reduzindo assim a inconsistência no produto.

Definições

Com as reunião de informações através da descoberta do produto, iniciei o processo de definição do que era o correto a ser usado, foram feitos diversos testes, a fim de entender quais eram os estilos e componentes utilizados e quais eram os corretos, um dos processos mais interessantes foi a revisão das cores. Pensando na visibilidade e acessibilidade realizei o seguinte teste: na primeira etapa foi entender as cores do tema claro e escuro da interface e conseguimos eliminar 6 cores que não continham uma boa variação, e com isso, reduzimos algumas linhas de código, outro ponto a considerar é que nesse produto o usuário pode mudar as cores da interface, e também foi necessário um teste nessas cores e foi identificado que o amarelo não se comportava muito bem com o modo claro (Light Mode) da interface.

O que achei interessante foi que no lado de Design já tinhamos algumas iniciativas construídas por meio de um guia de estilo, e com os desenvolvedores existiam um reutilização do código. Então conseguimos reaproveitar muito do que já tinha para otimizar as definições do produto.

Na primeira etapa foi abordado sobre os design tokens e faz-se necessário definir eles, o mais importante é que seria necessário demostrar o que é esse token pelo seu nome, uma regra que utilizei foi o seguinte:

Dessa forma, quando um design e/ou desenvolvedor vesse um design token como: brand-primary-color, saber que ele se trata de uma cor primária da marca e já teria indícios de seu uso em seu nome.

Implementação

A última etapa do Design System foi necessário a documentação dos estilos e componentes do produto, sendo assim, criei um arquivo no Notion com todos os detalhes organizados:

Com essas informações documentadas, consegui tornar o acesso ao Design System mais democrático, pois após seu lançamento, qualquer colaborador poderia acessar e entender mais sobre os princípios que guiam a construção da interface do produto em questão. E com isso, foi possível traçar uma estratégia de implementação, no qual realizamos constantes reuniões com os desenvolvedores e outros designers para gerir o Design System.

Conclusão

Durante a construção do Design System foi possível realizar ajustes em nosso processo de Design, houve uma melhora significativa na comunicação com os desenvolvedores e encurtou o tempo de construção de novas interfaces, fazendo com que pudéssemos focar em ajustar detalhes para aprimorar ainda mais a experiência do usuário na interface.

Agradecimentos

Muito obrigado ao Bruno Caregnatto, que me auxiliou nesse projeto e conseguimos ter boas trocas que resultou em muito aprendizado. Também quero agradecer aos líderes Renan Paz e Roger Câmara que possibilitaram a criação deste projeto.

PT

EN

PT

EN