Design System da Vindi: a jornada só começou
Um time composto de 3 designers de produto diante de uma plataforma legada de 6 anos de história em 5 dias inteiros focados em um só desafio: começar a construir o Design System da Vindi. Esse texto é para contar um pouco sobre como iniciamos essa jornada (e explicar porque ela só começou). Vem com a gente! 😃
Quando a necessidade se tornou uma urgência
Que o Design System é algo essencial para uma empresa isso é fato. Há mais de um ano, essa necessidade era discutida dentro da área de produto e engenharia. Aos poucos fomos evidenciando para os desenvolvedores e líderes da área os impactos de não possuir um design system para orientar e escalar o trabalho de design e desenvolvimento.
Porém, a urgência surgiu em uma das reuniões do time de Design, chamada de “a hora de Design”, que acontece semanalmente e é um momento em que o time (atualmente composto por três designers de produto) compartilha os seus trabalhos e pede opiniões, ajuda e feedback em geral. Nessa ocasião — exatamente no dia 10 de setembro de 2019— a gente percebeu que estávamos diante de um enorme problema: cada um estava criando componentes novos e as inconsistências só estavam aumentando.
Acontece que, como a interface da plataforma da Vindi já estava bastante antiga e não refletia mais nossa identidade, começamos a fazer um movimento de atualizar e desenvolver uma nova interface à medida que íamos trabalhando em novos fluxos, funcionalidades ou melhorias da plataforma. Porém, na ausência de um design system, esse movimento começou a resultar em mais inconsistências.
Diante disso, veio a ideia de parar todo o fluxo normal de trabalho e reservar uma semana só para dar o pontapé inicial ao tão sonhado e necessários Design System da Vindi. E esse foi nosso cronograma:
- Dia 1: Inventário de componentes da interface
- Dia 2: Benchmarks, Princípios e Estilos
- Dia 3: Pensar em regras (Grid, Espaçamentos, Escalas, Ícones, Tokens)
- Dia 4: Começar Biblioteca de Componentes no Figma
- Dia 5: Colocar em prática em algum fluxo tipo “célula-tronco”
Nem tudo saiu exatamente como previsto no cronograma, mas muita coisa foi feita. E a primeira foi…
Começar pelo o que já existe
O primeiro passo foi analisar o produto que existe há mais de 6 anos no mercado e no qual trabalhamos. Fizemos capturas de quase todas as telas da plataforma, para imprimi-las em folhas A3, pois a ideia era começar na segunda-feira um exercício de recortar e agrupar os componentes e elementos de interface a fim de identificar como são usados e ir mapeando as inconsistências existentes.
Essa fase é chamada de “inventário de componentes” e isso não foi tirado das nossas cabeças. De acordo com Brad Frost, o criador do Atomic Design,
“An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.” — Brad Frost
Esse exercício é indicado como primeiro passo para começar a estabelecer um design system. Após recortar os componentes e ir agrupando-os, muitas inconsistências começaram a ficar visíveis, como formatos de botões diferentes, uso de tabelas e listas não definidos, ícones com tamanhos diversos, diferentes usos de cores para mensagens e badges de status da plataforma e por aí vai.
Entender nossa personalidade
Antes de pensar em componentes, interface, cores ou o que quer que seja, precisávamos realmente entender a personalidade da empresa, já que tudo isso deve passar as características da Vindi.
Aproveitamos a pesquisa sobre personalidade que rodamos no final de 2018 e no início de 2019 dentro da empresa com o propósito de elaborar a voz e o tom da Vindi, bem como o guia de comunicação. Leia mais detalhes sobre nosso processo de definição de tom e voz.
A partir das características resultantes da pesquisa — moderna, amigável, espontânea, jovem, inovadora e acessível — fizemos um exercício rápido de brainwriting para descarregar mais características e consolidar nosso entendimento sobre a personalidade da Vindi. Esse exercício foi importante para nos guiar para a próxima etapa: a definição dos princípios do Design System.
Definir nossos princípios
Compreendida nossa personalidade e aprofundadas as características extraídas da pesquisa, passamos para o momento de determinar nossos princípios — nos quais o Design System estaria fundamentado e que serão nossos guias para atuar como designers de produto.
A atividade começou de forma individual, ou seja, cada designer rascunhou os princípios que acreditava ser os melhores, com base no que havíamos notado de problemático no inventário de componentes e também conforme a personalidade da empresa. Depois apresentamos uns para os outros, para deliberar e convergir, resultado esses princípios:
Acessível: projete interações inclusivas que levem em consideração os diversos tipos de pessoas e segmentos para os quais trabalhamos.
Útil: crie soluções que atinjam as reais necessidades dos usuários e otimizem o seu trabalho. Todos os recursos e componentes devem ter um propósito claro e significativo.
Confiável: construa experiências consistentes ao longo de toda a plataforma, se preocupando em passar confiança, através de interações eficientes, claras, simples e objetivas.
Escalável: pense em crescimento, adapte-se às necessidades de cada contexto e projete interações de forma modular e flexível.
Vindiana: transmita nossos valores e personalidade através de todas as interações ❤.
Em busca de inspirações
Definidos os princípios orientadores, começamos a buscar por inspirações visuais. Reunimos interfaces, interações, ilustrações e fotografias em um moodboard. A ideia era alimentar nossa criatividade antes de efetivamente começar a colocar a mão na massa. Acesse nosso moodboard no Invision.
Abre o Figma e mão na massa!
Com base em todas as definições e atividades feitas anteriormente, nós já estávamos bem mais seguros para começar a pensar nos elementos visuais do nosso Design System.
Uma coisa era muito clara desde o início: nós não iríamos reinventar a roda, ou seja, pensar em elaborar diversos componentes do zero. Por isso, decidimos usar como base o Material Design do Google. Eles oferecem para download uma biblioteca de componentes para usar no Figma, o que já facilita bastante o trabalho de qualquer designer.
Mas, de qualquer modo, é necessário aplicar a “personalidade Vindiana” e componentizar dentro do Figma para tornar nosso trabalho escalável. Aproveitamos esse momento para trocar ideia com o time de designers do Marketing também sobre as cores e tipografia já utilizadas nas criações deles, alinhando nossas opiniões. Em seguida, em conjunto, começamos a criar nosso Style Guide com cores, tipografia, iconografia, elevação, grids e espaçamentos.
Nossa “célula-tronco”
Para finalizar a semana com algo mais concreto, colocar em prática o que elaboramos nos dias anteriores e realmente cumprir com a proposta inicial de resolver problemas reais, escolhemos um dos fluxos de usuário mais importantes da plataforma para aplicar o que havíamos feito até então: o fluxo de criação de cliente.
Primeiro, fizemos um exercício rápido de redesenho dessas telas, sem fazer alterações de conteúdo, apenas colocando à prova essa nova linguagem visual, com o objetivo de nos guiar quando passarmos os componentes do Material Design para nossas cores, tipografia, grid e escala de espaçamentos.
Em seguida, cada designer propôs uma forma de aplicação dos componentes e, após deliberar sobre essas possibilidades, chegamos a um resultado em Mobile First e também nas versões desktop seguintes:
Vale enfatizar que esse resultado foi apenas um teste prático dos componentes do Material Design com nossa personalidade colocados em um contexto essencial do nosso produto, porém ainda não é definitivo, logo não são componentes do nosso Design System — já que ele ainda está “em gestação” 😅
Passos seguintes
E foi assim que o Design System foi concebido! Mas ainda falta muito para que esse “novo ser” realmente nascer e sobreviver, já que é preciso que ele evolua, ganhe corpo e esteja presente na vida da empresa. Alguns passos seguintes:
- Mostrar pra toda a empresa os resultados dessa semana de trabalho e pedir também a participação dos vindianos e vindianas (como nos chamamos na Vindi 😃) com visão crítica sobre nosso inventário de componentes e princípios formulados.
- Apresentar esses resultados para o time de Engenharia e engajá-los na estratégia de migração do stack tecnológico para colocar em prática o Design System e realmente mudar nossas vidas ✨. Afinal de contas, nem só de designers sobrevive um Design System!
- Definir um fluxo de criação e revisão dos master componentes dentro do Figma — já que isso será um trabalho de atualização realizado aos poucos por cada um dos designers 💪.
- Continuar evoluindo o design system, já que ele não é um projeto acabado, muito pelo contrário, é um produto em constante evolução, para ser colocado em teste, receber feedback e interação sempre 🚀.
Links que nos foram úteis
Agora que você sabe como foi nossos primeiros passos rumo ao Design System da Vindi, compartilha nos comentários suas experiências com esse assunto, se já encarou o desafio de iniciar essa jornada também, quais seus aprendizados ou se tem alguma dúvida e sugestão. Vamos trocar ideia! Nós do time de Design da Vindi adoramos essas trocas 😍
