Voltar aos Projetos
FintechJaneiro 2022 – Dezembro 2023Montreal, QC (Remote)

Plataforma de gestão de cartões corporativos e apps fintech white-label

Wonderlabs Technologies — Desenvolvedor Angular & Líder UX

50.000+

Usuários atendidos pela plataforma PWA na web, iOS e Android

15%

Aumento no engajamento dos usuários após o redesenho do fluxo de onboarding

20%

Redução no tempo de deploy após a otimização do pipeline no Jenkins

Angular 15TypeScriptNgRxRxJSFirebaseStorybookAngular MaterialPWAJenkinsFigma
Plataforma de gestão de cartões corporativos e apps fintech white-label

Visão geral

Wonderlabs Technologies é uma software house fintech canadense que construiu produtos digitais para clientes financeiros. Durante dois anos lá, fui a referência técnica de front-end e o líder de UX em um time de front-end de 3 pessoas trabalhando para a Concerto Card Company — uma plataforma fintech que captou US$ 21,2 M em rodada Série A da PayPal Ventures e Matrix Partners. O modelo de negócio da Concerto era permitir que marcas e organizações esportivas lançassem programas de cartões de crédito co-branded. A Wonderlabs construiu e manteve a plataforma PWA que tornou isso possível, atendendo mais de 50.000 usuários na web, iOS e Android. Meu papel foi híbrido ao longo de tudo: assumi responsabilidades tanto de UX quanto de desenvolvimento Angular em todas as iniciativas.

Projeto 1: Gestão de cartões corporativos PayPal

O PayPal precisava de uma plataforma web para que empresas gerenciassem cartões de crédito corporativos emitidos a seus funcionários — emissão de cartões virtuais, definição de limites de gastos individuais, monitoramento de transações em toda a empresa e gestão de programas de recompensas. Os usuários eram gerentes financeiros e administradores, não consumidores. O desafio de UX era fazer com que uma ferramenta B2B densa e carregada de dados se sentisse navegável e rápida. O desafio técnico era gerenciar um estado compartilhado complexo entre portfólios de cartões, feeds de transações e níveis de permissão para diferentes papéis de usuário.

Meu papel na plataforma PayPal

Como líder de UX

  • Design da arquitetura de informação da plataforma — views do portfólio de cartões, monitoramento de transações, gestão de limites e fluxos de programas de recompensas
  • Criação da base do design system do time no Figma e de sua biblioteca de componentes reutilizáveis com Storybook e Angular Material, estabelecendo padrões de componentes, tokens de espaçamento e padrões de interação
  • Redesenho do fluxo de onboarding por meio de ciclos de prototipação e testes, aumentando o engajamento dos usuários em 15%
  • Documentação de requisitos e facilitação de sessões de alinhamento entre stakeholders e o time de desenvolvimento

Como desenvolvedor Angular

  • Construção de funcionalidades de cartão virtual e limite de gastos com Angular, NgRx, RxJS e Firebase Authentication, cobrindo gestão de cartões, filtragem de transações e fluxos de acesso baseados em papéis
  • Migração da base de código de Angular 13 para Angular 15 em um monorepo, adotando componentes standalone e as últimas otimizações do framework
  • Integração de APIs REST para dados de cartões e transações em tempo real, com tratamento adequado de erros e estados de carregamento em todas as views
  • Otimização do pipeline de CI/CD no Jenkins, reduzindo o tempo de deploy em 20%, além de revisões de código e compartilhamento de conhecimento de Angular e UX com os colegas

Projeto 2: Framework de aplicativo bancário white-label

A segunda iniciativa foi o framework white-label que impulsionou o negócio principal da Concerto: permitir que marcas e organizações esportivas lançassem seus próprios aplicativos de cartão de crédito co-branded sem reconstruir do zero a cada vez. O framework combinava uma biblioteca de componentes Angular compartilhada com uma ferramenta CLI personalizada que resolvia toda a configuração específica do cliente no momento da build — branding, imagens, catálogo de produtos, preços e conteúdo eram todos injetados via um único comando CLI por cliente. Essa arquitetura permitiu à Wonderlabs entregar aplicativos de marca para os parceiros da Concerto, incluindo LA Angels, Baltimore Orioles e Fisher-Price (cuja Mastercard College Savings, desenvolvida com Gift of College, foi coberta pelo NerdWallet e anunciada pela Mattel Corporate). Meu papel foi construir e manter componentes na biblioteca compartilhada, garantir suporte completo de temas e fornecer feedback de design sobre como a configuração orientada por CLI afetava a consistência visual entre clientes.

Resultados e impacto

A plataforma PayPal foi entregue dentro do prazo, e a PWA atendeu mais de 50.000 usuários na web, iOS e Android. O fluxo de onboarding redesenhado aumentou o engajamento dos usuários em 15%, e a otimização do pipeline no Jenkins reduziu o tempo de deploy em 20%. O framework white-label permitiu à Concerto expandir seu portfólio de clientes entre times da MLB e marcas de consumo — cada aplicativo entregue sem reconstruir do zero — e a Concerto anunciou sua rodada Série A de US$ 21,2 M em 2022 enquanto a plataforma estava em produção. Manter tanto as responsabilidades de design quanto de desenvolvimento ao longo do projeto significou decisões mais rápidas e menos atrito entre a intenção de design e a realidade da implementação.

Cobertura na Imprensa