Loblaw Digital élabore les expériences numériques de l'une des plus grandes pharmacies et épiceries du Canada, de la marque de vêtements Joe Fresh à des services de santé et de fidélité toujours plus nombreux. L'équipe prend en charge plus de 40 sites web, 4 applications et 3 000 points de vente répartis sur 14 enseignes, interagissant avec plus de 80 % dela population canadienne chaque semaine.

L'objectif de Loblaw Digital est de fournir des expériences cohérentes du début à la fin, reliant des points de contact physiques et numériques. Son équipe gère le click-and-collect (achat en ligne, retrait en magasin), les renouvellements de prescriptions en pharmacie et des programmes de fidélité utilisés par près de la moitié de la population.

Pour opérer à cette échelle, Loblaw Digital a dû unifier des workflows fragmentés et améliorer la cohérence sur toutes les plateformes, sans sacrifier la qualité, l'identité de la marque ni l'accessibilité.

En centralisant design et développement via le forfait Organisation de Figma, Loblaw Digital conçoit plus vite, plus intelligemment et de façon plus collaborative que jamais. Ainsi, une page d'accueil dont la conception nécessitait trois mois a été réalisée en seulement deux semaines du fait de l'utilisation de composants réutilisables et d'un transfert plus rapide sur Figma.

Le défi : gérer un vaste écosystème numérique avec fluidité

À ses débuts, Loblaw Digital n'était pas une organisation orientée produit. Il s'agissait à l'origine d'un partenaire de service pour plus de 3 000 points de ventes physiques, fonctionnant selon leurs propres contraintes, telles des systèmes hérités et des workflows spécifiques à leur marque.

L'équipe gagnant en maturité, il est vite devenu évident que les outils existants ne correspondaient plus à l'échelle ni à la complexité des produits développés par l'entreprise. « Nous ne nous sommes pas dit : "Construisons une version axée sur le numérique". C'était plutôt : "Nous allons répondre aux besoins de ces magasins" », explique James Harrison, staff product designer chez Loblaw Digital.

Cette complexité est profondément ancrée dans la confiance qu'accordent les Canadiens aux enseignes locales Loblaw. « Nos enseignes sont très connues, nous nous devons d'être à la hauteur de la confiance qui leur est accordée », ajoute James.

Cela impliquait d'hériter des frictions liées à des équipes cloisonnées et d'outils de design disparates, le tout entravant la cohérence et rendant la duplication des tâches inévitable. « Pourquoi concevons-nous cinq fois le même localisateur de magasin ? », avait demandé James.

Mettre en œuvre des changements mineurs pouvait prendre des jours, ce qui ralentissait les équipes et rendait l'itération laborieuse. Les applications internes utilisées par les préparateurs de commandes et les équipes du service client étaient particulièrement difficiles à mettre à jour, et nécessitait souvent des contournements manuels ou une nouvelle formation.

La solution : une seule plateforme, conçue pour grandir avec Figma

En 2021, Loblaw Digital a opté pour le forfait Organisation de Figma, afin de consolider ses outils de design fragmentés en une plateforme unique. La transition a été rapide et décisive.

Le nouvel outil en a remplacé quatre. Le forfait Organisation de Figma a permis de refléter la structure de l'entreprise elle-même, en organisant les équipes par marque et par produit, avec des autorisations personnalisées, des bibliothèques partagées et des polices vectorielles intégrées.

Les fonctionnalités multijoueurs de Figma ont aussi considérablement renforcé la collaboration. Avec environ 1 600 personnes utilisant l'outil, le feedback circule en temps réel, via des commentaires intégrés ou lors d'ateliers transverses. « Nous utilisons Figma comme un espace de travail où collaborer en temps réel. Dans nos fichiers, les curseurs s'agitent en permanence », affirme James.

Helios, un design system flexible et fédéré pour 14 marques

Avec 14 marques opérant sous un même toit numérique, Loblaw avait besoin d'un design system flexible pour répondre aux besoins spécifiques de chaque marque, sans compromettre la vitesse, la cohérence ou la conformité. Et c'est précisément cet équilibre qu'offre Helios.

Helios fonctionne selon un modèle de gouvernance fédérée, permettant aux équipes de contribuer à la création des composants au sein d'une structure partagée. Cette structure facilite la réutilisation des modèles à travers les expériences, tout en respectant l'identité de la marque grâce à des substitutions basées sur les tokens. « Les tokens déterminent le style. Les designers contrôlent l'apparence de l'interface, et n'ont plus besoin de faire appel à un développeur », indique James.

Avec le forfait Organisation de Figma, Helios est désormais utilisé par 51 équipes, et regroupe des composants réutilisables qui sont entièrement tokenisés et thématisables par marque. Chaque équipe travaille à partir de la même bibliothèque de composants, mais l'adapte avec des substitutions spécifiques à la marque pour la couleur, la typographie et l'espacement, sans avoir besoin de la dédoubler ou de la recréer.

Aujourd'hui, un thème moyen fonctionne avec environ 2 000 tokens, avec une réutilisation importante au sein des différentes marques. Les fichiers de webdesign de Loblaw contiennent plus de 400 composants, qui correspondent à environ 150 composants codés, offrant aux équipes un système riche et bien documenté pour créer.

L'impact est mesurable. Pour concevoir une nouvelle page d'accueil, l'équipe a réutilisé et adapté les composants d'Hélios, achevant ce travail en seulement deux semaines, contre trois mois auparavant. « Pouvoir réutiliser et réaffecter les composants nous a permis d'accélérer et de progresser à nouveau », affirme James.

Pour concevoir quelque chose de nouveau, plus besoin de partir de zéro. Les équipes peuvent tirer parti de l'existant. « Plus nous livrons rapidement, plus vite nous pouvons satisfaire les besoins de notre clientèle et de l'entreprise », ajoute James.

Le confort d'utilisation d'Helios ne bénéficie pas qu'aux designers. Chaque composant est conçu pour être lisible par le code, utilisant des propriétés standardisées, des valeurs par défaut neutres et une documentation intégrée. L'accessibilité et la conformité, particulièrement importantes dans les domaines réglementés tels que l'industrie pharmaceutique, sont examinées tôt et documentées à l'intérieur du système. « On ne traduit plus le design en développement. On parle directement la même langue », dit James.

Spécifications claires et livraison accélérée avec Dev Mode

Grâce à Dev Mode, le handoff a été drastiquement simplifié. Chaque composant est accompagné d'une fiche annotée, documentant les états pris en charge, l'utilisation des tokens et les directives d'accessibilité.

Au lancement de Dev Mode, Loblaw a mené un projet pilote informel avec dix développeurs. James a rapidement fait le tour des fonctionnalités principales, comme l'inspection des composants, la visibilité des tokens et la génération de code, et a proposé aux développeurs de les explorer. L'effet ne s'est pas fait attendre : les demandes de mises à niveau vers Dev Mode ont commencé à affluer.

Bien que la vitesse des développeurs ne soit pas mesurée à la minute près, James estime que Dev Mode permet aux designers de gagner environ 5 % à 10 % de temps sur les annotations et autant côté développement, en diminuant la charge cognitive nécessaire pour interpréter la documentation.

Les développeurs et les designers travaillent désormais à partir d'une source unique de vérité, ce qui réduit l'ambiguïté, élimine la documentation redondante et diminue le temps passé à coder. Alors que Loblaw migre vers ses bibliothèques de composants V2, désormais créées sur Tailwind, les fonctionnalités d'inspection et de génération de code de Dev Mode permettent aux développeurs de structurer directement leur travail à partir des composants tokenisés.

L'équipe commence également à étudier comment le serveur MCP de Figma peut entièrement remodeler son handoff. L'objectif est d'extraire directement des designs de Figma, de joindre les tokens et de produire du code prêt pour la production, sans étape de traduction supplémentaire.

Avant l'arrivée du serveur MCP, même avec un design system mature, le handoff nécessitait une interprétation manuelle des designs par les développeurs. Cela entraînait de petites incohérences et pouvait retarder la livraison. La connexion directe au serveur MCP a permis de les éliminer, de gagner en précision et d'accélérer considérablement le handoff.

Concevoir à partir de l'atome avec Code Connect

Code Connect complète ce tableau et devient de plus en plus prisé. Loblaw a commencé par connecter les « atomes » dans sa bibliothèque de composants web. Ce travail préparatoire aide aujourd'hui les développeurs à interpréter comment des composants plus grands et plus complexes sont conçus, ce qui les encourage à réutiliser plutôt que réinventer.

« Lors de nos essais, ce que nous avons généré était déjà connecté à notre système. On ne part donc pas de zéro. Ce que nous créons est basé sur la structure existante », explique James.

Avec Dev Mode, l'architecture standardisée d'Helios et le serveur MCP de Figma, Loblaw se prépare à la prochaine génération de workflows, où les composants peuvent être assemblés avec des prompts. L'architecture de composants rigoureuse de l'équipe est prête pour les outils d'IA, que ce soit via Figma Make, Code Connect ou d'autres workflows d'IA générative.

Pour James, le futur de la co-création se fera avec des non-designers et des product owners via Figma Make, en s'appuyant sur les bases que l'équipe a mises en place avec Dev Mode, le serveur MCP de Figma et Code Connect.

Les premiers projets pilote ont montré à quel point les handoffs peuvent gagner en rapidité et en clarté. Figma Make ajoute une autre couche : la capacité d'assembler des blocs de construction avec un prompt, afin de passer de l'idée à un design structuré plus rapidement.

James ajoute : « À l'avenir, l'important ne sera pas de savoir coder, mais de pouvoir exprimer ses idées. » Et lorsque ce sera le cas, Loblaw Digital sera prêt.