Amais Educação — Design System

Uma só linguagem entre produtos

O trabalho começou em março de 2022 com um objetivo claro: unificar a linguagem visual dos produtos e serviços da empresa, melhorando a experiência do usuário e tornando o desenvolvimento, a descoberta e a prototipação mais eficientes.

Uma fusão e um portfólio de produtos em crescimento tinham gerado inconsistências de navegação, visual e comunicação, que causavam atrito e uma curva de aprendizado mais íngreme para clientes e colaboradores.

O desafio

Precisávamos criar o sistema sem um time totalmente dedicado, atendendo às necessidades do negócio e dos clientes em vários produtos. Ele tinha que ser escalável, reutilizável, performático e mobile-first.

Os marcos de entrega orientaram as decisões sobre:

• estrutura do time
• adaptação das squads
• as mudanças necessárias para sustentar o sistema

Eles também deram visibilidade ao progresso do sistema em toda a empresa.

Construindo a biblioteca

Mapeamos telas de todos os produtos para encontrar e priorizar os componentes compartilhados que mais apareciam. Entregar esses primeiro permitiu atualizar mais interfaces enquanto os produtos continuavam no ar.

O Adobe XD foi usado para construir os componentes e compartilhá-los com os product designers, e o Storybook reuniu, para cada componente:

• diretrizes
• comportamentos
• anatomia
• código-fonte
• demonstrações

Fundamentos visuais

Botões e iconografia

Formulários e feedback

O sistema em uso

Créditos do projeto

Design system creditado a Thiago Tinoco. Publicado pela primeira vez no Behance em 8 de março de 2024.