Comment Figma fait évoluer le e-commerce

Qu’il s’agisse de promouvoir des économies circulaires ou d’assurer la cohérence entre les différents points de contact numériques, le monde du e-commerce est de plus en plus complexe. Pour favoriser la confiance, fluidifier le parcours client et raconter une histoire de marque cohérente, une expérience numérique homogène et convaincante est indispensable.

Nous avons discuté avec des équipes de marques leaders pour savoir comment elles atteignent ces objectifs et font évoluer leurs processus avec Figma. Vous apprendrez comment Nuuly gère la logistique de la location de vêtements, comment Ruggable connecte ses points de contact de e-commerce et de marketing et comment Design Business Company a travaillé en étroite collaboration avec GitHub pour créer une boutique spécialement pour les développeurs.

Comment Nuuly simplifie l’expérience utilisateur de la location de vêtements

Alors que certaines entreprises ont popularisé la location de vêtements pour les occasions spéciales, de nouveaux acteurs tels que Nuuly, lancé en 2019, œuvrent afin que cette démarche s’étende à l’habillement quotidien. « Nuuly célèbre l’idée de changement », déclare Laura Petrini, director of user experience chez Nuuly. « Nous permettons à la clientèle de changer de style afin qu’elle puisse laisser libre cours à sa créativité vestimentaire. »

Pour tenir cette promesse, Nuuly a conçu une expérience de location intuitive et appréciée par ses abonnés. Les services d’abonnement vestimentaire en étant encore à leurs balbutiements, Nuuly a également dû développer une grande partie de sa technologie pour gérer les aspects opérationnels de la location : gestion circulaire des stocks, nettoyage et réparations. Cela nécessitait de créer deux design systems de A à Z (un pour la clientèle et l’autre pour la logistique), chacun répondant à des objectifs spécifiques et anticipant la croissance de l’entreprise. « Nous avons configuré notre design system avec des tokens de couleur et de typographie faciles à permuter, laissant à la marque un espace pour évoluer au fil des saisons, tout comme nous donnons à nos clients la possibilité de faire varier leur style », indique Laura.

Bien que la technologie sous-jacente à la logistique de location soit complexe, l’objectif de Nuuly est de la rendre aussi simple que possible pour que les clients s’adaptent à cette nouvelle façon de créer leur garde-robe.. « Nous avons simplifié les expériences afin de les rendre aussi intuitives que possible », indique Laura. Par exemple, la fonctionnalité « My Nuuly » du site présente un sac Nuuly et guide la personne à travers plus de 26 statuts de location possibles.

Afin de gérer et mettre à l’échelle les design systems qui sous-tendent toute cette complexité, l’équipe a adopté Figma en 2023. « Au départ, nos design systems étaient fragmentés à cause des limitations sur les tailles de fichier, et comme ils devaient être synchronisés avec notre serveur, les performances étaient lentes », explique Erica Benamy, Principal UX designer chez Nuuly. « Nous avons fini par gérer 16 fichiers au total. Pour nous, la migration a été une opportunité de consolider nos design systems en deux bibliothèques Figma. »

L’utilisation de Figma a considérablement accéléré les workflows. « La conception est beaucoup plus rapide », affirme Erica. Utiliser les outils de prototypage natifs de Figma a également aidé les designers à mieux communiquer leur attentes en matière d’interactions aux développeurs : « Cela nous a permis de gagner en agilité et de nous sentir vraiment en phase les uns avec les autres, dans toute l’organisation », explique-t-elle.

La migration de l’UX de Nuuly vers Figma a incité d’autres services à faire de même. Les équipes de content design et de photographie studio travaillent désormais dans Figma, aux côtés de l’équipe UX. Et grâce aux outils de collaboration et de brainstorming comme FigJam et Figma Slides, toute l’entreprise s’est également mobilisée pour travailler de concert sur les nouvelles fonctionnalités du parcours client comme The Thrift Shop, qui permet aux abonnés d’acheter les produits directement, sans passer par la location.

Ainsi, les clients de Nuuly bénéficient plus souvent d’innovations et d’améliorations de l’expérience. Quant à l’équipe Nuuly, elle peut consacrer plus de temps à la collaboration, à l’exploration créative et à la réflexion sur le design orienté client. Ainsi, elle renforce la relation de la marque avec ses abonnés.

Comment Ruggable assure des surfaces numériques cohérentes

Lorsqu’Alicia Clapper a rejoint Ruggable il y a six ans en tant que director of UX product design, elle a été impliquée dans plusieurs workflows parallèles et cloisonnés. Cela a généré un manque de cohérence des expériences sur les plateformes numériques de l’entreprise, notamment les publicités sur les réseaux sociaux, la page d’accueil et les pages produit. Le parcours client s’en est trouvé décousu. Étant donné qu’il faut souvent 10 jours ou plus aux clients de Ruggable pour prendre une décision d'achat après avoir navigué sur le site, établir une cohérence entre tous ces points de contact était essentiel, en particulier dans un contexte de plus en plus concurrentiel.

« Historiquement, les équipes d’UX et de e-commerce étaient assez distinctes des équipes créatives liées au branding », déclare Alicia. Une campagne sur les réseaux sociaux présentait certaines images, tandis que le site web en utilisait d’autres. « Nous n’avions jamais beaucoup d’informations sur les projets de ces équipes, et vice versa, jusqu’à voir le contenu en ligne. »

Leur travail était éparpillé dans différents outils, puis partagé manuellement dans Google Drive. Sans bibliothèque de composants centralisée, des éléments tels que les couleurs, les styles de police, les boutons et les pieds de page étaient difficiles à gérer. « Nous faisions des copier-coller de ces éléments, que nous modifiions en fonction du projet et du contenu », explique Alicia. « C’était une tâche très manuelle, qui laissait beaucoup de place aux erreurs d’un projet à l’autre. Le contrôle de version était inexistant, nous devions donc vraiment nous assurer de copier les fichiers les plus récents. Je ne sais pas si on peut vraiment appeler ça de la gestion de design system. »

Il y a cinq ans, l’équipe UX a entrepris une migration vers Figma afin de tout harmoniser. Aujourd’hui, elle est en mesure de concevoir, de prototyper et de tester de nouveaux designs, le tout au même endroit. De plus, la collaboration entre design et développement avance 10 fois plus vite qu’avant grâce à Dev Mode. Au lieu de créer manuellement des annotations, les designers peuvent cocher une case pour préparer les fichiers. « On s’est dit : "C’est génial. Nous avons tout ce qu’il nous faut." », se remémore Alicia. Aujourd’hui, il y a moins d’allers-retours entre les designers et les développeurs, et nous savons avec certitude quelle version d’un design est la plus récente.

Après avoir été invitées à rejoindre Figma en tant que collaborateurs, les équipes de marque, de création, de rétention et d’acquisition de Ruggable ont également rejoint la plateforme. « Nous avons pu impliquer l’équipe créative en partageant des liens avec elle et en lui permettant de faire des commentaires sur des détails qu’elle jugeait les plus en phase avec la marque », explique Alicia. « La facilité de mise à jour et de mise en œuvre de notre design system dans Figma après notre rebranding de 2024 a incité d’autres équipes à s’approprier l’outil. C’est ce qui a accéléré son adoption. » Maintenant, Alicia fait intervenir plusieurs équipes dans FigJam lors de réunions transverses et de brainstormings. « Un de nos product managers trouve même que les réunions sont plus amusantes, motivantes et productives », remarque-t-elle.

Ces nouveaux standards d’engagement et de collaboration ont été essentiels pour créer une expérience client cohérente, un élément central pour la construction d’une marque. « Il y a une familiarité qui parle à notre clientèle », explique Alicia. « Cela renforce vraiment la confiance dans la marque et permet aux gens de trouver ce qu’ils cherchent et de l’acheter. »

Comment GitHub et Design Business Company enchantent les développeurs

GitHub, plateforme très appréciée des développeurs, a vu dans sa boutique en ligne l’occasion de renforcer son image de marque et de fidéliser sa communauté. Pour y parvenir, GitHub s’est associée au studio créatif Design Business Company pour créer une expérience d’achat exceptionnelle sur Shopify, via une boutique qui propose des objets de collection, des vêtements et des articles de lifestyle liés au code. Le projet nécessitait un nouveau design system, des produits dérivés, des photographies de produits et du packaging. Tout a été réalisé sur Figma. Grâce à cette refonte, l’équipe n’a plus besoin de mettre à jour manuellement la boutique. L’initative a également permis d’ajouter un aspect ludique sous la forme d’« Easter eggs » destinés spécialement aux développeurs, qui reflètent parfaitement l’identité de marque de GitHub.

Fondée par Stewart Scott-Curran, Judson Collier et Jordan Egstad, l'agence DBCo abandonne la position de sachant autrefois répandue dans le secteur du design, pour intégrer ses membres au sein des équipes clientes lors de chaque projet. Au lieu de présenter ses idées toutes les quelques semaines ou mois, DBCo choisit de donner de la visibilité sur ses réalisations et ses méthodes afin de lancer une conversation quotidienne avec ses clients, qui sont généralement des start-ups ayant besoin de workflows très réactifs et agiles. « Les clients nous aident à rectifier le tir beaucoup plus rapidement », raconte Jordan. « Cela nous permet de gagner énormément de temps. »

Dès qu’un projet démarre, DBCo partage un moodboard avec ses clients sur Figma, où chacun peut poser ses idées et laisser des commentaires. « C’est notre premier dispositif pour récolter des retours. Le moodboard nous donne le contexte et la granularité nécessaires », explique Judson. La refonte de la boutique a impliqué plus de 25 personnes, dont des membres des équipes de la boutique, de la marque, du design et du web de GitHub, ainsi que des consultants en accessibilité. Tout cartographier dans le fichier leur permettait d'intervenir facilement et à tout moment pour s’orienter dans le projet.

Une fois la phase de brainstorming achevée, la construction du design system a pu commencer. Pour accélérer le processus, DBCo s'appuie sur le design system Construct, un socle universel qu’elle a développé et configuré avec les variables Figma. En tant que framework de départ, Construct est « un design system suffisamment avancé pour être utile, sans représenter trop de contraintes », dit Jordan. Il affirme également que grâce à cette approche, ce qui demandait une journée et demie de travail ne prend plus que 30 minutes.

Le prototype était également une partie importante du processus, surtout pour donner vie aux pages produits. Ces designs présentaient souvent huit variantes (de la taille à la couleur en passant par la personnalisation) qui nécessitaient une UI conditionnelle et des « clins d'œil à la culture geek et dev », comme l'explique Jordan. Lorsque quelqu’un entre un code Konami, par exemple, les images du site se transforment en art ASCII. « Comme les mots et les lettres sont les outils de base des développeurs, nous avons voulu trouver un moyen de les animer et de leur donner vie », affirme-t-il. « Nous avons imaginé différentes animations et les avons intégrées dans des prototypes pour voir comment l’interface réagirait avec différents états de survol de bouton, différentes transitions, etc. Aider GitHub à visualiser les designs et à leur donner une dimension tangible nous a vraiment aidés à prendre une décision. »

Au final, pouvoir collaborer si étroitement avec plusieurs équipes au sein du même fichier a permis d'obtenir une expérience cohérente, à même de satisfaire l'audience très avertie de GitHub, de la navigation au paiement en passant par la livraison. « Les développeurs sont des gens très perspicaces », dit Judson. « Nous avons déployé beaucoup d'efforts pour être en cohérence avec la nature même du travail des développeurs, en visant un haut niveau d’exigence à chaque étape. »

Aujourd’hui, le e-commerce va bien plus loin que le fait d’amener un client à cliquer sur « Ajouter au panier ». À mesure que le marché se développe, il sera de plus en plus important d'offrir des expériences numériques exceptionnelles à chaque étape du parcours client, de la découverte de la marque à l'achat proprement dit. Créer un espace pour que les équipes puissent explorer des idées ambitieuses, les prototyper rapidement et les présenter à leurs clients est essentiel. Découvrez comment les équipes utilisent Figma et contactez-nous pour une démonstration.