Construindo o Design System Carto

Na Loggi, tive a oportunidade de participar de um projeto fundamental para a empresa: a criação do Design System "Carto". Meu papel como Designer de Produto foi crucial para o desenvolvimento desse sistema, cujo objetivo era garantir uma experiência coerente entre todos os produtos digitais da Loggi.

Contexto

O desafio principal que enfrentamos foi a falta de uma visão de experiência unificada entre nossos produtos. Existiam problemas claros de inconsistência, e os processos entre design e engenharia precisavam ser padronizados. Para resolver isso, o Design System "Carto" foi idealizado para proporcionar experiências consistentes, estabelecer padrões semânticos de design e otimizar a colaboração entre design e engenharia.

Desenvolvimento

Nossa abordagem começou com uma fase de pesquisa e alinhamento, onde identificamos os problemas e definimos a visão do design system. Em seguida, passamos para o desenvolvimento e documentação dos componentes. Eu fui responsável por criar a documentação detalhada de cada componente, definindo seu uso, comportamento e fornecendo exemplos práticos. Além disso, desenvolvi o grid de ilustração, adaptando ilustrações existentes para se alinharem ao novo sistema.

Documentação dos componentes

Grid de ilustrações

Uma parte crucial do meu trabalho foi criar diretrizes para a escolha de componentes de acordo com diferentes contextos. Isso incluiu a criação de exemplos práticos e cenários que facilitassem a escolha correta pelos designers, garantindo que cada componente fosse utilizado de maneira eficaz e apropriada.

Casos de uso dos componentes

Colaboração e Parcerias

A colaboração com a equipe de engenharia foi essencial. Costuramos acordos e delimitamos fronteiras, garantindo que a viabilidade técnica dos componentes fosse mantida. Definimos as fundações do design system e estabelecemos processos claros de construção e documentação. Adicionamos o conteúdo como um pilar fundamental, entendendo que cada time possui seu próprio ritmo e características específicas. Nosso objetivo era centralizar o núcleo do sistema, mas permitir evoluções locais conforme necessário.

Resultados

O design system foi documentado tanto no Figma, para designers, PMs e engenheiros, quanto no Storybook, para documentação técnica. Isso garantiu que todas as partes envolvidas tivessem acesso fácil e claro às informações necessárias.

Os resultados foram significativos. Conseguimos melhorar a coerência das experiências dos produtos digitais da Loggi e otimizar os processos de design e desenvolvimento. A flexibilidade permitida pelo design system também possibilitou adaptações locais, respeitando as características específicas de cada produto.

Conclusão

O Design System "Carto" foi um passo essencial para a Loggi, garantindo experiências de usuário mais coerentes e otimizando a colaboração entre design e engenharia. Este projeto resultou em um sistema robusto e flexível, capaz de evoluir conforme as necessidades da empresa.