Está na hora de construir meu Design System, e agora?

Hoje vim contar pra vocês um pouquinho do que aprendi no curso Design Specialist da Meiuca, quais foram os desafios e o que eu hoje coloco em prática.

Quem nunca se perguntou: “e agora, o que eu faço?”, não é mesmo? Eu, como estagiária e pessoa que está conhecendo esse mundão de UX, sempre me pergunto isso. Então como uma boa pessoa apreciadora do “como posso aprender mais”, vou te dar algumas dicas para você que quer construir um Design System — seja você Júnior, Pleno ou, até mesmo, Sênior.

Hoje trabalho focada no Design System aqui do Banco Carrefour. E, como uma pessoa que está começando a entender a área, li muitos livros e fiz alguns cursos, entre eles o de Design System Specialist da Meiuca. E foi nele que tirei várias dúvidas e aprendi sobre diversas questões que ainda não entendia.

Sem mais delongas, bora pra prática?

Logo de cara existem 4 grandes frentes para um Design System acontecer. São elas:

1. Descobertas
2. Definições
3. Desenvolvimento
4. Implementação

Basicamente esses são os passos que vão nos guiar nessa jornada. Eu aposto que você já ouviu essa frase, mas lá vai: um Design System é um produto que alimenta outros produtos. Então você tem que pensar bem antes de dar o primeiro passo, porque você vai gastar um esforço muito grande para implementar esse projeto e, acima de tudo, vai precisar da colaboração de pessoas.

Descobertas

Primeiro é essencial termos uma equipe multidisciplinar engajada para projetar o Design System da melhor forma. Além disso, é preciso muita perseverança e saber desde o primeiro momento que não se faz nada sozinho, por isso é importante incluir todas as pessoas interessadas, stakeholders na área de tecnologia e designers.

Aqui no Banco, mesmo com um time de Ops focado no Design System, contamos com a colaboração de todas as pessoas de UX e Desenvolvimento. Elas são as pessoas interessadas no produto. E, falando em produto, umas das coisas mais importantes do seu DS é batizá-lo com um nome — e por aqui o nosso se chama Annecy Design System.

Entenda que o DS não se trata de uma tela bonita, mas sim de algo que vai melhorar a usabilidade e a interação com quem vai usar o produto, além de trazer mais agilidade para os times. O Design System, de um modo mais técnico, é um conjunto de componentes codados a partir da semântica de Design.

É essencial que você construa um ecossistema de bibliotecas separadas, mas, todas com o seu propósito. Ali estará a cara do seu produto e todas as expectativas vão ser depositadas naquele ecossistema que você criou.

Definições

Nessa frente é muito importante você saber quais são as estruturas do seu produto. Ou seja, é aquela hora de definir o que realmente vai ter no seu DS e quais as aplicações que você vai precisar estruturar. A relevância para o negócio também é uma tarefa muito importante e vai chegar um ponto em que você terá que defender todos os benefícios de se ter um DS.

Por fim, é aqui que você define quais vão ser os seus principais processos, quais as documentações que serão criadas e onde tudo será documentado. Esse é um dos principais pontos do seu Design System, pois é onde você tem que estruturar toda documentação para as pessoas entenderem o seu processo e as regras de aplicação dos componentes.

Tudo isso deve ser totalmente equilibrado! É importante lembrar que todos os pontos levantados até o momento importam para que o seu DS tenha uma base sólida.

Algumas das bibliotecas mais importantes que existem em um DS são:

• Design Tokens
• Core Components
• Icons
• Playground

Basicamente essas são suas bibliotecas funcionais, além de todo o Handoff e a documentação de ajuda para as pessoas que vão usar o DS, acho que vale ressaltar um ponto de vista meu que: às vezes vamos ter que nos comportar como educadores sempre pensando na melhor experiência para quem vai usar o Design System.

Desenvolvimento

Aqui começamos a entender como alcançar nossas definições visuais. Vamos lembrar da importância de aproximar as pessoas para criticarem e, definitivamente, se sentirem parte de todo o processo.

É também nesse momento que trazemos os princípios em Design de Experiência. É muito importante que eles tenham uma breve descrição sobre como devem estar refletidos nos componentes. E existem diversas formas de se chegar nos princípios de design, independente do framework.

A parte mais importante é que no final do dia você tenha tópicos que sejam facilmente traduzidos nas decisões de design, sejam elas visuais ou de experiência. Um bom exemplo é um dos princípios de design do Pinterest que diz que as interfaces devem ser coloridas e responsivas. Então, essa definição faz com que, na hora de criar um novo componente, o time evite construir componentes pouco responsivos ou componentes monocromáticos. Importante lembrar: todos esses pontos devem estar nas documentações.

Essa era uma das partes que eu tinha mais dúvida sobre as bibliotecas do DS, porque eu sempre me perguntava:

• Por que tantas bibliotecas?
• Por que existem tantas informações?

O que eu entendi é que, na verdade, eu ainda estava aprendendo as coisas e não que havia algo de errado por aqui. Nós precisamos ter uma documentação totalmente didática e autoexplicativa, e, se as documentações não estão ajudando, então isso indica que tem algo de errado ali.

Outro ponto interessante é sobre os componentes responsivos. Podemos pensar que as ferramentas de Design nos ajudam muito nesse quesito, poupando tempo em criar componentes, mas hoje existem centenas de plugins para nos auxiliar nessa etapa tratando tudo o que precisamos e as necessidades das interfaces.

Implementação

Essa é hora mais estratégica de construir seu DS, pois é nessa frente que você vai colocar um limite em todas as funções e nomear os guardiões do projeto. É o momento de gerenciar todas as expectativas colocadas no projeto, olhar para trás e ver tudo que você trabalhou para construir.

Chegou a hora de documentar e passar todo o processo explicativo e didático — o que não é uma tarefa tão fácil assim. Além disso, é preciso criar mecanismos para fazer uma boa governança da sua aplicação.

Tudo pronto?

E depois de tudo isso, não é possível que falte alguma coisa né Joy?! Eita espera aí que falta sim. Depois de tudo isso também temos que metrificar todo o trabalho construído. E, como medir e o que medir, eram algumas das minhas perguntas.

Aqui no Banco temos o nosso Dashboard de Métricas onde conseguimos acompanhar o uso do nosso Design System. Ele nos permite mensurar todos os componentes que estão sendo usados nos produtos, os mais e os menos usados, nos dando um controle e mostrando que todo esforço valeu a pena. Além de conseguir distinguir onde podemos melhorar. E fazemos isso não só através das métricas, mas também pelas conversas e feedbacks das pessoas que usam o Annecy todos os dias.

Agora sim podemos concluir e dizer que você só precisa dar o primeiro passo e nunca se esquecer de que não deve fazer nada sozinho. Tudo dá certo com a parceria do time no dia a dia.

Eu, como uma pessoa inexperiente, consegui absorver muita coisa, tirar muitas dúvidas no curso da Meiuca e entender um pouco mais sobre como implementar e cultivar o Design System dentro da empresa. Foi uma experiência extremamente rica para mim!

Bora falar um pouco de mão na massa?

De nada adianta só estudar e não colocar nada em prática. Para realmente colocar a mão na massa, eu fiz o projeto de um aplicativo de delivery de pizzas e foi nele que pude realmente praticar algumas coisas que aprendi na Meiuca Design, tanto em Design System quanto em organização. Fiz um mini DS para o projeto, pensando em trazer desde cores acessíveis a todos os estados dos componentes.

Como sou uma pessoa iniciante, pedi ajuda para um dos Designers aqui do time e esse processo não foi nada rápido, ok pessoal?! Todo processo tem que ser estudado e temos que estar focados nos mínimos detalhes.

Um dos principais tokens do DS é o das cores e ele também é um dos mais difíceis e mais usados, porque são elas que vão dar a cara da sua marca. O Ray, que foi o Designer que me ajudou, focou muito nessa parte. A colorimetria é complexa e nós estamos focados em ter cores acessíveis, então tomem cuidado neste ponto, tentem sempre projetar para todas as pessoas.

Um outro ponto complexo são as tipografias que você vai usar na sua interface. Você vai ter que definir altura da linha, espaçamento entre as letras, pesos e onde elas vão ser aplicadas, tudo juntamente com as cores que você definiu.

Ufa! Depois de fazer isso, deu pra ver que parte do DS estava tomando forma. Mas agora era o momento de escolher o estilos que os componentes vão ter como: border radius, shadow levels, border width, opacidade e espaçamento.

Com tudo isso pronto, era hora de ir para os componentes! E isso não foi tão rápido. Então, para você que está iniciando, tire um tempo para ir aprendendo a cada parte do projeto. Como eu estava aprendendo, fui pesquisar como eram os componentes e quais eram os seus comportamentos e, acima de tudo, como deixá-los acessíveis.

Foi aí que comecei a desbravar Design Systems, pesquisei vários deles e foquei mais em dois: o Meiuca Design e o Material Design Fui entender porque usamos tais componentes e quais variações eles tinham que ter para que meu projeto fosse completo.

Foquei em componentes mais macros como inputs, switches e botões. Mas todos com os estados apropriados e com as mínimas especificações da #WCAG.

Fiz as microinterações e aí ficou muito mais fácil entender como usar e porque usar aquele componente depois dos estudos.

Lembra que eu falei que não se faz nada sozinho nesse meio? Então, passei por críticas e fiz pesquisa com as pessoas usuárias. Não é fácil, sempre tem algo para se melhorar na interface. E fui juntando as peças de lego para que o projeto seguisse um caminho bacana.

E essa é a cara do Joya Pizzas, aplicativo de pedir pizzas. Ainda tenho muito o que melhorar, essa foi apenas a minha primeira interação focada em componentizar e conhecer mais a fundo os componentes de DS. Mas nessa primeira experiência eu aprendi muito acertando e errando. Design System é um produto complexo, mas com a prática você consegue sim aprender.

Modéstia à parte achei que o projeto ficou bem legal, consegui trazer vários componentes que podem ser reutilizáveis para uma interface.

Lembre-se sempre tem algo a se melhorar, espero mais pra frente trazer esse meu primeiro projeto com uma cara nova com as coisas que venho aprendendo. Então, fica aqui a dica: acredite no processo.

E se você tem dúvidas ou receio de começar um Design System e não sabe qual é o primeiro passo, o curso da Meiuca é uma dica de ouro, vale super a pena. #FicaADica.

E por último, mas não menos importante, queria aproveitar para enaltecer a equipe Meiuca pela organização e acessibilidade do curso. As aulas e materiais estavam super acessíveis e tudo foi feito voltado para as pessoas.