Como o Quinto Andar encara o Design System na prática
Muito além de uma forma de reforçar a marca, o DS pode ser usado para movimentar alavancas de negócios.
Se você já se deparou com o famigerado Design System na empresa onde trabalha, é bem possível que tenha sentido um dos dois sentimentos abaixo:
- Trabalhoso: adequação tanto das equipes de Design quanto de Desenvolvimento ao Design System (ou DS para os íntimos) normalmente remete a revisão do aplicativo/plataforma em questão, e isso requer tempo e atenção para ser realizado.
- Priorização: a consequência direta do item acima, uma vez que realizar a refatoração nos mínimos detalhes do DS muitas vezes levaria o tempo para outras atividades consideradas mais importantes, que poderiam gerar valor real ao usuário de alguma forma.
E é difícil contornar as percepções acima descritas, principalmente porque muitas vezes os próprios designers responsáveis e a empresa não encaram o Design System da forma estratégica e mirando em alavancas reais de negócio, usando discursos vagos que remetem ao brading ou coesão visual, sem efetivamente mensurar o impacto de temas semelhantes.
O tema é tão complexo e pertinente que existem dois episódios (que eu recomendo fortemente serem ouvidos para embasar ainda mais esse artigo) aqui no PG dedicados a ele:
“Como o Design System contribui para a eficiência do produto” com André Chou
“Design System não é só uma biblioteca de componentes” com Camila Lopes
O que é Design System?
Vamos dar um breve para trás, e detalhar do que se trata o termo Design System em detalhes. Usado pela primeira vez na NATO Software Engineering Conference no final dos anos 1960 por Christopher Alexander. Mais tarde, Christoper e outros autores publicaram A Pattern Language, que é considerada a origem dos sistemas de design modernos.
Os princípios desses sistemas foram adaptados para o mundo digital, aumentando sua complexidade para corresponder à web em expansão e o consequente mercado de aplicativos na sequência.
Empresas como Apple em 1987, Google, IBM e Microsoft foram precursoras na criação de linguagens de design abrangentes, que influenciaram a estética de diversas interfaces de usuário. Esses sistemas não visavam apenas a uniformidade visual, mas também a funcionalidade, fornecendo diretrizes detalhadas e padrões reutilizáveis para otimizar o desenvolvimento e tornar o design de IU mais eficiente, atendendo à crescente demanda das equipes de produtos digitais.
Atualmente, o termo começou a ganhar ampla visibilidade no mercado de produtos digitais a partir de 2014 a 2016, impulsionado pelo lançamento de sistemas de design de grandes empresas de tecnologia. Entre os marcos mais significativos estão:
- 2014: O Google apresentou o Material Design, uma das primeiras iniciativas públicas que consolidou o conceito de um sistema de design padronizado para múltiplas plataformas.
- 2016: O Lightning Design System da Salesforce e o Polaris do Shopify foram lançados, reforçando a importância da abordagem.
- 2017-2018: O termo já estava amplamente disseminado, com empresas como Airbnb, IBM e Microsoft investindo fortemente na criação de seus próprios sistemas de design.
Sendo assim, com tantos cases relevantes e mais de 10 anos desde a popularização do termos a nível global, por que até hoje é comum não conseguirmos associá-lo com aspectos positivos dentro da visão estratégica de muitas empresas?
Uma visão sobre o DS com cinco andares de experiência
No início do ano me deparei com um case bem interessante envolvendo o tema Design Systema, publicado pelo Carlos Santana e a Giovana Almeida:
O Design System do QuintoAndar, chamado Cozy, já existia quando o Carlos (Sr. Product Designer Manager) e a Gico (Staff Product Manager) entraram na empresa. No entanto, o sistema ainda dava seus primeiros passos em termos de adoção e cobertura. Um dos primeiros desafios foi a substituição gradual de componentes legados pelo Cozy, um trabalho que levou cerca de um ano e meio.
Durante a pandemia, o foco do time foi direcionado ao consumidor final, com um redesenho da navegação do Cozy através dos componentes para então impactar a experiência dos usuários. Essa experiência foi muito importante para dar ao time conhecimento sobre como trabalhar equilibrando clientes internos e externos. No entanto, a adoção do Design System continuou sendo um obstáculo. Muitos sistemas sofrem com baixa adesão porque os times de design criam componentes esperando que os engenheiros os utilizem, mas sem alinhamento formal.
Rebranding e seus desafios
O ponto de virada da adoção ocorreu com o rebranding do QuintoAndar em 2021, e foi lançado em janeiro de 2022. Essa mudança foi endossada pela liderança, e foi fundamental para a virada de marca sincronizada em todos os produtos por meio do Cozy, eliminando a necessidade de convencer os times a utilizá-lo, pois todo processo de mudança de marca no produto seria feito através dele. Agora, a demanda passou a vir dos próprios designers e desenvolvedores.
O que fazer depois da virada pra nova marca?
Após a primeira experiência impactando diretamente usuários finais em 2020, dois novos grandes desafios diretos no produto surgiram:
Criação do padrão Multisteps – aplicado no agendamento de visitas. A conversão precisava se manter ou aumentar, mas um teste A/B mostrou que o padrão ocupava espaço no topo da tela, reduzindo a visibilidade do carrossel de imóveis similares, prejudicando a conversão. O design precisou ser ajustado para garantir os resultados esperados, mas trouxe muitos aprendizados ao time.
Novo listing no app via Cozy – os anúncios de imóveis do aplicativo estavam desatualizados e passaram a seguir um padrão unificado com os da web apenas através da troca para novas componentes. Com essa mudança, a intenção de proposta cresceu 15%, e melhorias na usabilidade (como a realocação do CTA principal) impactaram diretamente o engajamento.
Templates como uma nova camada de entrega de valor para o chapter
Após a conversão de todos os produtos para o Cozy, o time começou a encarar o desafio de resolver problemas maiores que apenas a componentização. Como facilitar ainda mais o trabalho dos times de design e engenharia agora que todos já consumiam o Cozy minimamente?
Para otimizar essa experiência, o time investiu em templates, que são páginas inteiras entregues via design system. Ao invés de fornecer apenas componentes isoladas, os templates também visavam proporcionar mais eficiência e consistência à nível de interface geral do produto e não só apenas pontual, como um componente.
Dentro desse contexto, dois modelos foram criados:
Global Template – versão simplificada para padronizar as extremidades da interface, facilitando a implementação nativa.
Templates específicos – mapeando padrões recorrentes (como criação de listas ou agendamentos), permitindo reuso eficiente e consistência visual.
A redução de esforço foi significativa: 40-50% no tempo de design e 35% na engenharia para componentes em Flutter.
Após a cobertura inicial, surgiram novos desafios:
Garantir qualidade e escalabilidade
Relacionamento com os times internos
Medindo impacto no cliente final
A partir de 2024, a prioridade passou a ser o lançamento de templates para Flutter. Como resultado, a cobertura de fluxos no app aumentou 27% no app de inquilinos e compradores e 31% no de proprietários, com 28% do app do QuintoAndar já rodando sobre o Cozy Global Template.
Estratégias de adoção contínua e aprendizados
Alinhamento contínuo com Brand: com a iniciativa Visual Refresh, foi revisado o sistema de cores e aprimorados componentes essenciais, como cards e botões.
Engajamento interno: o time organizou o Cozy Day, um evento com quizzes, press kits e brindes para estreitar o relacionamento com outras áreas.
Adoção estruturada: foi criado o programa Cozynheiros, embaixadores do DS dentro das diferentes áreas do QuintoAndar.
Monitoramento da evolução: o time roda pesquisas e testes, além de realizar coleta métricas das entregas para garantir o impacto para o usuário final .
Aprendizados e desafios futuros
A adoção é um desafio contínuo– se o Design System não for utilizado, ele perde relevância. O foco deve ser a expansão interna antes da sofisticação excessiva.
Simplificação e acessibilidade – evitar a complexidade desnecessária para que mais pessoas usem o sistema no dia a dia.
Flexibilidade – o DS deve ser flexível e não monopolizar o processo de design e desenvolvimento.
Case interno para validação – Aplicar às entregas do Cozy em features no produto para validar as funcionalidades e criar cases de sucesso que impulsionam a adoção.
O Design System só é efetivo quando torna o desenvolvimento mais ágil, melhora a experiência do usuário e reduz a complexidade operacional. No caso do Cozy, o QuintoAndar conseguiu consolidar um DS end-to-end, impactando toda a jornada digital, do topo ao final do funil de conversão.