Slinky: O Design System da DogHero
Escalar não é uma escolha! Como construímos a primeira versão do nosso Design System em 90 dias.
Aqui na DogHero temos uma missão. Queremos conectar mães e pais de cachorros com anfitriões e passeadores que fazem parte da nossa comunidade. São pessoas que sabem cuidar, que gostam de cuidar e, mais do que tudo, são loucas por cachorro.
Já são 18 mil anfitriões e passeadores no Brasil, México e Argentina e mais de 800 mil cachorros cadastrados na plataforma. O crescimento é vertiginoso, novos serviços no roadmap, OKRs agressivos e novas features surgindo a cada dia.
Nesse processo, lidamos com pesquisas, layouts, protótipos, testes de usabilidade, para então chegar ao design final. Depois temos que desenvolver, testar novamente e refinar os detalhes. Tudo isso com um time de design extremamente enxuto, claro. Afinal, ainda somos uma startup.
O design ganhou um lugar na mesa. Tornou-se diferencial estratégico e com isso surgiu um novo problema: a dificuldade de nós designers acompanharmos a velocidade de crescimento da DogHero. E, principalmente, a velocidade do time de desenvolvimento.
Então, como fazer o design acompanhar o crescimento da nossa empresa? Design é uma área muitas vezes subjetiva onde cada problema pode ser solucionado de forma diferente, por isso, aumentar o time não é uma solução, isso só traria inconsistências ao produto e prejudicaria muito a experiência do usuário. Afinal, cada designer tende a resolver um problema da sua maneira, e isso, somado ao crescimento acelerado que citei, causaria um grande caos.
Design System
Precisávamos mudar para ganhar velocidade, consistência e padronização. Estabelecemos metas que nos ajudassem a solucionar estes problemas, e através delas ficou bastante claro que havia chegado o momento de começarmos a pensar em um sistema de design coeso, com regras bem definidas. Assim, mergulhamos na buzzword do momento: Design System.
Design System basicamente é um conjunto de elementos que compõem a interface de um produto: cores, tipografia, iconografia, espaçamentos, imagens, animações, etc. É como se todo elemento de uma interface fosse transformado em peças de Lego e catalogadas para que outros designers e desenvolvedores possam reutilizar aquela mesma peça. Tudo isso mediante a regras de utilização claras e objetivas.
Aqui na DogHero, seria a solução ideal. Ganharíamos muito em produtividade, uma vez que as regras estariam documentadas e visíveis para todos - não “precisaríamos” por exemplo, pensar em qual é o espaçamento entre um título e um texto. Isto já seria especificado.
A prototipação seria muito mais eficiente, pois, com todos os elementos e componentes catalogados, conseguiríamos montar um layout em alta fidelidade de forma muito rápida e eficiente.
O controle de qualidade seria muito mais simples de ser feito, uma vez que já existem padrões e regras bem definidas.
O Design System também possibilitaria uma manutenção centralizada, já que todos os componentes estão catalogados em um único lugar. Bastaria alterar um ícone na biblioteca central e ele seria alterado automaticamente em todos os layouts.
Também conseguiríamos maior consistência e padrão sem precisar gastar muito tempo em revisões e refações. Essa era uma premissa essencial frente ao crescimento acelerado que temos.
Por fim, teríamos maior clareza nas decisões, afinal existe um conjunto de regras a serem seguidas e não existe espaço para “achismos” ou dúvidas.
Dessa forma, nós do time de Design da DogHero conseguiríamos focar no que importa: O usuário e o negócio. Investir mais tempo em pesquisa, entendimento, novas interações e experiências centradas em pessoas e menos tempo em pixel, cores e layout. Parece incrível, não?
Seguindo esta mesma linha, os desenvolvedores também ganham. Diminui o tempo de desenvolvimento e sobra tempo para focar em novas tecnologias.
Ok, mas por onde começamos?
Já tínhamos muitos elementos, componentes e layouts criados e percebemos que a melhor maneira de começar seria catalogando e organizando todos eles. Qual a melhor maneira de fazer isso? Para a gente, o atomic design caiu como uma luva.
Para resumir, atomic design é um modelo mental criado por Brad Frost, com o objetivo de nos ajudar a pensar nas interfaces de usuário de uma maneira mais fragmentada e ao mesmo tempo mais completa.
O Atomic Design é uma metodologia que nos ajuda a pensar na interface do usuário (UI) de maneira hierárquica e reforça a importância da qualidade de pattern libraries eficazes, e apresenta técnicas para otimizar o fluxo de trabalho do design e desenvolvimento em equipe. O Atomic Design também detalha o que acontece durante a criação e manutenção de sistemas de design, permitindo a implementação de UIs com mais consistência e qualidade.
A principal premissa é a metáfora com elementos químicos, que se unem e se transformam em outros elementos. Seguindo essa linha nós temos:
Átomos:
Átomos são a menor parte da matéria, são indivisíveis e servem como os blocos de construção fundamentais que vão compor as interfaces de usuário. Nosso produto pode ter diversos átomos diferentes, por exemplo:
Moléculas
Moléculas são a união de átomos e criam grupos relativamente simples de elementos da interface funcionando juntos como uma unidade. Elas criam as primeiras metáforas:
Organismos
Organismos são grupos de moléculas que formam uma parte distinta e relativamente complexa da interface, eles são elementos independentes:
Templates
Templates são responsáveis pela estrutura da página onde distribuímos os componentes dando forma ao layout e definindo modelos a serem reutilizados eventualmente:
Páginas
As páginas são seres completos, temos o conteúdo que vem do banco de dados, as imagens reais, valores e outras informações.
Resumindo, nossa aplicação do atomic design ficou dessa forma:
Utilizamos o Sketch para criar uma biblioteca compartilhada com todos esses assets, um grande avanço em direção a consistência do produto e na agilidade com que desenhamos uma solução. Agora sim, estamos falando em peças de Lego!
Vale lembrar que apesar da agilidade, é necessário tomar cuidado para não ficarmos engessados. Sempre é importante questionar se a biblioteca resolve o problema que estamos enfrentando, ou seja, balancear e equilibrar velocidade versus experiência.
Compartilhar a informação
Mas uma biblioteca bem organizada e compartilhada ainda não é um Design System! Precisávamos de um documento robusto, que contenha as regras claras, princípios e as ferramentas necessárias para ajudar as equipes da DogHero, ou seja, ele seria utilizado para consulta e tomada de decisões sobre novas features e soluções.
Queríamos um documento de fácil entendimento, que garantisse toda a empresa na mesma página. Além disso ele não poderia ser estático, nosso Design System poderia e deveria sofrer constantes atualizações.
Para começar essa construção, passamos a responder algumas perguntas:
1. Quais são os princípios de design por trás de nosso produto?
2. Como nosso produto deve se comunicar e se comportar?
3. Como deve ser sua “aparência”? Algo precisa ser mudado?
4. Quais são os componentes de código necessários?
Princípios de design
A primeira pergunta foi fundamental, suas respostas servem para guiar nossas equipes em todas as decisões de design. Sempre devemos nos perguntar se a solução que estamos criando está de acordo com nossos princípios de design.
Quando começamos a pensar sobre nossos princípios, começou também a surgir o Slinky (sim, o cachorro mola do filme Toy Story)!
Um parêntese para uma curiosidade: aqui na DogHero tudo tem nome de cachorro famoso, temos o Scooby, Costelinha, Coragem (o cão covarde) e por aí vai…
Não poderia ser diferente com nosso Design System. Mas por que Slinky? Bem, porque nossos princípios de design tem tudo a ver com ele!
Flexível
Nossos elementos são pensados e desenhados para funcionar perfeitamente entre si, em qualquer combinação necessária ao nosso usuário.
Sociável
Nossas soluções devem ser simples e de fácil entendimento. Acessível a todos, independente da capacidade ou atuação do usuário.
Companheiro
Sempre estamos próximos do nosso cliente, entendendo quais são seus problemas e dificuldades para que possamos sempre facilitar ao máximo suas ações. Para isso devemos sempre rodar pesquisas com nossos usuários. Ou seja, o Slinky é baseado nos problemas de pessoas reais.
Fiel
Todos os nossos componentes devem manter um padrão DogHero. Eles são projetados para funcionar juntos e garantir uma experiência do usuário consistente e coesa.
Com esta primeira pergunta respondida e com nossa biblioteca organizada, passamos a buscar soluções para tornar o acesso a tudo isso simples e rápido.
ZeroHeight
A solução mais interessante para compilar estes princípios, boas práticas, regras e componentes parecia ser um ambiente online. Nesta busca nos deparamos com várias ferramentas, em particular o ZeroHeight.
Ele é um serviço online que cria style guides bem organizados e sincronizados diretamente com nossa biblioteca do Sketch, basta pressionar um botão para atualizar novos componentes criados.
Ele também possui integração com código, nossos desenvolvedores podem contribuir com HTML, CSS, JS e outras linguagens que estão em nosso produto ou usar componentes integrados diretamente do GitHub.
Qualquer um com acesso pode editar e criar conteúdo. E todos da empresa podem acessar a documentação através de um link personalizado.
Próximos passos
A documentação que criamos não está apenas auxiliando desenvolvedores e designers, mas todas as áreas da empresa. Todos passam a falar a mesma língua e dessa forma conseguimos ter um processo mais colaborativo.
No momento, estamos focados em responder as outras 3 perguntas que citei lá em cima, e este é um processo constante e iterativo. Seguimos concentrados em definir padrões de usabilidade para nossos componentes principais (cards, botões, placeholders, etc) e inserir uma biblioteca de código para eles.
Por isso, este é apenas o primeiro artigo de uma série onde vamos falar mais sobre o Design System da DogHero e contar nossa trajetória por essa jornada. Então fique ligado nos próximos episódios!
Obrigado pela leitura!
E aí, gostou do texto? Adoraríamos saber sua opinião sobre o que foi escrito por aqui. Deixe seu comentário e siga a DogHero no Medium para acompanhar as próximas publicações! 🐶
Gostaria de trabalhar com a gente? Confira nossas vagas abertas.
