O estado atual do ~árduo processo de~ design de produtos digitais

Ferramentas, processos e outras frustrações.

TL;DR

• Nosso workflow atual de concepção e manutenção de produtos digitais continua longe de ser o ideal (mais a fundo sobre isso em posts futuros);
• Nossas ferramentas não evoluíram muito nos últimos 30 anos;
• Documentar padrões de interface em um style guides por sí só não vai resolver as inconsistências de interface e interação do seu produto;
• Sem um processo claro e holístico, seu style guide e documentações cairão em desuso;
• Implementar um Design System na sua equipe/empresa/produto é a "nova tendência" que propõe uma conexão maior entre as equipes e foca em garantir uma consistência visual e comportamental maior para seu produto.
• Vou escrever uma série de posts mais técnicos e detalhados para compartilhar meu ponto de vista sobre como implementar um Design System utilizando as novas ferramentas que estão disponíveis hoje.

Vou contar uma história que qualquer um que já trabalhou no desenvolvimentos de produtos digitais deve ter sentido na pele.

A euforia da criação de um produto digital

Aposto que você, meu caro amigo, já sentiu aquela sensação gostosa de projetar seu produto do zero. Buscou referências e inspiração nas melhores startups do mundo, fez uma porrada de protótipos, foi construindo o produto com muito suor. Estabeleceu uma paleta de cores para o projeto, aquela escala tipográfica maneira, todos os padrões de interação dos formulários, validação, alertas, erros, botões, call to actions, e por aí vaí, o pacote completo. Depois você foi documentar tudo com muito carinho naquele style guide maroto e compartilhou com sua equipe com aquele sorriso no rosto de quem sabe que deu seu melhor. Quem nunca?

The struggle is real

Com o passar do tempo, a correria do dia a dia, o bombardeio de feature requests e prazos nem sempre muito amigáveis, você acaba percebendo que o seu querido style guide acaba caindo em desuso e todo seu belíssimo trabalho em racionalizar todas as decisões de interface acaba se perdendo com o tempo.

Para cada nova sprint, feature ou alteração que aparece, existe uma grande chance de você ou alguém da sua equipe acabar se deparando com alguma necessidade ou comportamento específico que o seu style guide não prevê. Isso, somado a correria do dia a dia, acaba levando sua equipe a tomar decisões arbitrárias de interface ou comportamento e o nível de aleatoriedade e falta de consistência se alastra como uma praga por toda aplicação.

Quem nunca passou por isso? Afinal de contas é natural que com a necessidade que temos de iterar o produto rapidamente, esse tipo de inconsistência acabe acontecendo, certo? O dia a dia de uma startup sempre acaba sendo corrido demais para manter atualizada uma "biblioteca de estilos" onde as únicas pessoas que veem valor são os designers.

Essa falta de consistência de aplicação acaba gerando efeitos colaterais como:

• Seu produto vai ficando inflado de comportamentos diferentes para interações que deveriam ter uma unidade, o que impacta diretamente na experiência dos seus usuários.
• Todos designers envolvidos no processo acabam inevitavelmente ou perdendo muito tempo para descobrir quais comportamentos deveriam utilizar (e consequentemente perdendo agilidade), ou acabam aumentando ainda mais o nível de aleatoriedade de interação criando novos comportamentos.

I know that feel, bro

Tive muita sorte de poder trabalhar (junto com toda equipe do MATILHA) na concepção de vários produtos digitais nos últimos anos, e essas dores sempre foram uma constante. Eu venho aprendendo com os próprios erros, experimentando muito, e testando diversas soluções para diminuir a entropia dos produtos e garantir que a "integridade" da aplicação durante seu processo de amadurecimento.

Com o passar do tempo fui percebendo que essa é a realidade da maioria das empresas e equipes de produto que existem por aí. Escalar um produto de maneira consistente ao longo do tempo não é uma tarefa fácil e muito tem se discutido ultimamente a respeito de soluções, ferramentas e processos para mudar essa realidade.

O fato é que ainda não existe nenhuma solução perfeita para resolver todos os nossos problemas e nossas ferramentas de trabalho estão ultrapassadas e muito distantes das necessidades do nosso dia a dia (só esse tópico das ferramentas já rende uma longa conversa a parte, mas se quiser saber um pouco mais sobre o que eu estou falando, da uma olhada neste artigo sobre "Declarative Design Tools" , do Jon Gold).

Muitas startups gigantes também estão sofrendo dos mesmos males que nós, meros mortais, e estão investindo pesado e criando departamentos de "Design Operations" para desenvolver seus Design Systems para tratar desses problemas. Nesses departamentos os profissionais são responsáveis por aprimorar os processos e desenvolver novas ferramentas que proporcionem um workflow melhor e dar mais agilidade para prototipar soluções (Facebook com o Origami), escalar interfaces e aproximar cada vez mais o design do desenvolvimento (Airbnb com o react-sketch, Lottie e outros).

Design System is the new black

Equipe e produto em sintonia.

Muitos de vocês já devem ter ouvido falar desse termo (que muitas vezes é confundido com style guides) e ainda tem muita confusão a respeito desse termo.

De uma maneira bem direta, um style guide é um entregável, uma documentação do produto, e um Design System é o processo. Um processo de concepção, documentação e implementação do produto seguindo o propósito, estratégia, comunicação e valores da empresa.

Esse processo possibilita aumentar a consistência do produto de maneira contínua, gradual e responder a mudanças e evolução do produto mais rapidamente. Ao contrário de um simples style guide, para se criar um Design System é necessário a colaboração e aceitação da equipe como um todo. Toda equipe deve estar alinhada e consciente dos objetivos para que todos caminhem na mesma direção.

Meus exemplos favoritos de empresas que estão se saindo muito bem nesse cenário de Design Systems até agora são Airbnb (óbvio), Shopify Polaris, Google Material Design e a Atlassian. Quem utilizava o BitBucket antes desse DLS da Atlassian sabe do que eu estou falando.

Refactoring is a second chance that a lot of industries just don’t get.

Harry Roberts

É necessário incorporar a mentalidade de que seu produto é um organismo vivo, que precisa se adaptar ao contexto rapidamente, e que nesse processo muita interface, códigos, convenções e documentações serão jogados fora ou reconstruídos frequentemente. Garantir que essa iteração aconteça de maneira sustentável, sistêmica e consistente é o objetivo de se estabelecer um Design System na sua empresa.

Para ser mais objetivo, vou pontuar algumas vantagems de implementar um DS no seu(s) produto(s):

1. É um processo cocriativo — Coloca toda sua equipe na mesma página e alinhados sobre o estado atual do produto.
2. Foca no processo como um todo — Leva em consideração todo ciclo de desenvolvimento do seu produto, com todas etapas que você e sua equipe acreditam ser necessárias.
3. Harder, Better, Faster, Stronger — Sem se preocupar com inconsistências e em criar novos padrões toda hora, sua equipe tem mais tempo para estar em contato com os usuários e atacar problemas maiores.
4. Mais consistência = melhor experiência — As pessoas odeiam aprender a utilizar softwares e odeiam ainda mais ter que aprender a utilizar cada feature do seu produto com comportamentos e interações inconsistentes. Um produto consistente com certeza irá tornar a experiência das pessoas que utilizam seu produto muito mais agradável.
5. Diminui a barreira para novos membros da equipe — Ter todos os princípios da sua empresa consolidados, junto com seus componentes de interface, posicionamento de marca, tom de voz, jargões técnicos e tudo mais (você e sua equipe definem o que é necessário), torna o onboarding de novos profissionais para sua equipe muito rápido e agradável.

No final todos saem ganhando. Do ponto de vista de negócio, sua equipe de produto se mantém sempre alinhada e mais ágil. Do ponto de vista do usuário final, é ótimo pois proporciona uma experiência uniforme e coerente por toda sua aplicação (ou aplicações).