Questrade Design System
Na Questrade, fui responsável por liderar a evolução do AllSpark — o sistema de design unificado da empresa — atuando em várias frentes estratégicas.
Embora eu tenha definido a visão e a estratégia de execução, esse trabalho esteve longe de ser solitário. O AllSpark foi fruto de uma colaboração profunda com um grupo incrível de designers, engenheiros e profissionais de produto — um time que realmente acreditava em criar ferramentas que tornassem o trabalho de todos melhor, mais rápido e mais alinhado.
Nosso objetivo era mais do que construir uma biblioteca de componentes — queríamos oferecer um ecossistema confiável onde designers e desenvolvedores pudessem confiar no que estavam usando, iterar com rapidez e focar na solução de problemas reais, ao invés de reinventar padrões de UI.
O desafio
À medida que os times de produto da Questrade cresciam, aumentava também a complexidade de manter experiências consistentes. Tínhamos ótimos profissionais de design e engenharia, mas atuando de forma isolada, sem uma fonte única de verdade.
Perguntas como essas eram recorrentes:
• "Já temos um dropdown ou preciso criar um?"
• "Qual estilo de texto é o correto aqui?"
• "Posso destacar esse componente e fazer uma pequena mudança?"
Esses pontos de atrito, embora pequenos individualmente, somavam-se — levando a UIs inconsistentes, entregas mais lentas, retrabalho e desalinhamento entre os produtos.
O desafio não era apenas organizar o que já existia, mas construir um sistema que as pessoas realmente quisessem usar. Um sistema flexível, mas estruturado. Preciso, sem ser engessado. E acima de tudo, acessível e confiável para diferentes equipes, contextos e prazos.
Meu Papel
Como Design System Lead, fui responsável por definir, organizar e impulsionar o AllSpark. Mas nada disso seria possível sem o apoio do time talentoso com quem trabalhei — que ajudou a moldar o sistema com feedbacks, código e colaboração contínua.
Aqui estão minhas principais contribuições:
• Direção Estratégica — Defini a visão, prioridades e roadmap de evolução do sistema em alinhamento com liderança de design e produto.
• Arquitetura de Componentes — Liderei o design de componentes reutilizáveis, flexíveis e acessíveis no Figma, equilibrando consistência e necessidades específicas de cada time.
• Colaboração Cross-functional — Trabalhei próximo aos desenvolvedores para garantir que o design refletisse a implementação, cobrindo gaps de comportamento e evitando lógica duplicada.
• Documentação & Onboarding — Criei materiais claros e escaláveis para onboarding, permitindo que os times atuassem com autonomia e confiança.
• Governança & Qualidade — Revisei contribuições, organizei auditorias e ajudei a esclarecer regras de uso e intenção de design.
• Análise do Sistema — Modelei um dashboard para monitorar o uso, identificar componentes subutilizados e orientar melhorias baseadas em dados.
Essa função exigiu uma combinação de craft, pensamento sistêmico e habilidades interpessoais — promovendo clareza e estrutura, sem deixar de ouvir e se adaptar às necessidades da empresa.
Fluxo de Trabalho Design–Dev
Uma das nossas maiores forças foi o forte alinhamento entre design e desenvolvimento. Para garantir colaboração fluida e evitar inconsistências, adotamos um fluxo de trabalho baseado em branches no Figma.
Para cada nova feature, criávamos uma branch dedicada no arquivo de design. Isso nos permitia trabalhar isoladamente, sem impactar o sistema principal ou outras iniciativas. Após os desenvolvedores finalizarem a implementação e sincronizarmos os avanços, a branch era unificada ao arquivo principal — garantindo que o design estivesse sempre alinhado com o que estava em produção.
Esse processo nos ajudou a:
• Manter o arquivo principal limpo e atualizado
• Evitar atualizações redundantes ou conflitantes entre equipes
• Estar em sincronia com o ciclo de desenvolvimento sem atrasar o processo de design
Foi um processo simples, mas eficaz, que trouxe clareza, reduziu retrabalho e fortaleceu a colaboração entre design e engenharia.
Arquitetura de Componentes
No AllSpark, projetamos e documentamos dezenas de componentes reutilizáveis — desde elementos básicos (botões, inputs, checkboxes) até interações mais complexas (acordes, banners, steppers, toasts e chips). Cada item foi testado em diferentes breakpoints, temas e diretrizes de acessibilidade.
Não projetamos apenas estados visuais — criamos soluções para cenários reais. Isso incluía casos de borda, conteúdos incorporados, restrições de layout e múltiplas densidades de UI.
Documentação Detalhada
Cada componente do AllSpark vinha com documentação completa e estruturada em camadas — incluindo diagramas anatômicos, regras de uso, comportamentos de interação e critérios de acessibilidade. Nosso objetivo era eliminar achismos e promover um entendimento claro entre design e desenvolvimento.
Essa documentação ajudou a reduzir inconsistências entre os produtos e mostrou como e quando usar (ou evitar) determinado componente.
Onboarding de Designers
Um sistema só é eficaz se puder ser compreendido e adotado com facilidade. Criamos um site de documentação estruturado e uma experiência de onboarding que tornava o AllSpark fácil de explorar, buscar e aplicar — especialmente para novos designers na equipe.
Esse guia ajudava os usuários a conectar a biblioteca, entender tokens e temas, e encontrar os componentes ideais para o fluxo de trabalho. Ele foi essencial para reduzir atrito e dependência de suporte.
Também criei recursos assíncronos como páginas explicativas, exemplos de padrões e guias de contribuição — permitindo que designers aprendessem no seu próprio ritmo.
Mensurando o Impacto
Para entender o desempenho do sistema e onde focar melhorias, desenvolvi um dashboard personalizado com métricas-chave como uso de componentes, taxas de desanexação e engajamento por equipe
Em apenas um mês, o painel registrou mais de 13.000 inserções de componentes — com taxas baixíssimas de desanexação. Isso confirmou que as equipes estavam utilizando o sistema com eficácia, confiando nos componentes e aproveitando a estrutura que construímos.
Esses dados não só provaram o sucesso, como também guiaram melhorias e atualizações futuras.
Resultados
Quando o AllSpark foi adotado de forma completa, tornou-se parte essencial do processo de desenvolvimento de produto da Questrade.
Principais resultados:
• Linguagem visual unificada e coerente adotada por mais de 10 equipes
• Entregas e protótipos mais rápidos, com menos fricção entre design e desenvolvimento
• Menos desanexos e duplicações nos arquivos Figma
• Melhor acessibilidade e previsibilidade de comportamento entre plataformas
• Documentação clara que reduziu a dependência de suporte síncrono
• Forte senso de pertencimento entre times de design e engenharia
Fim!
O AllSpark se tornou uma parte confiável do processo de desenvolvimento da Questrade — e embora o sistema continue evoluindo, seu núcleo é forte, escalável e já entrega valor todos os dias.