• Responsabilidades - Discovery, Research, Prototipagem, Desenvolvimento
  • Ferramentas usadas - Figma, React
  • Tempo - 5 meses

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: P√°gina de componentes no site

Tipografia: P√°gina de componentes no site

Estado dos bot√Ķes: P√°gina de componentes no site

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.

@2023 Laís Cavalcanti