Trusted Shops unifie ses design systems B2B et B2C avec Figma

Fondée en 1999, Trusted Shops est connu pour sa célèbre marque de confiance, ses avis authentiques d'utilisateurs et sa protection acheteur. Mais en coulisses, le design a connu une véritable révolution !

Trusted Shops a fait un grand bond en avant en adoptant Figma en 2022, ce qui lui a permis de rationaliser et d'unifier ses design systems et son langage visuel entre ses activités B2B et B2C.

De plus, avec Figma, les designers, codeurs et spécialistes de l'UX de Trusted Shop ont bénéficié de processus plus simples et plus rapides, de prototypes améliorés et d'une collaboration plus facile et plus efficace sur les fichiers. Voici comment s’est déroulé leur parcours avec Figma.

Dans les coulisses du design chez Trusted Shops

Près de 30 000 boutiques en ligne arborent la marque de confiance Trusted Shops, conçue pour reconnaître les boutiques en ligne fiables. Les exigences strictes de Trusted Shops prennent en compte tous les aspects, de la sécurité et de l'accessibilité des données personnelles aux politiques de retour, en passant par les délais de livraison et les tarifs. Cela lui a permis de créer une communauté à la fiabilité unique.

Oliver Pitsch est UX & product marketing director chez Trusted Shops. Il explique que l'entreprise gère de nombreuses équipes dont le travail est centré sur le design. Il y a notamment une équipe dédiée au product design, et une autre pour le contenu et la localisation composée de content designers, d’UX writers et de localisation managers. Il y a également une équipe dédiée au marketing produit avec des responsables et des graphistes.

Toutes ces équipes travaillent en étroite collaboration avec ou dans plus de 10 équipes produit transverses au sein de Trusted Shops, surtout l'équipe product design. Aujourd’hui, elles utilisent toutes Figma régulièrement.

« Plusieurs de mes casquettes ont à voir avec Figma », commente Oliver. Les voici :

• En tant que UX director, il est responsable du product design, du contenu et de la localisation pour l'ensemble des produits.
• En tant que product marketing director, il met en relation les équipes marketing avec le marketing produit pour traduire les informations techniques dans un vocabulaire et des contenus marketing adaptés aux campagnes publicitaires pour les produits.
• Enfin, il fait partie de la direction produit et codirige la stratégie produit. Oui, Oliver est un homme très occupé !

Un langage design commun pour les activités B2B et B2C : le design system

Oliver Pitsch explique que Trusted Shops relève « le défi fascinant » d’avoir à la fois une importante clientèle B2B qui utilise ses solutions quotidiennement, et des millions d'utilisateurs de ses produits grand public. Ces deux groupes considérables sont également en contact direct via les produits de l’entreprise.

Le défi pour les Design Ops de Trusted Shops consiste donc à mettre en place et à exploiter un design system composé de ressources réutilisables et cohérentes pour l'ensemble de la marque. La solution trouvée doit aussi unifier le langage du design entre les activités B2B et B2C, tout en étant suffisamment flexible pour permettre des designs et des modèles propres à une cible donnée.

Autre défi : les outils de design déjà utilisés par l'entreprise. En effet, l'un d'entre eux avait été acquis en 2020, ce qui rendait une migration nécessaire. Un autre de ces outils ne disposait pas des fonctionnalités de travail en équipe et de gestion des versions désormais requises par Trusted Shops. Oliver ajoute que la gestion d'un design system à grande échelle était également trop complexe avec l’ancien outil. Il était temps d'envisager sérieusement l'adoption de Figma.

Migration vers Figma : comment Trusted Shops a amélioré sa gestion du design avec le système Helios

La décision d'abandonner les outils en place au profit de Figma a été facile à prendre, se souvient Oliver. « Nous avons essayé Figma, qui nous a immédiatement impressionnés. Cet outil était ultra-rapide, disposait de toutes les fonctionnalités que nous recherchions et était très abordable. »

Trusted Shops a décidé de migrer vers Figma Organisation, qui offrait toutes les fonctionnalités nécessaires, y compris la gestion d'un design system à l'échelle de l'entreprise, la gestion de branches de versions et l'authentification unique (SSO).

« Lorsque vous avez fait de la confiance votre devise, la sécurité est primordiale. Les fonctionnalités de Figma Organisation telles que l'authentification unique sont donc essentielles à nos yeux », explique Oliver.

L'entreprise a opté pour un design system kit appelé Helios. Helios propose des kits d'outils spécifiques pour différents types de produits et base toutes les décisions relatives au design sur Helios Foundation, une boîte à outils partagée.

Après la configuration et l'intégration de Figma, Trusted Shops a accordé l'accès à quelques personnes pour ouvrir la voie aux autres designers. Bien que l'importation des fichiers soit rapide, Trusted Shops a décidé de recréer tous ses fichiers de design pour conserver leurs attributs partagés, en utilisant l’autolayout de Figma pour simplifier le processus. « Avec plus de 150 fichiers différents, cela représentait beaucoup de travail, mais nous avons réussi à migrer ou à recréer tous les designs en neuf semaines », se réjouit Oliver. Les équipes étaient alors libres d'utiliser Figma pour créer et collaborer. « C'est là que commence vraiment notre histoire avec Figma, » ajoute Oliver Pitsch.

Selon lui, les product designers ont trouvé l'apprentissage plus facile que prévu et les commentaires de l'équipe ont été « très positifs ».

Résolution des problèmes

Figma a résolu quatre problèmes majeurs pour les équipes d'Oliver.

1. Gestion du design system

Figma leur a permis d'utiliser plusieurs bibliothèques pour une grande variété de projets, de produits et d'équipes.

2. Gestion des versions/branches

Figma leur a fourni une gestion complète des versions (contrôle des versions) et des branches de versions (où les ressources peuvent être dupliquées et modifiées séparément).

3. Collaboration renforcée

Figma a amélioré la collaboration entre les designers et les développeurs.

4. Prototypage

Figma leur a permis de créer des prototypes plus réalistes et interactifs pour les tests utilisateurs et la recherche.

Un projet type

Les projets commencent dans Confluence, où la documentation technique est publiée. Il s'agit essentiellement de plans écrits et d'une source unique de vérité pour les fonctionnalités ou les produits.

Les designers utilisent ensuite Whimsical pour les wireframes, qui, tout comme  la documentation technique, sont définis suite à une concertation entre l'équipe et les parties prenantes. Ces éléments sont ensuite migrés vers Figma en tant que prototypes en vue du design des différents états. « C'est là que toutes les discussions sur les détails du design ont lieu, » explique Oliver.

Les prototypes sont alors testés par des utilisateurs et exploités à des fins de recherche et pour l’alignement des parties prenantes internes entre elles. Enfin, les designers collaborent avec les développeurs pour transformer les mockups en code et les transférer dans l'un des produits Trusted Shops.

Amélioration de la collaboration et unification des design systems : Trusted Shops adopte Figma pour toutes ses unités commerciales

Aujourd'hui, Figma sert à toutes les unités commerciales de Trusted Shops qui comportent des designers : le produit, la marque, le marketing et l’opérationnel, ainsi que les ventes et la satisfaction client (Customer Success).

Nous avons de nombreux éditeurs et bien plus d'utilisateurs. Les product designers créent et gèrent des designs dans Figma, tandis que les content designers et les UX writers travaillent dans Figma pour créer du contenu. Tous les développeurs, product managers et product owners disposent de comptes Figma et d'un accès pour voir les ressources en détails et ajouter des commentaires. L'équipe UX collabore dans FigJam.

Oliver déclare : « Nous apprécions vraiment Figma pour de nombreuses raisons, mais je pense que le plus important pour nous, par rapport à d'autres outils, est l'amélioration et la simplification de la collaboration sur les fichiers. »

Par exemple, avec Figma, il est devenu possible d'intégrer des interactions au niveau du design system de prototypes, de façon à rendre disponible partout et en quelques clics des prototypes dotés de nombreuses fonctionnalités. « Nos prototypes sont désormais d’un tout autre niveau que les précédents », explique Oliver.

Plus important encore, Figma a permis à Trusted Shops de regrouper Sketch et Abstract en un seul outil, réduisant ainsi le temps et les efforts nécessaires, tout en unifiant ses design systems et son langage à l'échelle de l'entreprise sur les activités B2B et B2C.

Oliver conclut : « C’est un vrai succès : tous nos designers sont satisfaits de Figma. Et ça nous aide vraiment à recruter. » Lorsque des designers souhaitent travailler sur Figma – et c'est souvent le cas – Trusted Shops peut désormais le proposer comme plateforme design de référence.