XP INVESTIMENTOS

Templates Componentizados para o App XP Investimentos

• Criação de templates personalizáveis
• Sessões de critique e cocriação
• Apresentações para os times
• Documentação completa dos templates
• Cocriação de componentes com Design Ops

• Product Design
• UX/UI
• Dinâmicas
• Design System
• Documentação

- 01. O contexto

O app da XP reúne uma variedade de jornadas, desde aplicações simples até produtos financeiros mais complexos. Tudo isso desenvolvido por múltiplos times de design e tecnologia.

O projeto surgiu quando a empresa enfrentava dois grandes desafios no design do seu app: a falta de padronização visual entre telas e o retrabalho causado por diferentes times criando soluções parecidas de forma isolada. Como resposta a esses problemas, foi iniciado um projeto para desenvolver templates reutilizáveis e componentizados no Figma, que servissem como base para novas jornadas e facilitassem a escala do produto.

- 02. O desafio

O desafio era criar bases comuns e reutilizáveis que garantissem consistência visual entre as telas do app e reduzissem o retrabalho entre os times, sem comprometer a autonomia de cada squad.

Fui integrante da frente responsável pela criação dos templates, uma iniciativa estratégica que envolvia não apenas design visual, mas também alinhamento entre times, pensamento sistêmico e visão de produto. Minha atuação começou com o mapeamento completo das telas e jornadas onde os templates teriam impacto, seguido por conversas com designers de diversos squads para entender variações de uso, necessidades específicas e pontos de fricção. A partir desses insumos, iniciei o processo de ideação e criação dos primeiros rascunhos, sempre validando com o time de design por meio de critiques colaborativos.

Além da criação visual, trabalhei em parceria com o time de Design System

Atuamos colaborativamente para garantir que os templates fossem construídos com componentes atualizados e escaláveis, propondo ajustes e novos elementos sempre que necessário. Também fui responsável pela documentação completa da biblioteca, com boas práticas de uso, exemplos, especificações técnicas e orientações para desenvolvedores — tornando o material acessível, útil e pronto para uso imediato por outras equipes.

Templates personalizáveis para o app • Templates personalizáveis para o app •
Templates personalizáveis para o app • Templates personalizáveis para o app
- 03. Entregas e resultados

Com os templates a equipe de design passou a entregar jornadas até 3x mais rápido

No projeto ao todo foram feitos os seguintes processos:

• Mapeamento completo das telas e padrões recorrentes onde os templates seriam aplicados.
• Alinhamento com designers de diferentes squads para entender necessidades específicas de uso e adaptação.
• Criação, validação e iteração dos templates, com sessões de critique e ajustes colaborativos.
• Integração com o Design System, criando componentes quando necessário ou propondo melhorias.
• Documentação detalhada com boas práticas, exemplos de uso, orientações técnicas e padronizações para desenvolvedores.

- 05. Depoimento

O que a liderança do projeto diz sobre a minha atuação

“Seu desempenho no projeto foi super positivo. Ele se adaptou rapidamente, adquiriu o conhecimento técnico necessário e se conectou bem com a equipe. Seu relacionamento interpessoal e postura são pontos a serem ressaltados. Ele se soube lidar de forma eficaz em situações delicadas e navegou com habilidade nas interações que exigiram maior jogo de cintura. Do ponto de vista técnico, ele demonstrou facilidade em absorver as informações necessárias para o projeto. Sempre buscou esclarecimentos e se dedicou para cumprir suas entregas. Ele respeitou os prazos e sinalizou riscos de atraso. A partir do momento em que ganhou confiança, trabalhou de forma bastante independente. Ficamos muito satisfeitos com a atuação dele no projeto :) “

Scroll