Como o design system da Loomi reduziu o tempo de entrega em 30%

Um token unico para cor, espacamento e tipografia acabou com as divergencias entre o Figma e o codigo. Contamos o que mudou no processo.

  • UX&UI
  • Alisson Machado
  • 1 min read

Um token, tres saidas

Antes do design system, cada equipa lia a cor de um sitio diferente: uma via o Figma, outra via um CSS antigo. As duas nunca bateram por muito tempo.

A fonte unica dos tokens gera tres artefactos — CSS para o Next, CSS para o editor do WordPress e o theme.json do Gutenberg — e nenhum deles se edita a mao.

O resultado directo foi menos tempo de revisao visual: a divergencia que antes so aparecia em produto deixou de existir, porque a fonte e uma so.

Antes de desenhar, perceber

A primeira versao de um ecra e quase sempre uma resposta a pergunta errada. Nao porque quem desenha se enganou, mas porque a pergunta certa so aparece depois de alguem tentar usar o que foi feito.

Por isso separamos duas conversas que costumam acontecer ao mesmo tempo: o que a pessoa esta a tentar fazer, e como o produto lhe responde. Misturar as duas leva a discutir o tamanho de um botao antes de saber se ele devia existir.

Na pratica isto e meia duzia de entrevistas curtas e um mapa do percurso actual, com os pontos onde as pessoas desistem marcados a cor. Costuma caber numa semana e poupa meses.

Partilhar este artigo

vamos trabalhar juntos

agendar contacto