Projet d'entreprise
Ouest-France
Ouest-France
Overview du projet
🗞️
Situation
Problématique : Écosystème design fragmenté (design system web limité sur Sketch, absence de design system mobile)
Contexte : Premier quotidien français avec 2,5 millions de lecteurs quotidiens
Contrainte : Multiplication d'outils, documentation insuffisante, manque de cohérence cross-platform
Équipes :
4 UX/UI Designer
7 développeurs
9 Products
🗞️
Situation
Problématique : Écosystème design fragmenté (design system web limité sur Sketch, absence de design system mobile)
Contexte : Premier quotidien français avec 2,5 millions de lecteurs quotidiens
Contrainte : Multiplication d'outils, documentation insuffisante, manque de cohérence cross-platform
Équipes :
4 UX/UI Designer
7 développeurs
9 Products
🎯
Tâche
Mon rôle : UX/UI Designer chargé de moderniser et unifier les design systems web et mobile pendant 2 ans.
Objectifs : Centraliser les ressources design, standardiser les pratiques, optimiser les workflows, réduire les coûts et améliorer la collaboration entre équipes.
Défi : Refondre techniquement les outils, mais aussi transformer en profondeur les méthodes de travail du studio, en maintenant en parallèle la production du studio.
🎯
Tâche
Mon rôle : UX/UI Designer chargé de moderniser et unifier les design systems web et mobile pendant 2 ans.
Objectifs : Centraliser les ressources design, standardiser les pratiques, optimiser les workflows, réduire les coûts et améliorer la collaboration entre équipes.
Défi : Refondre techniquement les outils, mais aussi transformer en profondeur les méthodes de travail du studio, en maintenant en parallèle la production du studio.
✨
Actions
J'ai orchestré deux chantiers parallèles
Participation à une formation intensive de 4 jours avec Romain Dao, expert Figma
Paramétrage initial sur Figma avec configuration des styles et variables (typographie, couleurs, marges)
Refonte et optimisation complète des icônes sur Illustrator
Mise en place des grilles en s'appuyant sur nos guidelines
Construction de composants modulaires adaptables et évolutifs
Tests et optimisations continues des composants
Intégration du dark mode en prévision des futures évolutions
Rédaction des guidelines d'utilisation détaillées et illustrées
Création des règles de nommage cohérentes et scalables
Mise en place des bonnes pratiques d'utilisation et de maintenance
Migration du Design system web :
Pour l'application mobile : j'ai créé de toutes pièces un design system cohérent avec l'identité de la marque, en auditant les maquettes existantes eten respectant scrupuleusement les guidelines iOS/Android pour garantir une expérience native.
✨
Actions
J'ai orchestré deux chantiers parallèles
Participation à une formation intensive de 4 jours avec Romain Dao, expert Figma
Paramétrage initial sur Figma avec configuration des styles et variables (typographie, couleurs, marges)
Refonte et optimisation complète des icônes sur Illustrator
Mise en place des grilles en s'appuyant sur nos guidelines
Construction de composants modulaires adaptables et évolutifs
Tests et optimisations continues des composants
Intégration du dark mode en prévision des futures évolutions
Rédaction des guidelines d'utilisation détaillées et illustrées
Création des règles de nommage cohérentes et scalables
Mise en place des bonnes pratiques d'utilisation et de maintenance
Migration du Design system web :
Pour l'application mobile : j'ai créé de toutes pièces un design system cohérent avec l'identité de la marque, en auditant les maquettes existantes eten respectant scrupuleusement les guidelines iOS/Android pour garantir une expérience native.
🏆
Résultats
Bénéfices : Mise à jour en direct, collaboration en temps réel, documentation technique enrichie, réduction des coûts de production
Apprentissage : Acquisition d'une vision systémique, rédaction de la documention, expertise Figma avancée.
82%
de réduction de temps
sur les processus de livraison
227
composants
transférés et optimisés
x2
en vitesse pour l'itération
d'une nouvelle fonctionnalité
÷3
du temps de recettage
avant la mise en production
Pour plus de détails, vous pouvez consulter l'étude entière ci-dessous.
Pour plus de détails, vous pouvez consulter l'étude entière ci-dessous .
🗞️
Situation
Problématique : Écosystème design fragmenté (design system web limité sur Sketch, absence de design system mobile)
Contexte : Premier quotidien français avec 2,5 millions de lecteurs quotidiens
Contrainte : Multiplication d'outils, documentation insuffisante, manque de cohérence cross-platform
Équipes :
4 UX/UI Designer
7 développeurs
9 Products
🗞️
Situation
Problématique : Écosystème design fragmenté (design system web limité sur Sketch, absence de design system mobile)
Contexte : Premier quotidien français avec 2,5 millions de lecteurs quotidiens
Contrainte : Multiplication d'outils, documentation insuffisante, manque de cohérence cross-platform
Équipes :
4 UX/UI Designer
7 développeurs
9 Products
🎯
Tâche
Mon rôle : UX/UI Designer chargé de moderniser et unifier les design systems web et mobile pendant 2 ans.
Objectifs : Centraliser les ressources design, standardiser les pratiques, optimiser les workflows, réduire les coûts et améliorer la collaboration entre équipes.
Défi : Refondre techniquement les outils, mais aussi transformer en profondeur les méthodes de travail du studio, en maintenant en parallèle la production du studio.
🎯
Tâche
Mon rôle : UX/UI Designer chargé de moderniser et unifier les design systems web et mobile pendant 2 ans.
Objectifs : Centraliser les ressources design, standardiser les pratiques, optimiser les workflows, réduire les coûts et améliorer la collaboration entre équipes.
Défi : Refondre techniquement les outils, mais aussi transformer en profondeur les méthodes de travail du studio, en maintenant en parallèle la production du studio.
✨
Actions
J'ai orchestré deux chantiers parallèles
Participation à une formation intensive de 4 jours avec Romain Dao, expert Figma
Paramétrage initial sur Figma avec configuration des styles et variables (typographie, couleurs, marges)
Refonte et optimisation complète des icônes sur Illustrator
Mise en place des grilles en s'appuyant sur nos guidelines
Construction de composants modulaires adaptables et évolutifs
Tests et optimisations continues des composants
Intégration du dark mode en prévision des futures évolutions
Rédaction des guidelines d'utilisation détaillées et illustrées
Création des règles de nommage cohérentes et scalables
Mise en place des bonnes pratiques d'utilisation et de maintenance
Migration du Design system web :
Pour l'application mobile : j'ai créé de toutes pièces un design system cohérent avec l'identité de la marque, en auditant les maquettes existantes eten respectant scrupuleusement les guidelines iOS/Android pour garantir une expérience native.
✨
Actions
J'ai orchestré deux chantiers parallèles
Participation à une formation intensive de 4 jours avec Romain Dao, expert Figma
Paramétrage initial sur Figma avec configuration des styles et variables (typographie, couleurs, marges)
Refonte et optimisation complète des icônes sur Illustrator
Mise en place des grilles en s'appuyant sur nos guidelines
Construction de composants modulaires adaptables et évolutifs
Tests et optimisations continues des composants
Intégration du dark mode en prévision des futures évolutions
Rédaction des guidelines d'utilisation détaillées et illustrées
Création des règles de nommage cohérentes et scalables
Mise en place des bonnes pratiques d'utilisation et de maintenance
Migration du Design system web :
Pour l'application mobile : j'ai créé de toutes pièces un design system cohérent avec l'identité de la marque, en auditant les maquettes existantes eten respectant scrupuleusement les guidelines iOS/Android pour garantir une expérience native.
🏆
Résultats
Bénéfices : Mise à jour en direct, collaboration en temps réel, documentation technique enrichie, réduction des coûts de production
Apprentissage : Acquisition d'une vision systémique, rédaction de la documention, expertise Figma avancée.
82%
de réduction de temps
sur les processus de livraison
227
composants
transférés et optimisés
x2
en vitesse pour l'itération
d'une nouvelle fonctionnalité
÷3
du temps de recettage
avant la mise en production
Overview du projet
Pour plus de détails, vous pouvez consulter l'étude entière ci-dessous.
Problématique principale
Problématique principale
Comment moderniser et optimiser les process digitaux du premier quotidien français ?
Comment moderniser et optimiser les process digitaux du premier quotidien français ?
Comment moderniser et optimiser les process digitaux du premier quotidien français ?
Etat des lieux
Etat des lieux
Le contexte
Le contexte
À mon arrivée, l'écosystème design d'Ouest-France reflétait les défis typiques d'une transformation digitale en cours :
À mon arrivée, l'écosystème design d'Ouest-France reflétait les défis typiques d'une transformation digitale en cours :
Web
Un design system limité réalisé sur Sketch et Invision.
Application mobile
Absence de Design system et peu de standardisation
Web
Un design system limité réalisé sur Sketch et présent que pour le site web.
Application mobile
Absence de Design system et des processus
non standardisés.
Outils
Multiplication des outils (Sketch,Invision, Jira).
Cohérence
Manque de cohérence entre 'ensemble des supports.
Outils
Multiplication des outils (Sketch,Invision, Jira,
Suite adobe).
Process
Documentation principalement orale avec peu
de cohérence
Web
Un design system limité réalisé sur Sketch et présent que pour le site web.
Application mobile
Absence de Design system et des processus
non standardisés.
Outils
Multiplication des outils (Sketch,Invision, Jira,
Suite adobe).
Process
Documentation principalement orale avec peu
de cohérence
Les limitations de l'existant
Les limitations de l'existant
Le design system sur Sketch présentait plusieurs contraintes :
Le design system sur Sketch présentait plusieurs contraintes :
01.
01.
Architecture
Architecture
Une architecture complexe rendant les mises à jour fastidieuses
Une architecture complexe rendant les mises
à jour fastidieuses.
02.
Composants
Des composants "limités" difficiles à maintenir et utilisables que pour le site.
03.
Documentation
Une documentation en cours d'élaboration et
inexistante pour l'application.
04.
¨Partage
Un processus de partage de maquettes
chronophage via Invision.
02.
Composants
Des composants "limités" utilisables que pour le site.
03.
Documentation
Une documentation en création et inexistante pour l'application
Une documentation en cours d'élaboration et
inexistante pour l'application
04.
Partage
Un processus de partage de maquettes chronophage via Invision
Un processus de partage de maquettes
chronophage via Invision
L'objectif du projet
L'objectif du projet
La modernisation de nos outils design devait répondre à 6 enjeux majeurs :
La modernisation de nos outils design devait répondre à 6 enjeux majeurs :
🎯
Centralisation des
ressources design
📐
Standardisation
des pratiques
💰
Réduction des coûts
(Sketch + Invision)
🔄
Optimisation
des workflows
🤝
Collaboration
entre équipes
🌐
Cohérence
cross-platform
🎯
Centralisation des
ressources design
🤝
Collaboration
entre équipes
🌐
Cohérence
cross-platform
📐
Standardisation
des pratiques
💰
Réduction des coûts
(Sketch + Invision)
🔄
Optimisation
des workflows
Bertrand - Product Designer
Bertrand - Product Designer
Notre mission : transformer un obstacle en opportunité, en faisant de cette transition technique un levier de modernisation global.
Notre mission : transformer un obstacle en opportunité, en faisant de cette transition technique un levier de modernisation global.
Tiphaine - Head of Design
Tiphaine - Head of Design
Le véritable défi n'était pas seulement technique : il fallait modifier les méthodes de travail tout en maintenant la production du studio.
Le véritable défi n'était pas seulement technique : il fallait modifier les méthodes de travail tout en maintenant la production du studio.
Contraintes et opportunités
Contraintes et opportunités
La transition vers Figma représentait un changement majeur nécessitant :
La transition vers Figma représentait un changement majeur nécessitant :
🎓
Formation de
l'ensemble de l'équipe
📦
Migration des
composants existants
⚡️
Maintien de
la production du studio
📝
Rédaction
de la documentation
🎨
Création du D.S
pour l'application
⚙️
Mise en place des
nouveaux standards
Cette transformation s'inscrivait dans une volonté plus large de modernisation des outils et des méthodes de travail, avec comme objectif final l'amélioration de l'expérience utilisateur sur l'ensemble des plateformes Ouest-France.
Cette transformation s'inscrivait dans une volonté plus large de modernisation des outils et des méthodes de travail, avec comme objectif final l'amélioration de l'expérience utilisateur sur l'ensemble des plateformes Ouest-France.
🎓
Formation de
l'ensemble de l'équipe
📦
Migration des
composants existants
⚡️
Maintien de la
production du studio
📝
Rédaction de la
documentation
🎨
Création du D.S
pour l'application
⚙️
Mise en place des
nouveaux standards
🎓
Formation de
l'ensemble de l'équipe
📦
Migration des
composants existants
⚡️
Maintien de la
production du studio
📝
Rédaction de la
documentation
🎨
Création du D.S
pour l'application
⚙️
Mise en place des
nouveaux standards
La solution
La solution
Notre approche s'est structurée en 2 grands chantiers : la refonte du design system web et la création du design system mobile.
Notre approche s'est structurée en 2 grands chantiers : la refonte du design system web et la création du design system mobile.
La refonte du Design system web
La refonte du Design system web
La transition a débuté par une formation intensive :
La transition a débuté par une formation intensive :
Maîtrise des fonctionnalités (auto-layout, variables…)
Construction méthodique d'un Design system
4 jours de formation avec Romain Dao, expert Figma
Apprentissage des fondamentaux du logiciel
Maîtrise des fonctionnalités (auto-layout, variables…)
Construction méthodique d'un Design system
4 jours de formation avec Romain Dao, expert Figma
Apprentissage des fondamentaux du logiciel
Maîtrise des fonctionnalités (auto-layout, variables…)
Construction méthodique d'un Design system
4 jours de formation avec Romain Dao, expert Figma
Apprentissage des fondamentaux du logiciel
Méthodes de migration
Méthodes de migration
Les étapes suivies pour la migration du Design System pour le site web :
Les étapes suivies pour la migration du Design System pour le site web :
Paramétrage initial sur Figma
Configuration des styles (typographie, couleurs)
Refonte complète des icônes sur Illustrator
Mise en place des grilles et espacements
Ajout de l'ensemble des éléments nécessaires
Construction des composants
Sessions quotidiennes de planification
Création de composants modulaires
Tests et optimisations continues
Intégration du dark mode en prévision
Maquettage des interfaces
Migration des maquettes vers Figma
Exploitation de l'auto-layout
Tests des composants en situation
Adaptabilité responsive optimisée
Paramétrage initial sur Figma
Configuration des styles et variable (typographie, couleurs, marges)
Refonte et optimisation complète des icônes sur Illustrator
Mise en place des grilles en s'appuyant sur nos guidelines
Ajout de l'ensemble des éléments nécessaires pour le design system
Construction des composants
Sessions quotidiennes de planification et d'alignement avec l'équipe
Création de composants modulaires adaptables et évolutifs
Tests et optimisations continues des composants
Intégration du dark mode en prévision des futures évolutions
Maquettage des interfaces
Migration des maquettes vers Figma avec une structure organisée
Exploitation de l'auto-layout pour une meilleure maintenabilité
Tests des composants en situation réelle d'utilisation
Adaptabilité responsive optimisée pour l'ensemble des devices
Documentation et standardisation
Rédaction des guidelines d'utilisation détaillées et illustrées
Création des règles de nommage cohérentes et scalables
Documentation des variables et propriétés pour chaque composant
Mise en place des bonnes pratiques d'utilisation et de maintenance
Paramétrage initial sur Figma
Configuration des styles (typographie, couleurs)
Refonte complète des icônes sur Illustrator
Mise en place des grilles et espacements
Ajout de l'ensemble des éléments nécessaires
Construction des composants
Sessions quotidiennes de planification
Création de composants modulaires
Tests et optimisations continues
Intégration du dark mode en prévision
Maquettage des interfaces
Migration des maquettes vers Figma
Exploitation de l'auto-layout
Tests des composants en situation
Adaptabilité responsive optimisée
Documentation et standardisation
Rédaction des guidelines d'utilisation détaillées
Création des règles de nommage cohérentes
Détail des propriétés de chaque composant
Mise en place des pratiques d'utilisation
La création du Design system pour l'application
La création du Design system pour l'application
Fort de l'expérience acquise sur le desktop, j'ai pris en charge la création complète du design system mobile avec pour but de :
Fort de l'expérience acquise sur le desktop, j'ai pris en charge la création complète du design system mobile avec pour but de :
Fort de l'expérience acquise sur le desktop, j'ai pris en charge la création complète du design system mobile avec pour but de :
Centraliser l'ensemble des ressources dans Figma
Assurer la cohérence entre toutes les maquettes
Faciliter le travail de la designeuse mobile
Permettre des itérations rapides.
Centraliser l'ensemble des ressources dans Figma
Assurer la cohérence entre toutes les maquettes
Faciliter le travail de la designeuse mobile.
Permettre des itérations rapides.
Centraliser l'ensemble des ressources dans Figma.
Assurer la cohérence entre toutes les maquettes.
Faciliter le travail de la designeuse mobile
Permettre des itérations rapides.
Méthodes de création
Méthodes de création
Les étapes que j'ai suivi pour la création du Design Sytem de l'application
Les étapes que j'ai suivi pour la création du Design Sytem de l'application
Analyse de l'existant
Audit des maquettes Sketch existantes
Identification des patterns récurrents
Alignement avec l'identité Ouest-France
Construction méthodiques
Configuration des styles (typographie, colors…)
Définition des paramètres (marges,icônes…)
Création de composants modulaires
Maquettage des interfaces
Migration des maquettes vers Figma
Exploitation de l'auto-layout
Tests des composants en situation
Analyse de l'existant
Audit approfondi des maquettes Sketch existantes et de leur structure
Identification méthodique des patterns récurrents et des incohérences
Alignement stratégique avec l'identité visuelle Ouest-France existante
Construction méthodiques
Configuration de l'ensemble des styles (typographie, couleurs…)
Définition des paramètres (marges,icônes, grilles…)
Création structurée de composants modulaires et réutilisables
Maquettage des interfaces
Migration optimisée des maquettes vers Figma métodiquement
Exploitation maximale de l'auto-layout pour la flexibilité des composants
Tests rigoureux des composants en situations réelles d'utilisation
Optimisation mobile-first
Adaptation précise aux devices mobiles et à ses contraintes
Respect strict des guidelines iOS/Android pour une expérience native
Tests exhaustifs sur différents devices et résolutions d'écran
Analyse de l'existant
Audit des maquettes Sketch existantes
Identification des patterns récurrents
Alignement avec l'identité Ouest-France
Construction méthodiques
Configuration des styles (typographie, colors…)
Définition des paramètres (marges,icônes…)
Création de composants modulaires
Maquettage des interfaces
Migration des maquettes vers Figma
Exploitation de l'auto-layout
Tests des composants en situation
Optimisation mobile-first
Adaptation précise aux devices mobiles
Respect strict des guidelines iOS/Android
Tests exhaustifs sur différents devices
Méthodologie et Process
Méthodologie et process
La création des design systems reposait sur un équilibre entre rigueur et agilité. Notre journée type : planification le matin, production intensive ensuite, puis revue et échanges l'après-midi. Un rythme qui permettait de maintenir un workflow efficace. Les composants étaient systématiquement testés en conditions réelles, créant ainsi une boucle de feedback continue avec l'équipe. Cette approche itérative garantissait l'évolution et la pertinence de nos design systems.
La création des design systems reposait sur un équilibre entre rigueur et agilité. Notre journée type : planification le matin, production intensive ensuite, puis revue et échanges l'après-midi. Un rythme qui permettait de maintenir un workflow efficace. Les composants étaient systématiquement testés en conditions réelles, créant ainsi une boucle de feedback continue avec l'équipe. Cette approche itérative garantissait l'évolution et la pertinence de nos design systems.
82%
82%
de réduction de temps
sur les processus de livraison
de réduction de temps
sur les processus de livraison
227
227
composants
transférés et optimisés
composants
transférés et optimisés
x2
x2
en vitesse pour l'itération
d'une nouvelle fonctionnalité
en vitesse pour l'itération
d'une nouvelle fonctionnalité
÷3
÷3
du temps de recettage
avant la mise en production
du temps de recettage
avant la mise en production
Impact et amélioration
Impact et amélioration
La modernisation des design systems a généré des améliorations significatives à plusieurs niveaux.
La modernisation des design systems a généré des améliorations significatives à plusieurs niveaux.
01.
Gain de productivité
Gain de productivité
Pour le studio :
Création de maquettes accélérées
Mises à jour en direct des composants
Adaptation responsive avec l'auto-layout
Centralisation sur une plateforme
Pour le studio :
Création de maquettes accélérées
Mises à jour en direct des composants
Adaptation responsive avec l'auto-layout
Centralisation sur une plateforme
02.
Amélioration des workflows
Amélioration des workflows
La transition a transformé les process :
Collaboration en temps réel
Commentaires sur les maquettes
Réduction des échanges par mail/tickets
Un seul lien de partage, toujours à jour
La transition a transformé les process :
Collaboration en temps réel
Commentaires sur les maquettes
Réduction des échanges par mail/tickets
Un seul lien de partage, toujours à jour
03.
Optimisation technique
Optimisation technique
Bénéfices pour le développement :
Documentation technique enrichie
Cohérence accrue des composants
Temps de recettage réduit
Standards de design unifiés
Bénéfices pour le développement :
Documentation technique enrichie
Cohérence accrue des composants
Temps de recettage réduit
Standards de design unifiés
Jean - UX Designer
Jean - UX Designer
La centralisation des ressources a transformé notre quotidien. Quand je pense qu'avant, nous devions jongler entre trois outils différents pour une simple mise à jour...
La centralisation des ressources a transformé notre quotidien. Quand je pense qu'avant, nous devions jongler entre trois outils différents pour une simple mise à jour...
Margot - Product Owner
Margot - Product Owner
On est passé du parcours du combattant à quelque chose de fluide et d'intuitif. Plus besoin de chercher la dernière version dans ses mails ou de jongler entre 3 logiciels. Tout est là, accessible, à jour.
On est passé du parcours du combattant à quelque chose de fluide et d'intuitif. Plus besoin de chercher la dernière version dans ses mails ou de jongler entre 3 logiciels. Tout est là, accessible, à jour.
Apprentissages majeurs
Apprentissages majeurs
Cette expérience chez Ouest-France m'a permis d'acquérir des insights précieux pour la suite de mon parcours.
Cette expérience chez Ouest-France m'a permis d'acquérir des insights précieux pour la suite de mon parcours.
Vision systémique
Vision systémique
Penser "système" plutôt que pages isolées
Anticiper l'évolution des composants
Construire pour le long terme
Penser "système" plutôt que pages isolées
Anticiper l'évolution des composants
Construire pour le long terme
Collaboration & impact
Collaboration & impact
Participation active à la formation collective
Contribution à la transition des outils
Support dans l'adoption du changement
Participation active à la formation collective
Contribution à la transition des outils
Support dans l'adoption du changement
Expertise & innovation
Expertise & innovation
Maîtrise avancée de Figma
Structuration de design systems
Documentation technique approfondie
Maîtrise avancée de Figma
Structuration de design systems
Documentation technique approfondie
Vision systémique
Penser "système" plutôt que pages isolées
Anticiper l'évolutiion des composants
Construire pour le long terme
Collaboration & impact
Participation active à la formation collective
Contribution à la transition des outils
Support dans l'adoption du changement
Expertise & innovation
Maîtrise avancée de Figma
Structuration de design systems complexes
Documentation technique approfondie
Projets récents
Projets récents
Consultez mes derniers travaux.
Pgrounds
Pgrounds
Ui Design
UX Research
Application mobile qui centralise l'organisation des sports collectifs, réduisant le temps de planification de 30 minutes à 90 secondes.
Formula 1
Formula 1
Ui Design
UX Research
Redesign de l'application Formula 1, modernisant l'interface, améliorant la navigation et l'accès aux données
© 2025 / Enzo Hardy tous droits réservés
© 2025 / Enzo Hardy tous droits réservés
Enzo Hardy
Site réalisé par et pour Enzo Hardy
Site réalisé par et pour Enzo Hardy