Ruggable réinvente le processus design-développement 10 fois plus rapidement avec Figma

Résumé :

Ruggable, l'innovateur derrière les tapis lavables à la machine, a transformé la décoration intérieure grâce à une solution pratique et élégante. Alors que l'entreprise est passée d'une petite entreprise à une marque mondiale opérant sur huit marchés, elle a dû relever le défi consistant à faire évoluer ses opérations de design de manière efficace tout en maintenant la cohérence de chaque point de contact.

Avec Figma, Ruggable a rassemblé ses équipes, simplifié les workflows et révolutionné son processus design-développement, avec pour résultat un transfert 10 fois plus rapide et une collaboration plus étroite entre les équipes UX, de créativité et de développement.

Le défi : une croissance rapide, des outils fragmentés

À mesure que Ruggable s'étendait à l'international, ses workflows de design et de développement devaient suivre le rythme de demandes croissantes. Auparavant, les équipes de Ruggable s'appuyaient pour le design et le prototypage sur plusieurs outils déconnectés. Ce workflow fragmenté ralentissait la collaboration, générant un surcroît de travail et rendant difficile le maintien de designs cohérents.

Le manque de visibilité entre les équipes a encore aggravé ces défis et il était alors plus difficile d'aligner et de garantir une expérience de marque cohérente. « Historiquement, les équipes UX et de e-commerce étaient séparées des équipes de marque et de créativité, et nous avions peu de visibilité sur les workflows des uns et des autres », explique Alicia.

Sans système unifié, des incohérences se glissaient dans l'expérience client. Les couleurs des boutons, les tailles des polices et les mises en page variaient entre les e-mails, les pages d'accueil et les publicités sur les réseaux sociaux, affaiblissant la confiance dans la marque.

« Ce que les clients voyaient dans un e-mail pouvait différer sur une page d'accueil et encore plus sur les réseaux sociaux. Des incohérences mineures mais visibles donnaient à l'expérience une sensation de déconnexion », déclare Alicia Clapper, directrice du design produit UX chez Ruggable.

La solution : structurer les équipes et les autorisations afin de les faire évoluer dans Figma

Le forfait Organisation de Figma a offert à Ruggable une plateforme centralisée pour unifier ses opérations de design et améliorer la collaboration entre les équipes. Avec un nombre illimité d'équipes et des autorisations structurées, Ruggable a créé des espaces de travail dédiés pour les équipes de marketing, de marque et produit, éliminant les silos tout en alignant les projets et les campagnes.

Un élément clé de cette transformation est la plateforme unifiée de Figma, qui est devenue pour Ruggable la source unique de vérité pour les composants, les styles, les mises en page et les variables. Grâce aux autorisations à l'échelle de l'organisation, les mises à jour ne perturbent plus les projets en direct, et au lieu de dupliquer des fichiers ou de suivre manuellement les changements, les mises à jour se synchronisent désormais automatiquement entre les équipes, ce qui permet d'économiser du temps et d'éliminer les incohérences.

Avec un design system centralisé dans Figma, Ruggable a développé ses opérations tout en maintenant chaque campagne et expérience produit en accord avec l'image de la marque. Auparavant, les designers devaient copier et coller manuellement des éléments entre les fichiers et consacrer du temps à revérifier le contrôle des versions pour garantir l'exactitude.

« Avant Figma, nous copions et collions des pages entre les projets. Le contrôle des versions étant pratiquement inexistant, nous devions constamment vérifier que nous utilisions les derniers fichiers » affirme Alicia.

Figma a éliminé ces goulets d'étranglement en synchronisant automatiquement les mises à jour à travers tous les fichiers. Et avec le Dev Mode, les développeurs ont désormais un accès direct aux spécifications et aux designs finalisés, ce qui limite les allers-retours inutiles et rend les transferts plus fluides que jamais.

Passer plus rapidement des mises à jour hebdomadaires à des changements effectués le jour même

Intégrer le design system au système de gestion de contenu (CMS) de Ruggable a également permis aux non-designers de mettre à jour le contenu et de créer des pages d'accueil, limitant la dépendance envers les designers tout en garantissant la cohérence de la marque.

Cette approche simplifiée a conduit à des économies de temps significatives, en particulier pour les campagnes prioritaires. « Les mises à jour pour le Black Friday prenaient plus d'une semaine. Aujourd'hui, ces changement nécessitent moins d'une journée », affirme Alicia.

Figma a également permis de standardiser les actifs de marque de Ruggable à mesure qu'ils s'étendaient sur les marchés internationaux. Avec des polices partagées, les équipes ne perdent plus de temps à rechercher des actifs de marque ou à résoudre les problèmes de polices manquantes. Désormais, tous les collaborateurs, y compris les sous-traitants et les équipes internationales, peuvent accéder instantanément à la typographie correcte.

Alicia déclare : « L'intégration des polices dans Figma a apporté une aide énorme. Auparavant, les sous-traitants et les équipes internationales me demandaient constamment des fichiers de polices pour une simple modification de texte. Désormais, tout est intégré, ce qui rend la collaboration beaucoup plus facile. »

Simplifier les transferts dix fois plus rapidement grâce au Dev Mode

Le Dev Mode a transformé la manière dont les équipes de design et de développement de Ruggable collaborent, comblant le fossé entre l'intention de design et la mise en œuvre du code. Auparavant, les transferts étaient lents et sujets aux erreurs – les designers annotaient manuellement les fichiers, tandis que les développeurs devaient parcourir plusieurs versions pour trouver le design le plus à jour.

« Il était difficile de déterminer quelle version d'un design utiliser quand plusieurs itérations étaient visibles sur une seule page », indique Tia Rexine, ingénieur logiciel chez Ruggable.

Ce manque de clarté entraînait souvent des retards, des malentendus et des réunions supplémentaires. Désormais, avec le Dev Mode, les développeurs peuvent accéder instantanément à des spécifications détaillées (polices, couleurs, espacement) directement dans les fichiers de design, ce qui réduit le besoin d'annotations manuelles.

Pour simplifier plus encore le processus, les équipes utilisent la fonctionnalité « Ready for Dev » afin de suivre les designs finalisés, ce qui garantit que les développeurs utilisent toujours les dernières versions approuvées tout en minimisant les allers-retours inutiles.

Un autre gain d'efficacité majeur provient de l'intégration du code intégré du Dev Mode. Les développeurs peuvent inspecter et extraire les propriétés CSS directement à partir des fichiers de design, récupérant instantanément les polices, les styles de texte et les valeurs d'espacement.

Au-delà des spécifications et du code, le Dev Mode centralise également les ressources de design essentielles. Les développeurs peuvent désormais accéder aux SVG, aux fichiers de polices et aux guides de style en un seul endroit et n'ont ainsi plus besoin de rechercher à travers plusieurs outils.

Ces améliorations ont eu un impact profond sur le workflow de Ruggable. Les tâches qui auparavant nécessitaient des heures d'annotations manuelles et de communication réciproque sont maintenant effectuées presque instantanément, avec pour résultat des transferts 10 fois plus rapides.

« Les développeurs nous demandaient chaque détail mineur, mais sont maintenant beaucoup plus autonomes dans l'expérience et le processus de transfert. Cela a simplifié notre workflow et notre relation », affirme Alicia.

Cela a permis non seulement d'économiser un temps précieux, mais aussi d'améliorer la qualité de production. « Quand tous les détails mineurs (par exemple, l'espacement, les polices, les couleurs, etc.) sont accessibles plus facilement grâce au Dev Mode, moins de temps d'assurance qualité est consacré aux corrections du design. Je dirais que notre processus d'assurance qualité est au moins 50 % plus rapide » indique Tia.

Brainstorming avec les équipes transversales dans FigJam

À mesure que Ruggable a développé ses processus de design et de développement avec Figma, l'équipe a vu une opportunité d'étendre la collaboration au-delà des équipes de design. À cette fin, elle s'est tournée vers FigJam, intégrant davantage de personnes dans le processus plus tôt et rendant le travail d'équipe transversal plus efficace.

Avant FigJam, le processus de brainstorming de Ruggable était chronophage et inefficace, rendant difficile l'organisation optimale des idées. Les discussions dépassaient souvent le temps imparti et les mesures à prendre devaient être retranscrites manuellement (parfois plusieurs fois) afin de pouvoir aboutir à des décisions à exécuter. Cela ralentissait la transition de l'idéation au design, nécessitant parfois jusqu'à deux semaines avant le début du travail.

« Grâce à FigJam, notre délai brainstorming-design est passé de une à deux semaines à seulement un ou deux jours. Aujourd'hui, nous pouvons organiser des idées instantanément et passer directement à l'exécution », déclare Alicia.

Ce qui a commencé comme un outil pour l'équipe UX est rapidement devenu essentiel aux équipes produit, de créativité et de marketing. « Chaque membre nouveau obtient un accès à FigJam – c'est aujourd'hui un aspect essentiel de notre workflow », déclare Alicia.

Par exemple, après l'évaluation utilisateur d'un nouveau type de housse de tapis, l'équipe a utilisé les modèles de brainstorming prédéfinis et la fonction de timer de FigJam pour orienter les discussions. Les résumés générés par l'IA ont simplifié les suivis, garantissant la clarté des étapes suivantes.

En intégrant davantage d'équipes plus tôt dans le processus, FigJam a permis à Ruggable de transformer plus rapidement ses idées en actions. Alors que Ruggable continue de croître, la plateforme unifiée de Figma (FigJam, Figma et le Dev Mode) restera centrale dans la manière dont ses équipes collaborent, itèrent et donnent vie à de nouveaux produits.