Daniela Cit Werle

Resultados

Mesmo sem a implementação completa, o Design System já trouxe benefícios para o meu dia-a-dia. A criação de telas se tornou muito mais rápida ao utilizar os componentes do DS, além de garantir mais consistência. Espero que após implementado, o Vigga otimize as entregas da time de desenvolvimento e diminua a frequência das tarefas de ajustes.

Até o momento, os principais ganhos incluem:

Maior padronização nos projetos;
Otimização do tempo de criação de novas telas;
Única fonte de verdade;
Handoff e comunicação mais eficientes com os devs.

Aprendizados

Com o crescimento dos produtos digitais da empresa, percebemos a necessidade de otimizar e principalmente padronizar nosso trabalho. E, como a única UX no time, posso dizer que foi um desafio e tanto tirar esse projeto do papel.

Ao longo de 3 meses, aprendi a importância da organização, evoluí muito no Figma (pode vir qualquer atualização que eu tô preparada!), desenvolvi mais ainda minha escrita, pensando em deixar o mais claro possível os guias de uso e documentação dos componentes e o mais importante, aprendi que está tudo bem errar, afinal é assim que a gente aprende!

Quanto aos próximos passos:

Atualizar os produtos já existentes com os novos componentes;
Realizar testes com as telas atualizadas;
Coletar feedbacks (time e usuários) sobre o funcionamento do DS;
Criar guia de uso para todos os componentes;
Aprofundar o guia de acessibilidade;
Continuar a aprimorar o DS conforme a necessidade dos produtos e dos usuários.

Outros projetos

FuraFilla

Minha Pegada

Documentação

Desde o começo, estava muito claro para mim que o DS não podia ser só um arquivo a mais no Figma, com uma lista de componentes. É preciso que ele seja acessível e que outras pessoas, sejam UX ou dev, consigam entender e aplicar nos produtos.

Com isso, cada componente conta com:

Explicação de como e quando usar o componente, em quais produtos ele geralmente é usado;
Diretrizes de acessibilidade e boas práticas;
Protótipos interativos para componentes mais complexos;
Explicação e uso de cada variante.

Guia de uso dos cards.

Guia de uso dos ícones.

Prototipação

Na etapa de prototipação, desenvolvi os componentes com o Design Atômico em mente, começando pelas partes indivisíveis (os átomos) e seguindo para componentes mais complexos.

Posso dizer que aqui já senti muita diferença! Na hora de criar um card, por exemplo, já tive um gostinho do que é ter um DS organizado e funcional, pois todos os itens que eu precisava (como tags, textos e espaçamentos) estavam disponíveis e tinham todas as variáveis que eu precisava naquele momento.

Primário

Secundário

Texto

Right Icon

Left icon

Enabled

Button text

Disabled

Button text

Hover

Button text

Focused

Button text

Exemplo de componente e suas variáveis.

Acessibilidade

Sou uma entusiasta do tema e, ao criar um DS do zero, vi uma grande oportunidade para inserir boas práticas de acessibilidade desde o início da concepção. Nesta primeira etapa, foram levados em consideração os seguintes itens:

Contraste: todas as cores do styleguide foram testadas para obedecer as diretrizes de contraste do WCAG;
Tipografia: foi feita a troca da fonte Poppins pela Nunito, pensando numa melhor legibilidade, assim como um cuidado na hora de escolher os tamanhos da fonte;
Consistência: manter a nossa interface consistente entre si e também com correspondência ao mundo real;
Documentação: exemplos de boas práticas de acessibilidade na documentação

Todas as cores atendem ao mínimo exigido nas diretrizes de acessibilidade do WCAG.

Foi realizado também o teste para legibilidade da fonte dos produtos, utilizando alguns caracteres que geralmente podem ser confundidos (principalmente para fontes sem serifa):

Poppins

0 O o a -> 0 boa

Na fonte Poppins, utilizada nos nossos produtos, alguns caracteres podem facilmente ser confundidos, como as letras O e A minúsculas e L minúscula e I maiúscula.

Nunito

0 O o a -> 0 boa

Já na fonte Nunito, a diferença entre essas letras é mais pronunciada, evitando a confusão.

Alguns testes de acessibilidade que realizei durante a auditoria.

Aqui ainda há muita coisa a ser feita, mas acredito que com a base criada já seguindo essas boas práticas, a tendência é que nosso design se torne mais inclusivo e que impulsione o time a seguir com essa missão.

O intuito é ter também um guia de acessibilidade para todos os componentes.

Processo

Revisão do styleguide e dos componentes nos produtos

Um dos principais pontos de dor do nosso time era a inconsistência entre o design no Figma e o que estava no produto em produção, resultando em incontáveis ajustes. Para verificar esse problema, foi feita a revisão dos componentes e itens do styleguide assim como dos produtos digitais (figma e produção), procurando inconsistências.

Com a auditoria, foram encontradas:

Diferenças de cores e tamanhos de fonte;
Estilos variados para o mesmo tipo de componente;
Itens que não atendiam às diretrizes de acessibilidade.

Cores

Texto

Encontrei componentes com cores e padrões diferentes (que tinham a mesma função) e até com cores que não constavam no styleguide, como é o exemplo das nossas tags:

Textos inconsistentes com o styleguide, devido à necessidade de outros tamanhos de fontes nos produtos.

Algumas tags seguiam o padrão (cor de fundo = cor do texto), já outras tinham o texto em cinza.

Tínhamos também diversos tons e até a tipografia diferente.

Vermelho

Entrega não finalizada

Interrompida

Com divergência

Corretiva não identificado

Rosa

Retirada

retirada

Solicitação recebida

Azul

Cód. 999999

Nome do funcionário

Sol. Manutenção

Laranja

Não atribuída

Saiu para destino

Coleta

Cinza

Escada

Finalizada

Verde

Entrega finalizada

Iniciada

Algumas cores, quando utilizadas como fundo das cores principais de texto (#1F292E e #FFFFFF), não atendiam a proporção mínima de contraste (4.5:1) determinada nos Critérios de Sucesso 1.4.3 e 1.4.11 do WCAG:

teste

4.44:1

3.34:1

4.46:1

3.32:1

Alguns exemplos dos itens que analisei durante a auditoria.

Reconhecimento dos padrões já utilizados

Como um dos principais objetivos era evitar trabalho a mais por parte do time, busquei reconhecer todos os padrões já utilizados, comparando os produtos e catalogando seus principais componentes a fim de:

Evitar criar um componente totalmente novo: tive que considerar que é um design system de uma empresa que já tinha seus produtos rodando. Não seria interessante nem para o time e nem para os usuários mudar todo o layout;
Entender o padrão para os componentes que seriam feitos do zero: estamos buscando consistência, então todos deveriam seguir os mesmos estilos.

Vigga Design System

Contexto

A CdC é uma empresa de aluguel de equipamentos de construção que possui produtos digitais voltados tanto para as franquias quanto para a própria franqueadora. Com o crescimento desses produtos, surgiu a necessidade de um Design System, para otimizar o tempo de desenvolvimento e manter a consistência entre os produtos.

Função: Product Designer

Duração: Agosto a novembro/2024

Ferramentas: Figma

Empresa: Aluguel de equipamentos de construção

Problema

Quando iniciei na empresa, existia styleguide com definições de cores, tipografia, estilos de sombra e arredondamento e alguns componentes, que seguiam o Material UI. No entanto, ao longo do tempo, novos componentes foram criados diretamente nos arquivos dos produtos, sem documentação e, muitas vezes, sem componentização.

Com isso, um novo projeto era feito praticamente do zero, aumentando a inconsistência entre o design no Figma e os produtos em produção, além do styleguide que deixou de ser atualizado.

Como consequência, fomos acumulando:

Falta de padronização entre os produtos;
Inconsistências entre o front e os produtos no Figma;
Inconsistências entre os projetos, dificultando a escalabilidade.

Desafio

O principal desafio desse projeto foi conciliar o desenvolvimento do Design System com outras demandas que surgiam ao longo do tempo, já que eu era a única UX da equipe. Precisei pensar de forma estratégica para entregar os principais componentes para essa primeira versão, assim como formas de reutilizar elementos já existentes, garantindo qualidade e escalabilidade.

Além disso, por limitações de tempo e recursos, não foi possível realizar pesquisas com usuários reais e os alinhamentos foram feitos somente com o stakeholder e desenvolvedores. Com isso, as decisões de design precisavam atender às necessidades do time, mas sem perder o foco nas boas práticas de usabilidade e acessibilidade.

Benefícios da implementação do DS

Única fonte de verdade: centralizando componentes, padrões e estilos, tanto para os desenvolvedores quanto para os UX;
Facilidade de atualização: mudanças podem ser implementadas de forma segura e escalável;
Otimização no trabalho do UX: não há mais a necessidade de inventar a roda. Com isso, o UX pode focar em problemas mais complexos e na funcionalidade do produto;
Otimização do tempo: redução no tempo de desenvolvimento;
Padronização e consistência: menos ajustes entre design e desenvolvimento.

Home

Sobre

Currículo

Vigga Design System

Contexto

Função: Product Designer

Duração: Agosto a novembro/2024

Ferramentas: Figma,

Empresa: Aluguel de equipamentos de construção

Problema

Com isso, um novo projeto era feito praticamente do zero, aumentando a inconsistência entre o design no Figma e os produtos em produção, além do styleguide que deixou de ser atualizado.

Como consequência, fomos acumulando:

Falta de padronização entre os produtos;
Inconsistências entre o front e os produtos no Figma;
Inconsistências entre os projetos, dificultando a escalabilidade.

Desafio

O principal desafio desse projeto foi conciliar o desenvolvimento do Design System com outras a demandas que surgiam ao longo do tempo, já que eu era a única UX da equipe. Precisei pensar de forma estratégica para entregar os principais componentes para essa primeira versão, assim como formas de reutilizar elementos já existentes, garantindo qualidade e escalabilidade.

Além disso, por limitações de tempo e recursos, não foi possível realizar pesquisas com usuários reias e os alinhamentos foram feitos somente com o stakeholder e desenvolvedores. Com isso, as decisões de design precisavam atender às necessidades do time, mas sem perder o foco nas boas práticas de usabilidade e acessibilidade.

Benefícios da implementação do DS

Única fonte de verdade: centralizando componentes, padrões e estilos, tanto para os desenvolvedores quanto para os UX;
Facilidade de atualização: mudanças podem ser implementadas de forma segura e escalável;
Otimização no trabalho do UX: não há mais a necessidade de inventar a roda. Com isso, o UX pode focar em problemas mais complexos e na funcionalidade do produto;
Otimização do tempo: redução no tempo de desenvolvimento;
Padronização e consistência: Menos ajustes entre design e desenvolvimento.

Processo

Revisão do styleguide e dos componentes nos produtos

Com a auditoria, foram encontradas:

Diferenças de cores e tamanhos de fonte;
Estilos variados para o mesmo tipo de componente;
Falta de aderência a critérios básicos de acessibilidade.

Cores

Texto

Encontrei componentes com cores e padrões diferentes (que tinham a mesma função) e até com cores que não constavam no styleguide, como é o exemplo das nossas tags:

Textos inconsistentes com o styleguide, devido à necessidade de outros tamanhos de fontes nos produtos.

Algumas tags seguiam o padrão (cor de fundo = cor do texto), já outras tinham o texto em cinza.

Tínhamos também diversos tons e até a tipografia diferente.

Vermelho

Entrega não finalizada

Interrompida

Com divergência

Corretiva não identificado

Rosa

Retirada

retirada

Solicitação recebida

Azul

Cód. 999999

Nome do funcionário

Sol. Manutenção

Laranja

Não atribuída

Saiu para destino

Coleta

Cinza

Escada

Finalizada

Verde

Entrega finalizada

Iniciada

teste

4.44:1

3.34:1

4.46:1

3.32:1

Alguns exemplos dos itens que analisei durante a auditoria.

Reconhecimento dos padrões já utilizados

Evitar criar um componente totalmente novo: tive que considerar que é um design system de uma empresa que já tinha seus produtos rodando. Não seria interessante nem para o time e nem para os usuários mudar todo o layout;
Entender o padrão para os componentes que seriam feitos do zero: estamos buscando consistência, então todos deveriam seguir os mesmos estilos.

Prototipação

Na etapa de prototipação, desenvolvi os componentes com o Design Atômico em mente, começando pelas partes indivisíveis (os átomos) e seguindo para componentes mais complexos.

Posso dizer que aqui já senti muita diferença! Na hora de criar um card, por exemplo, já tive um gostinho do que é ter um DS organizado e funcional, pois todos os itens que eu precisava (desde tags, textos e espaçamentos) estavam disponíveis e tinham todas as variáveis que eu precisava naquele momento.

Primário

Secundário

Texto

Right Icon

Left icon

Enabled

Button text

Disabled

Button text

Hover

Button text

Focused

Button text

Exemplo de componente e suas variáveis.

Acessibilidade

Contraste: todas as cores do styleguide foram testadas para obedecer as diretrizes de contraste do WCAG;
Tipografia: foi feita a troca da fonte Poppins pela Nunito, pensando numa melhor legibilidade, assim como um cuidado na hora de escolher os tamanhos da fonte;
Consistência: busca para manter a nossa interface consistente entre si e também com correspondência ao mundo real;
Documentação: exemplos de boas práticas de acessibilidade na documentação, como o uso de textos junto com ícones

Todas as cores atendem ao mínimo exigido nas diretrizes de acessibilidade do WCAG.

Foi realizado também o teste para legibilidade da fonte dos produtos, utilizando alguns caracteres que geralmente podem ser confundidos (principalmente para fontes sem serifa):

Poppins

0 O o a -> 0 boa

Na fonte Poppins, utilizada nos nossos produtos, alguns caracteres podem facilmente ser confundidos, como as letras O e A minúsculas e L minúscula e I maiúscula.

Nunito

0 O o a -> 0 boa

Já na fonte Nunito, a diferença entre essas letras é mais pronunciada, evitando a confusão.

Alguns testes de acessibilidade que realizei durante a auditoria.

Documentação

Com isso, cada componente conta com:

Explicação de como e quando usar o componente, em quais produtos ele geralmente é usado;
Diretrizes de acessibilidade e boas práticas;
Protótipos interativos para componentes mais complexos;
Explicação e uso de cada variante.

Guia de uso dos cards.

Guia de uso dos ícones.

Resultados

Até o momento, os principais ganhos incluem:

Maior padronização nos projetos;
Otimização do tempo de criação;
Única fonte de verdade;
Handoff e comunicação mais eficientes com os devs.

Aprendizados

Ao longo de 3 meses, aprendi a importância da organização, evoluí muito no Figma (pode vir qualquer atualização do figma que eu tô preparada!), desenvolvi mais ainda minha escrita, pensando em deixar o mais claro possível os guias de uso e documentação dos componentes e o mais importante, aprendi que está tudo bem errar, afinal é assim que a gente aprende!

Quanto aos próximos passos