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.

Felipe Borges
Feb 27 · 9 min read

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.

Lorena Costa com seus hóspedes Zola, Nanaki, Luma e Paçoca

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.

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:

Cores primárias
Cores de texto
Aqui na DogHero usamos um grid de 8px
Ícones (temos mais de 100)

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:

Header
Informações do anfitrião
Avaliações
Highlights

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:

Template

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.

Página completa

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?

Design System é muito mais que uma biblioteca de elementos

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.

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.

ZeroHight + Sketch

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!


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.

DogHero Brasil

Espaço para compartilharmos cultura, dicas e aprendizados da DogHero!

Felipe Borges

Written by

Product Designer (UX/UI) at @DogHero

DogHero Brasil

Espaço para compartilharmos cultura, dicas e aprendizados da DogHero!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade