SS

fev 2024

Novo Design System PicPay. Criamos um sistema de impacto que viabiliza os pilares de experiência do usuário.

Design System, UI/UX, Motion Design

"O Design System antigo tinha apenas 30% de cobertura em código, gerando divergências entre design e implementação."

1. Problema

O crescimento acelerado do ecossistema do PicPay trouxe novos produtos, squads e jornadas digitais. Com isso, o Design System existente passou a apresentar diferenças entre o que era projetado e o que chegava em produção, inconsistências entre plataformas e dificuldades para acompanhar a velocidade de evolução do produto.

Essas limitações impactavam diretamente a experiência dos usuários e aumentavam o esforço de Design e Engenharia para criar, manter e evoluir interfaces consistentes.

O desafio era transformar o Design System em uma plataforma escalável, capaz de acelerar o desenvolvimento de produtos sem comprometer qualidade, consistência e acessibilidade.

2. Restrições

A evolução do Design System precisava acontecer sem interromper a evolução dos produtos já existentes.

Os principais desafios eram:

  • dezenas de squads consumindo componentes diariamente

  • necessidades diferentes entre diversas unidades de negócio

  • alinhamento constante entre Design e Engenharia

  • necessidade de manter compatibilidade durante a migração dos componentes

  • equilíbrio entre velocidade de entrega e qualidade técnica

Essas restrições exigiam decisões graduais, priorização contínua e colaboração entre diferentes áreas.

3. Minha contribuição

Minha atuação foi conectar Design, Engenharia e Produto para garantir que o Design System evoluísse de forma escalável e pudesse ser adotado por diferentes squads sem comprometer consistência ou velocidade de entrega.

Minhas principais responsabilidades incluíram:

  • Evolução de componentes e padrões do Design System

  • Definição de guidelines para uso dos componentes

  • QA de Design antes da implementação

  • Handoff técnico para Engenharia

  • Identificação de oportunidades de melhoria junto aos squads

  • Facilitação da comunicação entre Design e Desenvolvimento

  • Apoio na governança e adoção do sistema pelos times de produto

Mais do que criar componentes, meu papel era garantir que o sistema pudesse evoluir de forma consistente e sustentável.

4. Decisões-chave

Durante o projeto, algumas decisões tiveram impacto direto na escalabilidade do sistema.

Priorização da cobertura em código

Em vez de criar novos componentes isoladamente, priorizamos aumentar a correspondência entre Design e código, reduzindo diferenças entre o que era projetado e o que chegava à produção.

Componentes mais flexíveis

Optamos por construir componentes capazes de atender diferentes produtos e contextos, reduzindo variações desnecessárias e facilitando a manutenção.

Governança contínua

Em vez de tratar o Design System como um projeto com início e fim, estruturamos processos para evolução contínua, documentação e acompanhamento da adoção pelos squads.

5. Trade-offs

Nem sempre a solução mais completa era a melhor escolha.

Ao longo da evolução do sistema, foi necessário equilibrar diferentes fatores:

  • velocidade de entrega versus qualidade técnica

  • flexibilidade dos componentes versus simplicidade de uso

  • padronização versus necessidades específicas dos produtos

  • evolução do sistema versus compatibilidade com soluções existentes

Em alguns casos, optamos por não criar novos componentes quando pequenas adaptações em componentes existentes resolviam o problema com menor custo de manutenção.

Essas decisões eram tomadas em conjunto com Produto e Engenharia, buscando sempre maximizar o impacto para o negócio sem comprometer a experiência dos usuários.

6. Resultado

A evolução do Design System trouxe ganhos concretos para Design e Engenharia.

Entre os principais resultados alcançados:

  • aumento de 30% na velocidade de desenvolvimento de novas interfaces

  • aumento de 60% na cobertura entre componentes de Design e código

  • aproximadamente 98% de aderência entre o que era projetado e implementado

Além dos indicadores quantitativos, o sistema passou a oferecer maior consistência visual, redução de retrabalho entre equipes e uma base mais sólida para evolução dos produtos digitais do PicPay.

Aprendizados

A principal lição deste projeto foi entender que um Design System não é apenas uma biblioteca de componentes.

Seu valor está na capacidade de conectar pessoas, processos e tecnologia para tornar decisões de Design mais consistentes e escaláveis.

Mais do que desenhar componentes, foi necessário criar alinhamento entre diferentes áreas, equilibrar necessidades de negócio e garantir que o sistema evoluísse junto com o produto.

Home
Itaú Emps