Criando um Design System

Elaborando um Design System escalável e estratégico para manter consistência do produto.

22/04/2024

• 2 min

ATUAÇÃO

UX/UI Designer

TIMELINE

2023 - 2024

RESPONSABILIDADES

• Definição, criação e manutenção do DS

EQUIPE

in/julianarib

OVERVIEW

A empresa estava em meio a uma reestruturação de identidade visual e buscava alinhar seu produto com o novo estilo proposto, caracterizado por elegância, minimalismo, modernidade e tecnologia. Era essencial que a plataforma se destacasse dos concorrentes, os quais mantinham um design arcaico e estruturas complexas para os usuários.

PRINCIPAIS DESAFIOS

Projetos anteriores foram desenvolvidos no Adobe XD;
Falta de componentização e organização nos arquivos, tornando difícil compreender o comportamento da plataforma e identificar as necessidades para a criação de componentes no novo Design System.
Questões de falta de acessibilidade foram identificadas, além de inconsistência de cores, fontes e espaçamentos não definidos.

REALIZAÇÕES

Implementação de uma biblioteca com diversos componentes criados.

Desenvolvimento cuidadoso de estilos de texto para serem aplicados em toda a plataforma.

Utilização de ícones do Material Design para representar a variedade de temas abordados pela empresa.

Aumento na produtividade do time e diminuição do tempo de desenvolvimento de projetos.

Criação da versão Light e Dark mode de todo os componentes utilizando variáveis

Seleção de cores considerando a identidade visual da empresa e acessibilidade

HEURÍSTICAS E VIESES

Utilizados na criação do DS

Heurística Visibilidade do status do sistema: Criação de padrões de alertas/insights para a plataforma. Além de indicadores de status de sensores como: ativos, desligados, em alerta ou offline.

Viés ‘Efeito Estético na Usabilidade’: Utilizando também a heurística do minimalismo por causa da tendência das pessoas em perceberem objetos esteticamente agradáveis como sendo mais fáceis de usar e mais eficazes.

Viés ‘Modelo mental’: Ao projetar um design system, é essencial alinhar representações simplificadas do mundo com as expectativas dos usuários para garantir uma experiência intuitiva e coesa, evitando frustrações por interações inconsistentes.

Heurística de Prevenção de Erros: Aplicado principalmente em modais no design system, ajudando a garantir que os usuários possam interagir com segurança e eficiência, minimizando a ocorrência de erros e facilitando sua recuperação, caso ocorram.

CONCLUSÃO

A implementação de um design system na nossa empresa foi crucial para promover a consistência e eficiência no desenvolvimento de produtos digitais. Estabelecemos padrões unificados que garantiram uma experiência do usuário coesa e facilitaram a colaboração entre equipes, reduzindo retrabalho e acelerando a criação. Isso resultou em economias de tempo e custo, além de um produto final de maior qualidade. Em resumo, o design system foi um investimento estratégico que melhorou a inovação, escalabilidade e competitividade da nossa empresa.