Imagem ilustrativa por causa de contrato de confidencialidade assinado com a empresa que o design system foi feito.
Projeto
Design System:
Alinhando produto à nova identidade visual da empresa
Elaborando um Design System escalável e estratégico para manter consistência do produto e agilidade na produção de novos projetos.
DESAFIO
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.
Projetos anteriores foram desenvolvidos no Adobe XD, enquanto os projetos atuais são criados no Figma.
Falta de componentização dos elementos usados nos projetos antigos
A desorganização nos arquivos dificultou no entendimento do comportamento da plataforma e identificação das necessidades para criação de componentes
Foram identificadas questões de falta de acessibilidade, além de inconsistências em cores, fontes e espaçamentos.
O QUE
OBSERVAMOS
REALIZAÇÕES
Implementação de uma biblioteca com diversos componentes criados.
Aumento na produtividade do time e diminuição do tempo de desenvolvimento de projetos.
Desenvolvimento cuidadoso de estilos de texto para serem aplicados em toda a plataforma.
Criação da versão Light e Dark mode de todo os componentes utilizando variáveis
Utilização de ícones do Material Design para representar a ampla variedade de temas abordados pela empresa.
Seleção de cores considerando a identidade visual da empresa e acessibilidade
HEURÍSTICAS E VIESES
Usados para idealizaçã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 ‘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.
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.
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.