Retour aux Projets
FintechJanvier 2022 – Décembre 2023Montreal, QC (Remote)

Plateforme de gestion de cartes corporatives et applications fintech en marque blanche

Wonderlabs Technologies — Développeur Angular & Responsable UX

50 000+

Utilisateurs desservis par la plateforme PWA sur le web, iOS et Android

15%

Augmentation de l'engagement des utilisateurs après la refonte du parcours d'intégration

20%

Réduction du temps de déploiement après la rationalisation du pipeline Jenkins

Angular 15TypeScriptNgRxRxJSFirebaseStorybookAngular MaterialPWAJenkinsFigma
Plateforme de gestion de cartes corporatives et applications fintech en marque blanche

Aperçu

Wonderlabs Technologies est un studio logiciel fintech canadien qui a créé des produits numériques pour des clients financiers. Pendant deux ans, j'y ai été la référence technique front-end et le responsable UX au sein d'une équipe front-end de 3 personnes travaillant pour Concerto Card Company — une plateforme fintech ayant levé 21,2 M$ en série A auprès de PayPal Ventures et Matrix Partners. Le modèle commercial de Concerto consistait à permettre aux marques et aux organisations sportives de lancer des programmes de cartes de crédit co-brandées. Wonderlabs a construit et maintenu la plateforme PWA qui a rendu cela possible, desservant plus de 50 000 utilisateurs sur le web, iOS et Android. Mon rôle était hybride tout au long : j'assumais à la fois les responsabilités UX et de développement Angular sur toutes les initiatives.

Projet 1 : Gestion des cartes corporatives PayPal

PayPal avait besoin d'une plateforme web permettant aux entreprises de gérer les cartes de crédit corporatives émises à leurs employés — émission de cartes virtuelles, définition de plafonds de dépenses individuels, surveillance des transactions à l'échelle de l'entreprise et gestion des programmes de récompenses. Les utilisateurs étaient des responsables financiers et des administrateurs, pas des consommateurs. Le défi UX consistait à rendre un outil B2B dense et chargé en données à la fois navigable et rapide. Le défi technique était de gérer un état partagé complexe entre les portefeuilles de cartes, les flux de transactions et les niveaux de permission pour différents rôles utilisateurs.

Mon rôle sur la plateforme PayPal

En tant que responsable UX

  • Conception de l'architecture de l'information de la plateforme — vues du portefeuille de cartes, surveillance des transactions, gestion des plafonds et flux des programmes de récompenses
  • Création des fondations du système de design de l'équipe dans Figma et de sa bibliothèque de composants réutilisables avec Storybook et Angular Material, établissant les normes de composants, les tokens d'espacement et les modèles d'interaction
  • Refonte du parcours d'intégration à travers des cycles de prototypage et de tests, augmentant l'engagement des utilisateurs de 15 %
  • Documentation des exigences et facilitation des sessions d'alignement entre les parties prenantes et l'équipe de développement

En tant que développeur Angular

  • Développement des fonctionnalités de carte virtuelle et de plafonds de dépenses avec Angular, NgRx, RxJS et Firebase Authentication, couvrant la gestion des cartes, le filtrage des transactions et les flux d'accès basés sur les rôles
  • Migration de la base de code d'Angular 13 vers Angular 15 dans une configuration monorepo, adoption des composants autonomes et des dernières optimisations du framework
  • Intégration des API REST pour les données de cartes et de transactions en temps réel, avec une gestion appropriée des erreurs et des états de chargement sur toutes les vues
  • Rationalisation du pipeline CI/CD Jenkins, réduisant le temps de déploiement de 20 %, et conduite de revues de code tout en partageant les connaissances Angular et UX avec les coéquipiers

Projet 2 : Cadre d'application bancaire en marque blanche

La deuxième initiative était le cadre en marque blanche qui alimentait le cœur de l'activité de Concerto : permettre aux marques et aux organisations sportives de lancer leurs propres applications de cartes de crédit co-brandées sans reconstruire depuis zéro à chaque fois. Le cadre combinait une bibliothèque de composants Angular partagée avec un outil CLI personnalisé qui résolvait toute la configuration spécifique au client au moment de la compilation — l'image de marque, les visuels, le catalogue de produits, la tarification et le contenu étaient tous injectés via une seule commande CLI par client. Cette architecture a permis à Wonderlabs de livrer des applications de marque pour les partenaires de Concerto, notamment les LA Angels, les Baltimore Orioles et Fisher-Price (dont la Mastercard College Savings, développée avec Gift of College, a été couverte par NerdWallet et annoncée par Mattel Corporate). Mon rôle consistait à construire et maintenir les composants dans la bibliothèque partagée, à assurer un support complet des thèmes et à fournir des retours de conception sur la manière dont la configuration pilotée par CLI affectait la cohérence visuelle entre les clients.

Résultats et impact

La plateforme PayPal a été livrée dans les délais et la PWA a desservi plus de 50 000 utilisateurs sur le web, iOS et Android. La refonte du parcours d'intégration a augmenté l'engagement des utilisateurs de 15 %, et la rationalisation du pipeline Jenkins a réduit le temps de déploiement de 20 %. Le cadre en marque blanche a permis à Concerto de développer son portefeuille clients auprès d'équipes MLB et de marques grand public — chaque application livrée sans reconstruction depuis zéro — et Concerto a annoncé sa série A de 21,2 M$ en 2022 alors que la plateforme était en production. Le fait d'assumer à la fois les responsabilités de conception et de développement tout au long du projet a permis des décisions plus rapides et moins de friction entre l'intention de conception et la réalité de l'implémentation.

Couverture Presse