Sobre o projeto
O desafio era estruturar um Design System capaz de sustentar a experiência do produto de forma consistente e escalável, garantindo uniformidade visual, acessibilidade e flexibilidade para acompanhar sua evolução.
Por ser um projeto sob NDA, alguns dados e elementos das telas foram alterados para apresentação.
Background
Antes do projeto, a empresa operava sem um Design System, o que gerava interfaces inconsistentes, decisões visuais repetidas e retrabalhos constantes.
Com a plataforma em expansão, tornou-se necessário criar uma base única que trouxesse clareza, organização e identidade à interface.
Processo
Todos os componentes existentes foram mapeados e analisados, permitindo identificar inconsistências estruturais, visuais e funcionais que impactavam a padronização e a escalabilidade da interface.
Migração do Adobe XD para o Figma
A migração da base de design do Adobe XD para o Figma foi realizada para centralizar os arquivos, facilitar colaboração entre times e suportar a criação e manutenção do Design System de forma mais escalável.
Heurísticas e Vieses
Usei heurísticas de usabilidade para identificar pontos de melhoria e deixar a experiência mais fácil. Também levei em conta alguns vieses cognitivos para facilitar a compreensão e tornar as interações mais intuitivas para o usuário.
Criação dos componentes
Padronizei e construí os principais componentes da interface, definindo variantes, estados e regras de uso para garantir consistência e reutilização ao longo do produto.
Tokens
Estruturei os tokens de cor, tipografia, espaçamento e sombras, criando uma base reutilizável e escalável para todos os componentes da interface.
Light e Dark Mode
Desenvolvi as versões clara e escura do sistema, ajustando cores e contrastes para garantir legibilidade e consistência visual em diferentes contextos de uso.
Acessibilidade
Ajustei cores, tamanhos e comportamentos dos componentes para atender boas práticas de acessibilidade, garantindo melhor legibilidade e usabilidade para diferentes perfis de usuários.
Resultados
A implementação do Design System trouxe melhorias imediatas na consistência visual da interface e na eficiência do fluxo de trabalho do time.
Com padrões definidos e componentes reutilizáveis, o desenvolvimento de novas telas se tornou mais previsível e organizado, permitindo evolução contínua do produto.
Consistência
Maior consistência visual entre as telas por meio de padrões e componentes unificados.
Eficiência
Redução de retrabalho entre as equipes com o uso de componentes reutilizáveis.
Escalabilidade
Criação de uma base sólida e confiável que permite evoluir o sistema de forma consistente conforme novas necessidades surgem.