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, 2019 · 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

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?

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

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

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

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

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!

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