Comment HelloFresh a conçu un design system pour ses 8 marques à l’aide de Figma

Au sein du groupe HelloFresh, le design est plus qu’une question d’esthétique : c’est une priorité stratégique qui participe à la réussite de la marque et à la satisfaction des clients. Basée à Berlin, l’entreprise, qui emploie plus de 14 000 collaborateurs dans le monde, est largement reconnue pour ses kits repas. Elle s’est développée pour offrir huit marques différentes qui proposent un large éventail de solutions alimentaires, des repas tout prêts à la nourriture pour animaux.

La gestion complexe d’un écosystème de marques aussi variées nécessite une approche de design solide et unifiée. Le département UX d'HelloFresh comprend environ 75 product designers, content designers et chercheurs, répartis sur les trois plateformes mondiales du groupe à Berlin, New York et Toronto, ou travaillant à distance.

Leur mission est de créer une expérience client homogène et inspirante pour l’ensemble des huit marques. C’est là que Figma rentre en jeu.

« Figma est le point de contact central de tous les designers du groupe HelloFresh. Il leur permet de collaborer en toute transparence, peu importe où ils se trouvent », explique Marlene Rosner, senior director UX design pour HelloFresh. « Figma héberge le design system d’HelloFresh, qui permet aux designers de travailler simultanément sur le même fichier et de faciliter la collaboration synchrone et asynchrone. Une fonctionnalité essentielle pour maintenir la cohérence et l'efficacité tout au long du processus de design, des première idées à la mise en œuvre finale. »

Le design system d’HelloFresh, appelé Zest, est un système multi-marques et multi-plateformes utilisé par les huit marques. Il est conçu sur la base d’une architecture de tokens, qui offre une flexibilité et une adaptabilité pouvant répondre aux besoins spécifiques de chaque marque.

« Cette approche garantit la cohérence des composants sur toutes les plateformes, ce qui permet aux designers et aux développeurs d'avoir un langage commun et de rationaliser le processus de design », explique Adnan Puzić, designOps Lead pour HelloFresh.

L’intégration de Dev Mode de Figma a simplifié encore davantage la collaboration entre les designers et les développeurs, ce qui permet à ces derniers de parcourir facilement les fichiers de design, d'inspecter les composants et d’accéder aux spécifications nécessaires. « Dev Mode a rationalisé ce processus, ce qui améliore significativement la livraison et augmente l’efficacité. Ainsi, les développeurs peuvent se concentrer sur la création de produits de haute qualité », poursuit Adnan.

De plus, les fonctionnalités de collaboration de Figma s’étendent au-delà des équipes UX et de développement pour inclure le design de marque, le marketing et le content design, ce qui permet une approche holistique du design capable d'inclure tous les aspects de l’expérience client.

« Chez HelloFresh, le design ne sert pas uniquement à créer des produits visuellement attrayants : il consiste à façonner l’expérience client, à optimiser l’efficacité opérationnelle et à favoriser la collaboration entre les équipes », explique Marlene. « Figma est essentiel pour s’assurer que nos huit marques sont conviviales et efficaces, ce qui contribue à terme à l’efficacité globale des opérations d’HelloFresh. »