SECTEUR :
FINTECH SAAS B2B
SCALE-UP :
QONTO
ANNÉE :
2021
RÔLE :
BRAND & PRODUCT DESIGNER
Contexte & problématique
Scope : concevoir une Hero page impactante destinée à promouvoir une nouvelle carte bancaire premium dans un environnement fintech réglementé et fortement structuré par un design system existant.
Equipe : lead brand designer + product Designer + Head of Design.
Enjeux produit
Traduire une proposition de valeur financière complexe en une expérience immédiatement compréhensible pour un utilisateur B2B pressé, exposé à une forte charge informationnelle.
Action cible : compréhension utilisateur en moins 2min avec redirection clic CTA vers "commander carte" ou "en savoir plus" sur la Hero page.
Objectifs
Clarifier et prouver la valeur produit en quelques secondes.
Maximiser compréhension, adoption et conversion.
Respecter les contraintes du design system et assurer l'accessibilité.
Design process & challenges
Discovery & Cadrage
Audit UX/UI de l'écosystème de Qonto.
Analyse des contraintes d’intégration.
Benchmark sectoriel de références premium à forte immersion et conversion (Apple, Alan, BackMarket etc).
Définition du problem statement, priorisation sur un persona B2B principal, étude des patterns B2B.
Architecture d’Expérience
Hiérarchie des messages.
Optimisation du parcours et des CTA.
Light CSS pour une expérience fluide et éviter la surchage des développeurs.
Wireframes et prototype haute fidélité (Figma).
North star produit : impact immédiat, clarté, conversion.
Contraintes & Arbitrages
Arbitrage UX/UI, faisabilité technique : quand implémenter ou non motion design, quand prioriser ou non du product delight.
Simplification des interactions pour garantir performance et scalabilité avec une CSS light.
Recherche et itération design néomorphique, création d'une carte fictive :
Hierarchie des messages, travail d'écriture pour clarifier le message, refonte feedback et CTA :
Assemblage en Atomic design, gestion ombres et transparences :
Création d'un main asset pour Hero section (finalité : motion design) :
Prototype final :
Takeaways
Prioriser clarté et performance plutôt que complexité visuelle (less is more) : certaines illustrations néomorphiques n’étaient pas indispensables à la compréhension produit → une version plus minimaliste renforcerait la lecture de la valeur.
Adapter ses choix design à la culture produit et aux standards d’un environnement SaaS mature → défendre ses choix avec conviction est important, s'adapter et être flexible aux équipes et aux contraintes l'est tout autant.
Intégrer les équipes produit et tech plus en amont sur certains points clés permet de réduire les frictions en delivery (intégration des contraintes, meilleur alignement transverse) par exemple sur la complexité CSS + dosage du motion design.
Produt delight ou dette technique : savoir argumenter pour dédier la bande passante à l'un ou à l'autre si nécessaire en démontrant l'intérêt pour l'utilisateur / expliquer en quoi cela va lui être utile + convertir d'un point de vue business.
