Design System num passe de Magica
Como um projeto de prova de conceito evoluiu para se tornar um pilar importante na Conta Azul
Não faz tanto tempo assim que Design System se tornou uma temática de grande peso e repercussão nas comunidades de design mundo afora. Embora seus conceitos essenciais baseiem-se em princípios conhecidos e, por vezes, até óbvios, como escalabilidade e padronização, é notório que o tema ganhou maior importância, além de um olhar especial em relação a sua aplicação.
Seguindo essa tendência e alinhada às suas próprias necessidades, a Conta Azul também passou a utilizar dos benefícios do Design System. Isso resultou em uma série de escolhas e mudanças a partir de 2018, que refletem até os dias atuais. E é justamente sobre isso que este artigo trata, uma review de como nosso time se transformou, quais desafios enfrentou e o que aprendemos ao longo dos últimos dois anos. Bora conferir? =)
OS PRIMEIROS PASSOS
Em meados de 2018, a Conta Azul passava por um processo de reorganização de times e redirecionamento de produto. Naquelas circunstâncias, tínhamos o grande desafio de escalar o produto e alavancar a produtividade de nossos designers e desenvolvedores, apoiando suas rotinas.
Foi nesse contexto que, na época, analisando o frescor das ideias que a comunidade apresentava, surgiu o time de Design System. Foi inspirados pelos conceitos apresentados por Brad Frost e Nathan Curtis que desenhamos o escopo com base no qual o time atuaria, seus objetivos e possíveis entregáveis.
Design System tornou-se ali uma iniciativa compartilhada entre Engenharia e Design, cujo ideal era disseminar a cultura do reaproveitamento de código, da padronização de fluxos e componentes e, por fim, a preocupação em entregar uma experiência uau aos nossos usuários com o equilíbrio medido entre negócio, tecnologia e usabilidade. Era de fato um produto servindo outros produtos, como o próprio Nathan Curtis diria.
Seguindo os princípios de Atomic Design, os primeiros componentes começaram a ser desenvolvidos e disponibilizados para uso em nossa biblioteca interna.
Paralelamente, as primeiras discoveries focadas em criação e análise de componentes também surgiram, e neste ponto o time inteiro de Design da Conta Azul teve um papel fundamental. Os designers passaram a apoiar o projeto fornecendo as percepções de seus contextos de trabalho, visões dos usuários e insumos para a construção e documentação de cada componente.
Começava a tomar forma o Magica, sem acento mesmo, a nossa documentação de componentes e coração de nosso Design System. Nele descrevemos a anatomia, boas práticas e exemplos de uso para cada componente. Além de funcionar como uma coleção de direcionamentos para outros padrões visuais.
Nessa época, porém, a ideia de ter um time focado em desenvolver recursos para os desenvolvedores e designers era somente uma hipótese, um projeto em período de prova de conceito. Era preciso então, dada a situação, que o time mostrasse o devido valor de sua existência para a organização. Para isso, recorremos ao mundo frio e exato dos dados!
VALIDANDO O PROJETO
Para começar, mapeamos todos os elementos relacionados a nossa interface que apresentavam alguma inconsistência, duplicidade ou falta de padrão. Como, por exemplo, a quantidade de cores, tamanhos de fonte e espaçamento diferentes já aplicados e espalhados pela plataforma. Levando isso em consideração, foi realizada uma comparação dos mesmos aspectos depois que alguns componentes criados pelo time passaram a ser usados.
Outro fator importante levantado foi o tempo médio que o desenvolvedores dedicavam para o desenvolverem telas antes e depois do time de Design System. Além disso, coletamos as percepções dos designers e desenvolvedores a respeito do impacto das ações do nosso time em suas rotinas.
Uma vez coletadas as evidências, e com o respaldo das lideranças, o time apresentou à Conta Azul os indicadores e os efeitos que a implantação do recente time de Design System teve na empresa. Resultado? Compreensão por parte da empresa de que a iniciativa fazia sentido e reconhecimento por meio de investimentos no time.
AMADURECIMENTO
Entramos no ano de 2019 com o time de Design System sob olhares de expectativa e ansiedade. Metas audaciosas foram desenhadas para o ano, e a grande pergunta que surgia era: como Design System pode ajudar o time de P&D (Pesquisa e Desenvolvimento) a alcançar seus objetivos?
Tentando responder a este questionamento começamos um outro debate junto a outros stakeholders do time: Design System deveria estar dentro das iniciativas de P&D e entregar valor diretamente ao nosso usuário final ou ser um time de apoio que auxilia os outros times por meio de suas entregas e documentação?
Prometo que voltarei para responder a essas perguntas que ficaram abertas ali em cima, mas o fato é que elas tomara tempo em nossas discussões, e enquanto isso acontecia o time cresceu.
Em janeiro daquele ano, Jim (desenvolvedor) e eu, Xavier, (designer), passamos a integrar a equipe. Entramos para ajudar a dar vazão para as demandas que surgiam em ritmo acelerado. Jim passou a apoiar no desenvolvimento de componentes, correção de bugs e principalmente apoio aos desenvolvedores da empresa no uso e criação de novos componentes. Enquanto isso, eu passei a auxiliar a padronização e documentação de componentes, enriquecendo assim o Magica; bem como auxiliando os designers na construção de fluxos e protótipos e na difusão da cultura de Design System.
O time foi construindo uma identidade, traçando a rota para onde gostaria de caminhar, quais pontos atuaria e quais seriam suas responsabilidades. Fomos entendendo como conseguíamos impactar nosso usuário final, aqueles que usam a plataforma Conta Azul, atuando de maneira indireta. Escolhemos trabalhar com uma visão holística do produto, estruturante, não limitado às entregas previstas no planejamento de P&D.
Atuávamos junto a cada designer e desenvolvedor para que ele, em seu próprio time, fosse um entusiasta de Design System, aplicando nossos conceitos, criando soluções com os componentes já existentes e favorecendo a escalabilidade das entregas.
APRENDIZADOS
Encontramos respostas para as perguntas anteriores, mas aplicar os conceitos não foi tarefa fácil.
Primeiramente, porque aprendemos que uma de nossas principais dificuldades era a constante disseminação e manutenção da cultura de Design System. Fazer com que os designers não enxergassem a documentação e definições como limitadores de sua criatividade era e é desafiador.
Precisamos atuar próximos a eles e também entender suas perspectivas para que vejam Design System como um ponto de apoio, que facilita o seu fluxo de descoberta. Dessa forma, eles podem concentrar suas energias em aspectos mais complexos de uma determinada iniciativa, do que somente nos elementos visuais que compõem uma tela.
Para fazer esse paralelo também com os desenvolvedores, proporcionamos uma biblioteca de código reutilizável, que são os componentes, diminuindo a necessidade de retrabalho e permitindo que eles concentrem seus esforços nas regras de negócio e em outras questões referentes ao produto.
Preocupados com estes aspectos culturais, passamos a apresentar nas imersões (período de entrada de novos Azuis) conteúdos relacionados a Design System, levar essa temática nos encontros das guildas de Design e de Engenharia, além de criar ações de marketing (espalhando cartazes sobre o time pela nossa sede).
Outro aprendizado é a comunicação das nossas ações. Em diversos momentos recebemos questionamentos do tipo: “Porque vai levar tanto tempo pra fazer um componente?”, “Podemos antecipá-la?”, “Em quanto tempo vocês acham que o componente ficará pronto?” e “Por que vocês estão priorizando isso?”
Sentimos, então, que era preciso alinhar as expectativas sobre quais são as responsabilidades do time. Vimos que o nosso problema não era o tempo que dedicávamos à implementação de um componente ou à definição de um comportamento em si, mas sim nossas falhas de comunicação.
Para resolver isso, começamos a estruturar melhor o planejamento de nosso roadmap trimestral. Passamos a ouvir mais os clientes de nosso produto (designers, engenheiros e gestores de produto) para entender quais iniciativas deveríamos priorizar de modo que estivessemos alinhados aos objetivos da empresa naquele trimestre. Aplicamos o Design System Checklist apresentado por Nathan Curtis neste artigo, reunindo todas essas pessoas para nos ajudar a determinar quais eram os pontos de urgência.
Além disso, discutíamos enquanto time o que fazia sentido ser priorizado, para uma vez definido, apresentar o roadmap nos fóruns de Design, Engenharia e Produto, com o objetivo estabelecer um compromisso.
Isso ajudou positivamente, pois as pessoas passaram a entender o que estávamos fazendo e por qual motivo estávamos fazendo. Ganhamos mais autonomia para seguir nosso plano de ações do trimestre e não alterá-lo a cada necessidade corriqueira que aparecia.
DESAFIOS
Nestes quase 2 anos da existência do time o foco e o tipo das entregas variaram de acordo com o momento e maturidade do nosso Design System.
Iniciamos nossos trabalhos com o enfoque no desenvolvimento ágil de componentes, afinal precisávamos fornecer os recursos para os times. Foi um período intenso onde se priorizou a quantidade de itens componentizados.
Passado este estágio de grande demanda, começamos a revisitar alguns comportamentos e a aperfeiçoar nossa documentação. Era preciso que olhássemos para cada elemento criado com o foco em melhorar a usabilidade e a aplicação contextual. Uma vez que já alcançamos um número significativo de componentes e agora podemos usar deste tempo para avaliá-los. E é justamente neste contexto que nos encontramos e para onde direcionaremos nossos esforços.
Além disso, outros desafios permeiam o time. Estes, estão relacionados a visões geral de médio e longo prazo para o produto, bem como a construção de guidelines que apoiem tais projetos, como por exemplo diretrizes para aplicação de propagandas usando componentes, animação e microinterações na plataforma, data visualization e design patterns.
Paralelamente, existe um grande anseio de usar Design System para impulsionar outros setores da empresa, impactando em sua estratégia anual.
O que vem por aí?
Criamos um Design System robusto, que apesar de necessitar de constantes melhorias, proporciona aos designers e desenvolvedores um entendimento a respeito da linguagem de design da Conta Azul, a qual preza que todos os nossos pontos de contato tenham a nossa cara, o nosso tom e voz.
Agora, o time de Design System da Conta Azul segue sua jornada, com novas pessoas e novos desafios, mas com a mesma motivação de ser um produto que serve outros produtos.
Hoje, levamos a frente o projeto que começou como uma aposta, mas se tornou um pilar fundamental na perspectiva estratégica da empresa, buscando vencer os desafios apresentados ao longo deste texto. Afinal, como Alex Schleifer, Chief Design Officer no Airbnb, disse uma vez: “você não pode inovar em produtos sem antes inovar a maneira como os cria”.
Obrigado por ler!
Adoraríamos ouvir a sua opinião sobre este artigo. O que você tem visto e lido por aí? A sua empresa também tem ou está pensando em criar um time Design System? Quais desafios vocês enfrentam?
E aí, gostou? Não esquece de 👏
