Projeto
UI Component
Library Management
Ver mais
UI Component
Library Management
Empresa Printi
O projeto de UI Component Library Management foi essencial para resolver o cenário de desorganização e falta de manutenção no Design System. Ele trouxe foco à organização, manutenção e aprimoramento contínuo das bibliotecas de componentes reutilizáveis.
O problema
O produto Omega apresentava um Design System sem manutenção adequada e sem revisões regulares nos componentes para atender às necessidades de acessibilidade e do próprio produto. Além da falta de gestão dos componentes, havia um cenário de desalinhamento com a equipe de engenharia, resultando em inconsistências na construção, atrasos nas entregas e deficiências na interface do usuário (UI).
O processo de design para o projeto
O processo de design deste projeto seguiu um ciclo contínuo de revisão, avaliação e alinhamento com a equipe de engenharia. A cada etapa de revisão, o time de design implementava as alterações necessárias, realizando a entrega e avaliando com a equipe de engenharia. Como se tratava de um produto inserido em uma jornada de produção intensa, cada mudança na UI exigia um cuidado especial para garantir que não houvesse impacto negativo, tanto para os operadores quanto para o sistema.
O produto apresentava diversas variações do mesmo componente. Em colaboração com a equipe de engenharia, identificamos que não havia um padrão definido para os componentes do produto. Mesmo com um Design System em vigor, a organização visual estava comprometida, e o processo de handoff estava demorando mais do que o necessário.
Mapeando os problemas
Dentre as principais divergências identificadas, podemos destacar:
-
Variação de Tamanho: Componentes com dimensões inconsistentes para a mesma funcionalidade, gerando confusão e prejudicando a uniformidade no uso.
-
Componentes Divergentes: Elementos destinados à mesma ação, mas com designs diferentes, comprometendo a consistência da interface.
-
Cores: Uso despadronizado de cores, sem diretrizes claras para garantir consistência em diferentes contextos.
-
Alinhamento: Elementos desalinhados e com pesos visuais inadequados, afetando a hierarquia e a legibilidade da interface.
-
Estados: Aplicação incorreta dos estados dos botões, em contextos errados, o que gera confusão para o usuário.
-
Visibilidade: Problemas de acessibilidade em botões, comprometendo sua visibilidade e interação para usuários com diferentes necessidades.
-
Ausência de Documentação: Com o crescimento do produto e mudanças nas equipes, não havia documentação adequada, tanto de design quanto de engenharia, sobre o Design System anteriormente estabelecido.
Revisões e Avaliações
Além da revisão de todos os componentes, realizamos uma reavaliação completa do layout do sistema, buscando padronizar a interface para facilitar a integração de futuros projetos. Também revisamos os tokens e os botões, garantindo consistência e alinhamento com as diretrizes estabelecidas.
Métricas de Eficiência
Todos os elementos revisados foram encaminhados para o time de engenharia, que, com demandas menores, atualizava o sistema de forma contínua. Graças às entregas constantes, padronizações e à documentação detalhada criada pelo time de design, conseguimos alcançar resultados positivos em termos de desempenho, facilitando a entrega ágil e consistente de novos projetos.
Consistência de Produto
Garantimos a consistências na entregas e a consistência do produto.
Handoffs assertivos
Tanto os times de engenharia como de design mais alinhados e se aliamentando da mesma fonte de dados
Velocidade nas entregas
Comparado ao cenário anterior, ganhamos 5 horas de trabalho com o alinhamento e organização do design system.
os próximos passos...
Os próximos passos incluem monitorar a implementação das mudanças, fornecer treinamentos para equipes sobre o Design System revisado, e promover melhorias contínuas com base no feedback dos usuários e da equipe de engenharia. Também será necessário expandir a documentação, avaliar a performance do sistema e o tempo de entrega, além de planejar futuras atualizações para garantir que o sistema permaneça escalável, eficiente e alinhado com as necessidades do negócio.