Como foi a primeira turma do Bootcamp de Design System na MEIUCA
Um fim de semana de imersão sobre o assunto em um escritório de design em escala.
Este fim de semana (dia 18 e 19 de Agosto) rolou o primeiro Bootcamp sobre Design System na MEIUCA, um escritório de design em escala que fez o design system de marcas como a Printi e tem trabalhado em outras ainda maiores.
O bootcamp surgiu no momento perfeito para mim, pois eu já vinha estudando para começar o design system da Liv Up, startup onde eu atuo como Lead Designer atualmente. Serviria como um ambiente controlado para entender melhor e praticar antes de fato iniciar processo com minha equipe. Sobretudo, eu sabia que encontraria um conteúdo de qualidade, pois já conhecia os instrutores de uma meetup na própria MEIUCA e conhecia a visão descontraída e disruptiva com a qual este assunto poderia ser abordado.
Apesar de termos como referência sistemas maduros como o do Airbnb ou o Carbon da IBM, a realidade é que aqui em terras brasileiras ainda estamos engatinhando quando se trata desse assunto. As empresas pioneiras em design estão começando mudar o mindset para colocar isso em prática, mas a verdade é que a maioria sequer ouviu falar sobre o assunto.
Partiu teoria
Logo de cara, a MEIUCA nos fez entender de uma vez por todas que o design system, não é puramente o atomic design, e muito menos uma biblioteca no Sketch, mas sim algo muito mais complexo que deve ser bem planejado e feito por uma equipe multidisciplinar para que seja executado de forma correta.
Design system é um conjunto de componentes codados a partir de semânticas de design.
Ele pode ser adotado como um mindset de escalabilidade de design, extremamente necessário para quem tem muitas interfaces para administrar e quer acompanhar o mercado que muda constantemente e deixou de ser só uma escolha, uma questão de sobrevivência no situação voraz que nos encontramos.
O design system deve ser a língua universal do seu produto e fonte única da verdade, acordado entre todos os setores e deve ser consistente, auto-suficiente, reutilizável, acessível e robusto. O lado complicado é que não existe uma formula mágica, pois deve acompanhar as necessidades de cada marca.
Não faça pelo hype. Faça pela necessidade.
Segundo a MEIUCA, o primeiro ponto, é se perguntar se sua empresa realmente precisa de um design system ou ao menos, se este é o momento ideal para começar a criá-lo. Depois, há alguns passos fundamentais para o começo de tudo:
1. Ouça seu usuário (todo o time)
2. Entenda seu stack (e talvez repense)
3. Mapeie as suas dores (em especial os gargalos)
4. Recrute padrinhos para o projeto
5. Crie uma estratégia de implementação
6. Balize as expectativas
7. Mensure o esforço hoje, para calcular o ROI amanhã
8. Se coloque metas
Com isso definido e o time montado, é hora de partir para o planejamento e a mão na massa que foi abordado no segundo dia do bootcamp.
Mão na massa
O segundo e último dia foi exclusivamente para botar a mão na massa e fazer acontecer, entendendo na prática os problemas encontrados pela MEIUCA ao criar design systems. Os participantes do bootcamp foram divididos em grupos de 4 a 5 participantes e para cada time foi entregue um envelope com uma marca surpresa de um setor aleatório. Cada grupo deveria pegar os prints do site contido no envelope, entender sua estrutura e reproduzir três das etapas da criação de um design system: descoberta, design, desenvolvimento e documentação. A única etapa não foi reproduzida foi a de desenvolvimento, pois o foco do bootcamp era mais entender o conceito e aplicá-lo do que de fato codar realmente.
No final do dia precisávamos fazer uma apresentação com o nosso entendimento dos valores da marca, branding, inventário de componentes e um esboço do que poderia ser o nosso design system, além de ideias de como ou o que poderíamos colocar em uma futura documentação. Ficamos livres quanto à forma de apresentar — poderia ser tanto em forma de uma apresentação do Google ou até mesmo em Post it’s colados na parede, o importante era demonstrar o que foi aprendido durante a tarefa.
Descoberta
Com os sites literalmente em mãos, cada grupo precisou se unir para entender como cada marca funcionava e descobrir qual era a hierarquia das informações e os elementos que eram repetidos em vários momentos. Nessa etapa, precisaríamos entender os seguintes pontos:
- Princípios/valores da marca (como a marca se posiciona, ou como ela é vista).
- Branding (aplicações de logo, cores e tipografia).
- Lista de possíveis componentes.
Este foi o momento que os principais problemas surgiram (alguns de forma mais evidente que outros) e em todos os grupos houve a dificuldade em encontrar consistência entre as páginas e elementos das marcas.
Após algum tempo, os grupos passaram a entender (ou ao menos entrar em acordo) como deveria ser o inventário e começaram a separar os recortes para colocá-los nos cartazes. Com tudo separado, foi o momento de nomear cada componente conforme uma nomeclatura pré-estabelecida.
Design
Com todas as descobertas da etapa anterior, foi hora de definir como iríamos replicar isso em nosso “design system”, separando os itens em:
- Tokens (menor parte possível, que serão a base do design e são replicados em todo o sistema, como por exemplo cores, tipografia, espaçamentos e grids).
- Componentes básicos (pacote de componentes que que sempre serão reutilizados, como por exemplo campos de texto, botões, boxs, e até mesmo modais).
- Componentes (peças individuais que precisaram ser usadas em áreas específicas da aplicação, como um card de produto).
Como os grupos acabaram demorando muito na etapa de descobrimento, essa foi uma etapa corrida, e muitos grupos acabaram focando apenas nos tokens principais, com uma brechinha do que poderia ser um código de desenvolvimento.
- Cores (da marca, interface, textos, suportes).
- Tipografias (família, tamanho, peso, altura da linha).
- Espaçamento (dentro e fora de elementos, boxes e afins).
- Grids (desktop, tablet e mobile)
- Borda de elementos (quadradas, arredondadas, circulares).
Os grupos mais adiantados (e com uma experiência prévia maior) conseguiram ir além disso e montar algumas de suas aplicações com botões, modais e cards de produtos.
Um ponto bacana de ressaltar nessa fase é que quase todos encontraram uma variedade de elementos (como tamanhos e cores de fontes) muito maior que a necessária e que poderiam ser condensados em algumas poucas opções, e foi o que nós fizemos: descartamos uma parte e fizemos um sistema enxuto e funcional.
Documentação
Como o comentado no início do curso, a documentação acabou sendo a menor das etapas do bootcamp, mas que provavelmente deve ser a que mais deve dar trabalho no dia a dia. No fim, apenas alguns grupos fizeram um breve levantamento de possíveis pontos que deveriam ser documentados durante a criação e implementação de um design system.
Mesmo com o tempo acabado e com partes faltando os grupos apresentaram seus projetos com um sorriso no rosto e cheios de orgulho. Senti que todos que estavam lá foram motivados por paixão pela sua profissão e puderam se divertir e aprender muito botando em prática todo esse conteúdo.
Entendemos e sentimos na pele que todo o planejamento e processo é muito maior do que a maioria das pessoas imagina e é impossível de se fazer sozinho, além de entendermos que o design system é um organismo vivo e pode (deve!) sempre ser aperfeiçoado.
Encare seu design system como um produto, não como um projeto.
Agradeço muito aos feras Thiago Hassu, Thiago Capelo e Diogo Capelo pelo bootcamp incrível (e o escritório tão lindinho) e todo o ensinamento passado que nos ajudará a construir um sistema sem ter que passar por todo o caminho das pedras como eles passaram. Tenho certeza que todos, assim como eu, adquiram lá uma nova visão sobre o assunto e saíram com muita vontade pra colocar todo esse conhecimento em prática.
