Criação de Design System para a Yandeh: Simplificando o processo de design e desenvolvimento

Como um Design System bem pensado e executado pode transformar a forma como uma empresa trabalha

@Objective

Conheça

A Yandeh é uma plataforma de abastecimento para mercado, e sua equipe de design e desenvolvimento enfrentava problemas de comunicação e produtividade.

A falta de um sistema de design consistente e compartilhado dificultava a colaboração e resultava em retrabalho.

Além disso, a navegação nos arquivos do Figma era um desafio, o que dificultava ainda mais o trabalho em equipe.

Desafio

O principal desafio era criar um Design System que atendesse às necessidades de todos os envolvidos, desde designers até desenvolvedores.

Além disso, era importante documentar adequadamente os padrões de design e desenvolvimento para que a equipe pudesse usá-los facilmente no futuro.

O segundo desafio era simplificar a navegação nos arquivos do Figma para evitar que os stakeholders perdessem tempo procurando informações.

Solução

Fui responsável por criar os padrões de tokens, fazer levantamento de inventário criar os componentes no Figma separados por Global Tokens, Components e Team Components, validar os componentes com time de design da Yandeh e desenvolvedores.

Depois, foi feita a documentação do Design System no Storybook, onde fui responsável pela criação do código markdown.

O Design System foi tão bem aceito e ficou de tão fácil entendimento que o time de desenvolvimento mobile adotou o Design System sem ser preciso ser feito o onboarding.

Além disso, criei um padrão de navegação para os projetos e documentei junto ao Design System, o que facilitou a vida de quem não tinha conhecimento para navegar dentro do Figma.

Fui responsável pela criação, documentação e handoff deste padrão.

Processos aplicados

  • Criação de padrões de tokens
  • Levantamento de inventário de componentes
  • Criação de componentes separados por Global Tokens, Components e Team Components
  • Validação de componentes com o time de design e desenvolvedores da Yandeh
  • Documentação do Design System no Storybook
  • Criação do código markdown para a documentação
  • Criação de um padrão de navegação para os projetos no Figma
  • Documentação e handoff do padrão de navegação

Resultados

O Design System criado foi muito bem aceito e elogiado pelo time de stakeholders, design e programadores.

A eficiência e padronização alcançadas com o uso do Design System resultaram em uma melhoria significativa na experiência do usuário e em um aumento de produtividade da equipe.

O Design System criado para a empresa Yandeh foi um sucesso, garantindo maior eficiência e padronização no desenvolvimento de interfaces e resultando em uma melhoria significativa na experiência do usuário.

A criação de um sistema de navegação no Figma também foi fundamental para garantir a eficiência na criação e manutenção do Design System.

Veja outros cases