Lagardère

Product design et design system management

2024-2025

Lagardère

Product design et design system management

2024-2025

Lagardère

Product design et design system management

2024-2025

Présentation

La refonte des plateformes digitales de Lagardère News (Europe 1, RFM, Europe 2) s'est articulée autour de deux axes majeurs : la restructuration de l'écosystème design et la refonte complète des expériences web et mobile.

Le projet visait à moderniser l'ensemble des interfaces tout en établissant une base technique cohérente permettant à chaque marque de conserver son identité propre, avec un focus particulier sur l'optimisation de la consommation des contenus multimédias.

Présentation

La refonte des plateformes digitales de Lagardère News (Europe 1, RFM, Europe 2) s'est articulée autour de deux axes majeurs : la restructuration de l'écosystème design et la refonte complète des expériences web et mobile.

Le projet visait à moderniser l'ensemble des interfaces tout en établissant une base technique cohérente permettant à chaque marque de conserver son identité propre, avec un focus particulier sur l'optimisation de la consommation des contenus multimédias.

Présentation

La refonte des plateformes digitales de Lagardère News (Europe 1, RFM, Europe 2) s'est articulée autour de deux axes majeurs : la restructuration de l'écosystème design et la refonte complète des expériences web et mobile.

Le projet visait à moderniser l'ensemble des interfaces tout en établissant une base technique cohérente permettant à chaque marque de conserver son identité propre, avec un focus particulier sur l'optimisation de la consommation des contenus multimédias.

Contexte et défi

Le projet a débuté avec la refonte du site Europe 1, révélant rapidement des tensions entre les équipes design et développement dues à l'absence d'un design system structuré. La gestion externalisée des applications mobiles et un UI Kit peu organisé complexifiaient davantage la situation.

Les refontes prévues des autres marques et de l'application mobile Europe 1 nécessitaient une approche fondamentalement nouvelle, tant sur le plan technique que sur l'expérience utilisateur.

Contexte et défi

Le projet a débuté avec la refonte du site Europe 1, révélant rapidement des tensions entre les équipes design et développement dues à l'absence d'un design system structuré. La gestion externalisée des applications mobiles et un UI Kit peu organisé complexifiaient davantage la situation.

Les refontes prévues des autres marques et de l'application mobile Europe 1 nécessitaient une approche fondamentalement nouvelle, tant sur le plan technique que sur l'expérience utilisateur.

Contexte et défi

Le projet a débuté avec la refonte du site Europe 1, révélant rapidement des tensions entre les équipes design et développement dues à l'absence d'un design system structuré. La gestion externalisée des applications mobiles et un UI Kit peu organisé complexifiaient davantage la situation.

Les refontes prévues des autres marques et de l'application mobile Europe 1 nécessitaient une approche fondamentalement nouvelle, tant sur le plan technique que sur l'expérience utilisateur.

Processus et stratégie

La refonte s'est organisée en deux volets parallèles. D'une part, la création d'un design system robuste avec une architecture de tokens élaborée : 230 tokens primitifs, 220 tokens sémantiques et 80 tokens de dimensionnement. Cette base technique s'est accompagnée d'une bibliothèque complète de composants, couvrant les besoins spécifiques du web et du mobile.

D'autre part, la refonte des interfaces s'est concentrée sur l'optimisation des parcours utilisateurs, avec une attention particulière portée à la consommation des contenus vidéo et à la découverte de contenus associés. L'ensemble est documenté à travers un environnement Figma complet et un Storybook détaillé.

Processus et stratégie

La refonte s'est organisée en deux volets parallèles. D'une part, la création d'un design system robuste avec une architecture de tokens élaborée : 230 tokens primitifs, 220 tokens sémantiques et 80 tokens de dimensionnement. Cette base technique s'est accompagnée d'une bibliothèque complète de composants, couvrant les besoins spécifiques du web et du mobile.

D'autre part, la refonte des interfaces s'est concentrée sur l'optimisation des parcours utilisateurs, avec une attention particulière portée à la consommation des contenus vidéo et à la découverte de contenus associés. L'ensemble est documenté à travers un environnement Figma complet et un Storybook détaillé.

Processus et stratégie

La refonte s'est organisée en deux volets parallèles. D'une part, la création d'un design system robuste avec une architecture de tokens élaborée : 230 tokens primitifs, 220 tokens sémantiques et 80 tokens de dimensionnement. Cette base technique s'est accompagnée d'une bibliothèque complète de composants, couvrant les besoins spécifiques du web et du mobile.

D'autre part, la refonte des interfaces s'est concentrée sur l'optimisation des parcours utilisateurs, avec une attention particulière portée à la consommation des contenus vidéo et à la découverte de contenus associés. L'ensemble est documenté à travers un environnement Figma complet et un Storybook détaillé.

Solution

Pour le web, la nouvelle interface propose une expérience immersive centrée sur les contenus multimédias, avec une navigation repensée facilitant l'exploration des contenus. L'application mobile, entièrement reconçue, offre désormais une expérience fluide et moderne, avec des fonctionnalités optimisées pour la consommation de contenus en mobilité.

L'architecture modulaire développée permet d'adapter rapidement ces interfaces aux différentes marques du groupe tout en maintenant une cohérence globale, grâce à l'automatisation des adaptations visuelles via le système de tokens.

Solution

Pour le web, la nouvelle interface propose une expérience immersive centrée sur les contenus multimédias, avec une navigation repensée facilitant l'exploration des contenus. L'application mobile, entièrement reconçue, offre désormais une expérience fluide et moderne, avec des fonctionnalités optimisées pour la consommation de contenus en mobilité.

L'architecture modulaire développée permet d'adapter rapidement ces interfaces aux différentes marques du groupe tout en maintenant une cohérence globale, grâce à l'automatisation des adaptations visuelles via le système de tokens.

Solution

Pour le web, la nouvelle interface propose une expérience immersive centrée sur les contenus multimédias, avec une navigation repensée facilitant l'exploration des contenus. L'application mobile, entièrement reconçue, offre désormais une expérience fluide et moderne, avec des fonctionnalités optimisées pour la consommation de contenus en mobilité.

L'architecture modulaire développée permet d'adapter rapidement ces interfaces aux différentes marques du groupe tout en maintenant une cohérence globale, grâce à l'automatisation des adaptations visuelles via le système de tokens.

Résultats

Les premiers mois de mise en production du nouveau site Europe 1 montrent une augmentation significative de la consommation vidéo. L'internalisation du développement des applications, associée au nouveau design system, a permis d'améliorer la vélocité des équipes et de réduire les bugs en production. La standardisation des composants et la documentation exhaustive permettent désormais aux équipes de se concentrer sur l'innovation plutôt que sur la résolution de problèmes techniques récurrents, tout en facilitant le déploiement des futures refontes pour les autres marques du groupe.

Résultats

Les premiers mois de mise en production du nouveau site Europe 1 montrent une augmentation significative de la consommation vidéo. L'internalisation du développement des applications, associée au nouveau design system, a permis d'améliorer la vélocité des équipes et de réduire les bugs en production. La standardisation des composants et la documentation exhaustive permettent désormais aux équipes de se concentrer sur l'innovation plutôt que sur la résolution de problèmes techniques récurrents, tout en facilitant le déploiement des futures refontes pour les autres marques du groupe.

Résultats

Les premiers mois de mise en production du nouveau site Europe 1 montrent une augmentation significative de la consommation vidéo. L'internalisation du développement des applications, associée au nouveau design system, a permis d'améliorer la vélocité des équipes et de réduire les bugs en production. La standardisation des composants et la documentation exhaustive permettent désormais aux équipes de se concentrer sur l'innovation plutôt que sur la résolution de problèmes techniques récurrents, tout en facilitant le déploiement des futures refontes pour les autres marques du groupe.

Lagardere

Modernisation de Lagardère News via un design system.

1

Lagardere

Lagardere

Modernisation de Lagardère News via un design system.

1