Morte e vida de um Design System
Como fizemos renascer das cinzas o VTEX Styleguide, e porque acreditamos que desta vez acertamos a receita.
A VTEX é a maior plataforma de e-commerce da América Latina, presente em mais de 25 países e movimentando mais de 55 mil pedidos todo dia. Temos uma estrutura organizacional diferenciada que abre mão de gerentes em troca de mais autonomia para os times, e onde projetos podem nascer a qualquer momento das mãos de qualquer pessoa.
Projetos estes como o Styleguide, que há exatamente 1 ano surgiu de um grupo de desenvolvedores e designers interessados em resolver problemas juntos, compartilhar soluções e escalar o impacto para nossos clientes.
Quando o produto é uma ferramenta de trabalho
Apesar de trabalhar com ecommerce nós não desenvolvemos os sites das lojas em si, estas são responsabilidade do nosso largo ecossistema de agências parceiras. O foco do time de produto é no desenvolvimento da plataforma, que deve atender necessidades de negócio complexas e abstraí-las em um sistema poderoso mas ao mesmo tempo fácil de usar.
Na VTEX lidamos diariamente com usuários que muitas vezes não tiveram o poder de escolher a nossa plataforma, e que ainda assim precisam acessá-la todos os dias para fazer seu trabalho. Construir uma plataforma corporativa é muito diferente de construir um produto “de consumo”. Nós somos uma ferramenta de trabalho da qual as pessoas dependem para tocar seus negócios. Isso nos leva a focar menos em encher os olhos e mais com resolver problemas reais e fazer o dia-a-dia das pessoas mais fácil e produtivo.
Um momento estratégico
Na VTEX vivemos um momento onde novas tecnologias próprias estão se consolidando. Está nascendo uma App Store que trará uma nova visão para a plataforma e o ecossistema. E isso se alavancando do VTEX IO, nossa plataforma de desenvolvimento serverless onde rodam nossos admins, os apps e até as próprias lojas.
Com o amadurecimento destas tecnologias e da própria visão de produto da empresa nos vemos em um forte movimento de redesign de módulos antigos e do desenvolvimento de novas aplicações. Estamos falando de equipes crescendo, novos colaboradores se juntando à empresa e novos projetos e negócios nascendo. Para atender a essa demanda crescente precisávamos cada vez mais que as decisões de design e produto escalassem.
Acreditamos que a principal função do designer é a de ser um facilitador, trazendo alinhamento aos times quanto às decisões de produto. Um Design System completo, bem estruturado e fácil de usar nos ajudaria a cumprir essa missão de maneira cada vez mais eficiente.
You see, a great designer starts with the whys. She conveys the principles behind her thinking and leaves you feeling like you understand the core values from which all her design decisions flow.
— Julie Zhuo, A Matter of Principle
Eu sei o que vocês fizeram no Design System passado
1 ano atrás começamos a nos reunir pra desenvolver a ideia de um Design System para a VTEX e descobrimos que iniciativas semelhantes já haviam acontecido na empresa. Nosso ritmo de startup faz com que a criação de documentação não seja sempre priorizada, mas conseguimos recorrer a colegas mais antigos que nos ajudaram a reconstruir os passos dos nossos antepassados.
Ao aprender sobre o processo que haviam seguido começamos a analisá-lo criticamente e ver onde poderíamos melhorar.
- Coletânia de componentes — foi feito um extenso estudo dos componentes que eram usados nos admins que existiam. Apesar do esforço as telas eram complexas e muito inconsistentes, o que gerou um mapeamento difícil de lidar. Além disso acreditamos que ao recriar telas antigas elas deveriam ser totalmente repensadas, o que tornariam obsoletos vários daqueles componentes mapeados.
- Tecnologia de styleguide construída in house — o time na época decidiu desenvolver seu próprio framework para documentação e manutenção da biblioteca de componentes, o que deu bastante trabalho e no final acabou ficando difícil de usar.
- Princípios de Design — foram organizados workshops entre os designers para pensar os princípios que orientariam o sistema. Porém ele não envolveu stakeholders externos ao time, e isso foi antes da empresa começar um processo interno de formalização de seus próprios princípios de cultura. Tudo isso gerou princípios poucos sólidos que não "pegaram".
- Moodboards — foram montados para encontrar o direcionamento visual do novo sistema, porém estávamos bem no meio de um processo de reposicionamento de marca, que pra dificultar ainda estava sendo feito por uma agência externa.
- Benchmark — nos inspiramos em sistemas como Material Design ou mesmo a biblioteca Bootstrap. Apesar de serem populares e bem feitos estes foram construídos para resolver problemas diferentes dos nossos. Eles frequentemente oferecem soluções genéricas demais, que não respondem assertivamente às dúvidas do dia-a-dia, mais ligadas a e-commerce e admins.
Uma nova esperança
Neste momento foi importante falar abertamente sobre o que deu certo e o que deu errado, realinhando objetivos e pesquisando novas soluções.
Formamos uma nova equipe “nuclear”, que estava altamente motivada a tocar este projeto dedicando algumas horas por semana. Nos organizamos com rituais semanais para discutir e trabalhar, sempre tentando manter tudo transparente e hierarquicamente orgânico, como é da nossa cultura.
- Definimos um novo fluxo de trabalho: só serão projetados e desenvolvidos componentes que tenham demanda real dos times, ou seja, com contextos claros e problemas a resolver bem definidos. Isso garantiria que sempre teríamos mão de obra pra tocar os componentes mais importantes.
- Investigamos novas ferramentas que facilitassem a colaboração e o reuso de soluções. (O fato de Design Systems estar na moda ajudou bastante na hora de googlar 🤓)
- Buscamos novas referências de Design System no mercado, mais alinhadas com nossa indústria e com nossos objetivos, como o da Atlassian, Salesforce e Shopify.
- Retomamos a pesquisa pelos Princípios de Produto da VTEX, desta vez fazendo um estudo mais profundo e envolvendo stakeholders dos mais diversos.
It’s dangerous to go alone! Take this.
Acreditamos que a escolha das ferramentas teve papel importante no sucesso da empreitada por refletirem os valores que buscávamos.
O React é um framework Javascript moderno que incentiva a componentização e tem uma comunidade extremamente ativa. Além disso é a tecnologia usada no VTEX IO, o que facilitou sua adoção por toda empresa.
No lugar de uma solução desenvolvida internamente adotamos o Styleguidist, um gerador automático de website para bibliotecas React. Com poucas configurações ele nos produz exemplos vivos de componentes, fácil documentação com Markdown além de permitir customizações.
No lugar do Sketch e seus vários plugins escolhemos o Figma, uma ferramenta de design moderna que traz nativamente desenho, prototipação, versionamento, reuso de componentes complexos e handoff para desenvolvedores. Tudo na nuvem, e acessível por qualquer navegador Web.
Nossos principais aprendizados (até agora)
1. Você não precisa de uma equipe, você precisa da empresa inteira
Mas não quer dizer que todos devem parar o que estavam fazendo. Bem pelo contrário, todos podem continuar desenvolvendo componentes. Mais do que só uma documentação ou uma biblioteca de componentes, um Design System é um mind set que deve ser cultivado por todos.
Se houver projetos piloto e demandas reais guiando o time, melhor ainda. É importante o projeto estar fortemente ligado com necessidades reais, ajudando a equipe a manter os pés no chão.
“Uma linguagem compartilhada é fundamental para colaboração, e é exatamente isso que um Design System efetivo entrega. Ele fornece às pessoas ferramentas e processos para criar coisas juntos e construir com base no trabalho dos outros ao invés de recriar coisas do zero."
― Alla Kholmatova, Design Systems
2. Teoria é importante. Prática também.
Ninguém acorda um dia e sai projetando um Design System. É necessário muita pesquisa, embasamento e processo. Por outro lado os stakeholders vão querer ver resultados, e logo. Todos têm que botar a mão na massa e trabalhar de forma iterativa.
3. Primeiro faça, depois faça direito, depois faça melhor.
Se você quer todos envolvidos, todos precisam se sentir acolhidos a colaborar.
Isso significa começar simples para iterar depois. Talvez signifique começar sem processo formalizado. Talvez signifique começar com ferramentas simplórias. Simplificar a participaçao de todos no início bos pareceu mais importante que qualquer outra coisa.
Iterar sobre componentes porém é mais sensível, pois mudanças estruturais em componentes podem gerar os temidos "breaking changes". Estes forçam que todos usando a biblioteca tenham que adaptar seus códigos. Por isso um processo de validação de novos componentes é bastante importante, evitando o retrabalho.
Já iterar sobre ferramentas e processos é bem mais simples. Quanto mais pessoas forem se envolvendo e mais contexto for acumulado mais fácil vai ser tomar decisões. Nem ditadura, nem democracia, mas algo no meio destes é o que tem funcionado pra nós.
4. Colaborar é preciso
Quanto mais gente usando, melhor. É preciso criar tração, e convergir as perspectivas e expectativas de todos envolvidos: designers, desenvolvedores, suporte.
Pra mais gente usar é necessário documentação, guidelines inteligentes e objetivas e, claro, facilidade de uso.
5. Se não está documentado, não existe
Documentar um sistema de design significa muito mais do que ensinar a usar seus componentes, significa compartilhar uma visão de produto com todos que se utilizarão daquela linguagem.
O foco não é em limitar os possíveis usos, apesar de que isso pode frequentemente acontecer. O foco deve ser guiar decisões para se manterem alinhadas, e remover dúvidas do caminho para permitir mais usos criativos do sistema.
6. Não deixe ele morrer
Desenvolver um Design System exige maturidade, alinhamento, disciplina e organização. Se você não tiver um deles não vai dar certo. Mas não se desespere, é só identificar qual deles está faltando e trabalhar nisso!
É preciso agir com energia e assertividade em direção aos objetivos. Um Design System não vai funcionar se for levado com superficialidade. Ele precisa ganhar tração, e precisa ser feito por muitas mãos.
Se empolgou com os desafios? Estamos contratando! Saiba mais em careers.vtex.com
