Style Guide

Trabalhei ao longo de 5 meses num projeto em que estava alocada como Designer UX para um produto digital que tem o objetivo de automatizar processos. O projeto já existia, tinha clientes utilizando, mas a interface estava despadronizada e não se alinhava com o produto em si.

Com isso, fizemos novos benchmarks, pesquisas de mercado e pesquisas focadas no perfil de cliente, além de uma imersão com stakeholders e equipe de vendas para a definição de uma nova experiência de usabilidade.

Ao longo do projeto percebemos a necessidade de criar um style guide para que o produto tivesse unidade e uniformidade a fim de minimizar inconsistência na experiência visual, de usabilidade e de acessibilidade.

Começamos com a revisão da usabilidade atual, analisando o que seria mantido e o que não. Nesse caminho, fizemos uma varredura em toda plataforma, repensando pontos como fonte, cores, acessibilidade, modificações de componentes, etc.

Recriamos todos os estilos no figma e começamos a testar novos baseados em nossa pesquisa. Mas o Figma é um software voltado para profissionais da usabilidade. Desenvolvedores front-end que precisam atualizar e criar os estilos muitas vezes acessam o Figma, mas nem sempre os estilos CSS são fidedignos à imagem e podem gerar algumas confusões.

Daí surgiu a iniciativa de criar um style guide focado no time de desenvolvedores, com intuito de levar os estilos do figma traduzidos para o CSS. Isso foi possível pelo meu conhecimento em programação front-end. Criei uma plataforma onde pude condensar todos esses estilos. Utilizei ferramentas como GatsbyJS, Marckdown e GraphQL para construir o site.

Alguns exemplos de estilos e componentes do style guide:

Cores:

Tipografia:

Estado dos botões:

O ganho desse projeto está na otimização de tornar esses componentes e estilos padronizados para tornar a interface coesa e uma experiência positiva.

Informações sensíveis do projeto e da empresa foram omitidas nesse case.