Comment Spendesk a tiré parti de Figma pour refondre son identité de marque

Pour Spendesk, licorne de la fintech parisienne spécialisée dans la gestion des dépenses, passer du statut de start-up à celui de marque premium a nécessité une refonte stratégique qui a requis un décloisonnement des équipes.

Lorsque l’entreprise a commencé à cibler des clients du mid-market, l’équipe design y a vu deux opportunités : réinventer l’identité et l’interface utilisateur de Spendesk, et rapprocher les équipes produit et brand. C'est en réunissant les équipes dédiées au développement, à la recherche utilisateur et à l'analyse de données que l'initiative a exprimé tout son potentiel, démontrant ainsi que l'innovation est favorisée lorsque ces entités travaillent main dans la main.

Un projet synonyme d’ambitions nouvelles

L’identité de marque originelle de Spendesk, créée pendant les confinements liés au covid, utilisait un système d’illustrations hébergé sur Figma. Constitué de visages, de différentes positions corporelles et de fonds, ce kit modulable répondait aux besoins de Spendesk et était adapté à sa clientèle de startups et de petites entreprises.

Au fil du temps, l’organisation a évolué, tout comme son marché-cible, tourné vers de plus grandes entreprises. « Nous avions besoin d’une image plus sophistiquée et premium, à même de promouvoir la plateforme complète de gestion des dépenses alimentée par l’IA que Spendesk était devenue », explique Michyl Culos, marketing director.

Pour créer une tonalité visuelle plus authentique et proche de ses utilisateurs, le head of brand design Quentin Chuzeville et son équipe ont commencé à travailler sur une nouvelle identité de marque, basée sur une bibliothèque de photos capable de communiquer plus clairement la valeur du produit. L’occasion parfaite pour rapprocher l’équipe brand de l’équipe produit et créer davantage de synergies. « Il nous a fallu unir nos forces pour recréer l’identité de marque de Spendesk », explique Quentin.

Pour convaincre sa hiérarchie, l’équipe product design s’est associée à l’équipe finance pour évaluer la valeur potentielle du projet. En mesurant le temps gagné sur les parcours utilisateur et la réduction du nombre de tickets d’assistance, elle a démontré qu’une nouvelle UI pouvait permettre de réduire les coûts et d’augmenter la satisfaction client.

La transformation a commencé avec un atelier rassemblant les équipes brand design et product design. À l'aide de Figma, elles ont fait un état des lieux de l’existant et ont imaginé le look and feel à venir pour élaborer la nouvelle identité de Spendesk. Le deuxième atelier, qui s'est tenu dans FigJam, consistait en un brainstorming consacré aux attributs de la marque et à une refonte générale de son identité.

Brand, produit, tech et marketing rassemblés autour d’un processus commun

L’équipe brand design utilise Figma depuis sa création. « C’est génial de voir mon équipe développer sa créativité et travailler à améliorer notre process aux côtés de collègues d’autres pays et d’autres départements. Figma est le meilleur outil pour ça, et de loin », affirme Quentin.

Né d’un effort transverse, le rebranding a été informé par les valeurs fondamentales de Spendesk, sa nouvelle proposition de valeur et la navigation entièrement repensée du site, axée sur une meilleure expérience utilisateur. Pour cette refonte en profondeur, les équipes se sont concentrées sur un objectif : mieux répondre aux besoins des clients avec une interface aussi claire qu’accessible, qui permette une découverte du produit plus intuitive. Pour l’atteindre, elles ont brainstormé sans contraintes, laissant libre cours à leur créativité pour creuser leurs idées. « Mener ce projet dans FigJam et Figma a grandement facilité la collaboration des équipes product et brand », se souvient Mahedine Yahia, head of product design.

Des assets produits à grande échelle

Pour garantir la cohérence de l’image de marque, l’équipe brand design de Spendesk a créé des templates sur Figma à destination de l’équipe marketing, qui a pu modifier directement ses contenus tout en respectant l’identité de la marque. « Nos collègues du marketing peuvent modifier leurs publicités et leurs posts pour les réseaux sociaux en toute autonomie. Nous n’avons qu’à valider leur travail. Tout le monde gagne du temps », explique Quentin. Ce mélange de contrôle et de liberté permet au brand design de travailler sur des problèmes complexes, pendant que le marketing crée ses assets en toute autonomie : une solution gagnant-gagnant.

Évolutivité garantie grâce au design system

Avec la refonte UI rendue possible par la création d’une équipe dédiée au design system est également née l’opportunité d’améliorer la collaboration. L’équipe n’a pas ménagé ses efforts pour augmenter le taux de couverture du design system, passant de 67 % à 99 % en moins d’un an. Le design system utilise les variables de Figma comme tokens de design et pourra bientôt inclure le mode sombre.

Aujourd’hui, il existe des bibliothèques partagées par le brand et le product design, qui rassemblent les bases communes aux deux équipes, comme la typographie, les couleurs et les icônes. L’extraction de ces nouvelles icônes, dont la refonte a été menée par la brand designer Seimour Darbandi, a ensuite été automatisée. Cette base solide assure la cohérence à travers toutes les plateformes et permet à l’intégralité des designers et des développeurs de gagner du temps. Pour Marie-Aline Millot, product manager et product designer - design system, « créer ce système basé sur l’API Figma (et d’autres éléments) va permettre aux équipes engineering, product et brand design de gagner en productivité et en temps. »

Dev Mode, clé d’un delivery maîtrisé

Une fois la nouvelle direction artistique définie, les développeurs ont pu inspecter les designs avec Dev Mode, ce qui a rendu leur collaboration avec les designers beaucoup plus fluide. À l’approche du lancement, cette fonctionnalité a contribué à l’accélération du processus et à la bonne utilisation de Figma par les développeurs.

La refonte s’est avérée être un succès. Thibaut Patois, front-end engineer - design system, explique : « Pour le lancement de la nouvelle UI, les développeurs avaient préparé une war room pour corriger les bugs. Mais il n’y en a eu aucun ! Je n’en revenais pas. » Les deux premières semaines, sur plus de 30 000 logins, les utilisateurs n’ont envoyé que sept retours négatifs.

Réussite et fierté collectives

Cette collaboration rapprochée entre l’équipe design et plus de 100 contributeurs répartis sur plusieurs services a permis de favoriser une culture de responsabilité partagée, et a démontré la puissance d’impact d’une collaboration efficace entre plusieurs équipes.

Yana Sanzhapova, senior product designer, se réjouit de cette réussite : « Je suis très fière du résultat. C’était un travail d’équipe entre design system, développement, UI… Quelle chance de collaborer avec toutes ces personnes ! » Un succès salué par une nomination aux Awwwards en décembre 2024.

Depuis que les équipes de Spendesk ont réussi à mener cet ambitieux projet de refonte tout en fédérant brand, produit, tech et marketing, elles peuvent s’appuyer sur l’alignement transverse trouvé lors de l’intense collaboration requise par le processus. Déjà familière des outils Figma, l’équipe front-end a tiré parti de Dev Mode pour mettre en œuvre avec succès les créations des équipes design, approfondissant au passage sa collaboration avec le produit et le marketing.

Autre avantage, et non des moindres : les solides outils créés à cette occasion vont grandement faciliter la création et l’implémentation de la prochaine identité graphique de Spendesk, ce dont les équipes se réjouissent déjà.