UX/UI Design
Créer un point d'entrée unique et adapté à la saison 2025 de l'Orchestre National des Pays de la Loire
UX/UI Design
UX/UI Design
UX/UI Design
Réduire les efforts de production inutiles tout en permettant aux équipes de se concentrer sur l’itération graphique et fonctionnelle
Résumé du projet
Pareto est un design system interne conçu dans le cadre de mon alternance au sein d’une entreprise B2B spécialisée dans la conception de sites web basés sur une architecture WordPress mutualisée entre les projets clients.
Son nom fait référence à la loi de Pareto (80/20), avec l’objectif de concentrer les efforts sur un socle restreint de composants capables de couvrir la majorité des besoins fonctionnels et graphiques.
Le projet s’adresse principalement aux équipes de développement web et aux directeurs artistiques, avec l’ambition de créer une base commune de composants réutilisables d’un projet à l’autre. Les directeurs artistiques peuvent ainsi adapter les identités visuelles sans remettre en cause la structure technique, tandis que les développeurs s’appuient sur un référentiel unique, stable et maintenable.
Le contexte de départ révélait plusieurs tensions récurrentes : les équipes de développement recréaient régulièrement des composants déjà existants, tandis que les équipes créatives reconstruisaient leurs propres versions graphiques sur Figma, un outil récemment adopté. Cette duplication entraînait des pertes de temps, une surcharge des plannings et une complexité croissante en matière de maintenance technique.
Pareto intervient à un moment clé du cycle de production, en amont de la conception et du développement. Son objectif, du point de vue des utilisateurs internes, est de réduire les temps de production inutiles, de limiter la charge mentale liée à la recréation constante d’éléments existants et de fournir un outil clé en main favorisant une collaboration fluide entre design et développement.
Missions principales
Mission n°1
Définition de l’architecture globale du design system, création du système de variables (couleurs, typographies, espacements, états) et conception de l’ensemble des composants sur Figma, en cohérence avec l’architecture WordPress existante.
Mission n°2
Animation d’ateliers avec les équipes de développement afin de concevoir un système de variables techniquement viable, scalable et maintenable, permettant de centraliser les mises à jour des composants et de limiter la duplication.
Mission n°3
Recueil des besoins et contraintes des équipes créatives pour concevoir un système personnalisable d’un projet à l’autre, facilitant l’adaptation des identités visuelles sans remettre en cause la structure des composants.
Mission n°4
Création d’une documentation intégrée dans Figma, respectant les enjeux d’accessibilité, formation des directeurs artistiques à l’utilisation du design system et sensibilisation des équipes de développement à sa logique d’usage.
Résumé du projet
Pareto est un design system interne conçu dans le cadre de mon alternance au sein d’une entreprise B2B spécialisée dans la conception de sites web basés sur une architecture WordPress mutualisée entre les projets clients.
Son nom fait référence à la loi de Pareto (80/20), avec l’objectif de concentrer les efforts sur un socle restreint de composants capables de couvrir la majorité des besoins fonctionnels et graphiques.
Le projet s’adresse principalement aux équipes de développement web et aux directeurs artistiques, avec l’ambition de créer une base commune de composants réutilisables d’un projet à l’autre. Les directeurs artistiques peuvent ainsi adapter les identités visuelles sans remettre en cause la structure technique, tandis que les développeurs s’appuient sur un référentiel unique, stable et maintenable.
Le contexte de départ révélait plusieurs tensions récurrentes : les équipes de développement recréaient régulièrement des composants déjà existants, tandis que les équipes créatives reconstruisaient leurs propres versions graphiques sur Figma, un outil récemment adopté. Cette duplication entraînait des pertes de temps, une surcharge des plannings et une complexité croissante en matière de maintenance technique.
Pareto intervient à un moment clé du cycle de production, en amont de la conception et du développement. Son objectif, du point de vue des utilisateurs internes, est de réduire les temps de production inutiles, de limiter la charge mentale liée à la recréation constante d’éléments existants et de fournir un outil clé en main favorisant une collaboration fluide entre design et développement.
Missions principales
Mission n°1
Définition de l’architecture globale du design system, création du système de variables (couleurs, typographies, espacements, états) et conception de l’ensemble des composants sur Figma, en cohérence avec l’architecture WordPress existante.
Mission n°2
Animation d’ateliers avec les équipes de développement afin de concevoir un système de variables techniquement viable, scalable et maintenable, permettant de centraliser les mises à jour des composants et de limiter la duplication.
Mission n°3
Recueil des besoins et contraintes des équipes créatives pour concevoir un système personnalisable d’un projet à l’autre, facilitant l’adaptation des identités visuelles sans remettre en cause la structure des composants.
Mission n°4
Création d’une documentation intégrée dans Figma, respectant les enjeux d’accessibilité, formation des directeurs artistiques à l’utilisation du design system et sensibilisation des équipes de développement à sa logique d’usage.
Résumé du projet
Pareto est un design system interne conçu dans le cadre de mon alternance au sein d’une entreprise B2B spécialisée dans la conception de sites web basés sur une architecture WordPress mutualisée entre les projets clients.
Son nom fait référence à la loi de Pareto (80/20), avec l’objectif de concentrer les efforts sur un socle restreint de composants capables de couvrir la majorité des besoins fonctionnels et graphiques.
Le projet s’adresse principalement aux équipes de développement web et aux directeurs artistiques, avec l’ambition de créer une base commune de composants réutilisables d’un projet à l’autre. Les directeurs artistiques peuvent ainsi adapter les identités visuelles sans remettre en cause la structure technique, tandis que les développeurs s’appuient sur un référentiel unique, stable et maintenable.
Le contexte de départ révélait plusieurs tensions récurrentes : les équipes de développement recréaient régulièrement des composants déjà existants, tandis que les équipes créatives reconstruisaient leurs propres versions graphiques sur Figma, un outil récemment adopté. Cette duplication entraînait des pertes de temps, une surcharge des plannings et une complexité croissante en matière de maintenance technique.
Pareto intervient à un moment clé du cycle de production, en amont de la conception et du développement. Son objectif, du point de vue des utilisateurs internes, est de réduire les temps de production inutiles, de limiter la charge mentale liée à la recréation constante d’éléments existants et de fournir un outil clé en main favorisant une collaboration fluide entre design et développement.
Missions principales
Mission n°1
Définition de l’architecture globale du design system, création du système de variables (couleurs, typographies, espacements, états) et conception de l’ensemble des composants sur Figma, en cohérence avec l’architecture WordPress existante.
Mission n°2
Animation d’ateliers avec les équipes de développement afin de concevoir un système de variables techniquement viable, scalable et maintenable, permettant de centraliser les mises à jour des composants et de limiter la duplication.
Mission n°3
Recueil des besoins et contraintes des équipes créatives pour concevoir un système personnalisable d’un projet à l’autre, facilitant l’adaptation des identités visuelles sans remettre en cause la structure des composants.
Mission n°4
Création d’une documentation intégrée dans Figma, respectant les enjeux d’accessibilité, formation des directeurs artistiques à l’utilisation du design system et sensibilisation des équipes de développement à sa logique d’usage.
Résumé du projet
Pareto est un design system interne conçu dans le cadre de mon alternance au sein d’une entreprise B2B spécialisée dans la conception de sites web basés sur une architecture WordPress mutualisée entre les projets clients.
Son nom fait référence à la loi de Pareto (80/20), avec l’objectif de concentrer les efforts sur un socle restreint de composants capables de couvrir la majorité des besoins fonctionnels et graphiques.
Le projet s’adresse principalement aux équipes de développement web et aux directeurs artistiques, avec l’ambition de créer une base commune de composants réutilisables d’un projet à l’autre. Les directeurs artistiques peuvent ainsi adapter les identités visuelles sans remettre en cause la structure technique, tandis que les développeurs s’appuient sur un référentiel unique, stable et maintenable.
Le contexte de départ révélait plusieurs tensions récurrentes : les équipes de développement recréaient régulièrement des composants déjà existants, tandis que les équipes créatives reconstruisaient leurs propres versions graphiques sur Figma, un outil récemment adopté. Cette duplication entraînait des pertes de temps, une surcharge des plannings et une complexité croissante en matière de maintenance technique.
Pareto intervient à un moment clé du cycle de production, en amont de la conception et du développement. Son objectif, du point de vue des utilisateurs internes, est de réduire les temps de production inutiles, de limiter la charge mentale liée à la recréation constante d’éléments existants et de fournir un outil clé en main favorisant une collaboration fluide entre design et développement.
Missions principales
Mission n°1
Définition de l’architecture globale du design system, création du système de variables (couleurs, typographies, espacements, états) et conception de l’ensemble des composants sur Figma, en cohérence avec l’architecture WordPress existante.
Mission n°2
Animation d’ateliers avec les équipes de développement afin de concevoir un système de variables techniquement viable, scalable et maintenable, permettant de centraliser les mises à jour des composants et de limiter la duplication.
Mission n°3
Recueil des besoins et contraintes des équipes créatives pour concevoir un système personnalisable d’un projet à l’autre, facilitant l’adaptation des identités visuelles sans remettre en cause la structure des composants.
Mission n°4
Création d’une documentation intégrée dans Figma, respectant les enjeux d’accessibilité, formation des directeurs artistiques à l’utilisation du design system et sensibilisation des équipes de développement à sa logique d’usage.
Conception du projet - Démarche UX & problématique
Le projet Pareto a débuté par une phase d’exploration et d’analyse, comprenant un benchmark de plusieurs design systems de référence et un audit de l’existant au sein de l’entreprise.
Cette phase a permis de confirmer qu’un design system efficace doit avant tout être adapté à son contexte organisationnel et technique, plutôt que reproduire un modèle existant.
En parallèle, un audit des composants déjà développés, des gabarits WordPress, ainsi que des contraintes liées à l’accessibilité et au référencement a mis en évidence la nécessité de créer un miroir cohérent entre un kit de composants techniques et son équivalent graphique et documentaire sur Figma.
Les échanges avec les équipes de développement, les chefs de projet et les directeurs artistiques ont permis d’identifier les contraintes de chacun et d’orienter la solution vers un système à la fois structurant et adoptable.
Comment réduire les efforts de production économiquement inutiles tout en permettant aux équipes de se concentrer sur l’itération graphique et fonctionnelle des projets utilisant un design system commun ?
Cette problématique a guidé une approche de conception progressive, inspirée de l’Atomic Design, afin de construire une bibliothèque cohérente, maintenable et évolutive.
Conception du projet - Démarche UX & problématique
Le projet Pareto a débuté par une phase d’exploration et d’analyse, comprenant un benchmark de plusieurs design systems de référence et un audit de l’existant au sein de l’entreprise.
Cette phase a permis de confirmer qu’un design system efficace doit avant tout être adapté à son contexte organisationnel et technique, plutôt que reproduire un modèle existant.
En parallèle, un audit des composants déjà développés, des gabarits WordPress, ainsi que des contraintes liées à l’accessibilité et au référencement a mis en évidence la nécessité de créer un miroir cohérent entre un kit de composants techniques et son équivalent graphique et documentaire sur Figma.
Les échanges avec les équipes de développement, les chefs de projet et les directeurs artistiques ont permis d’identifier les contraintes de chacun et d’orienter la solution vers un système à la fois structurant et adoptable.
Comment réduire les efforts de production économiquement inutiles tout en permettant aux équipes de se concentrer sur l’itération graphique et fonctionnelle des projets utilisant un design system commun ?
Cette problématique a guidé une approche de conception progressive, inspirée de l’Atomic Design, afin de construire une bibliothèque cohérente, maintenable et évolutive.
Conception du projet - Démarche UX & problématique
Le projet Pareto a débuté par une phase d’exploration et d’analyse, comprenant un benchmark de plusieurs design systems de référence et un audit de l’existant au sein de l’entreprise.
Cette phase a permis de confirmer qu’un design system efficace doit avant tout être adapté à son contexte organisationnel et technique, plutôt que reproduire un modèle existant.
En parallèle, un audit des composants déjà développés, des gabarits WordPress, ainsi que des contraintes liées à l’accessibilité et au référencement a mis en évidence la nécessité de créer un miroir cohérent entre un kit de composants techniques et son équivalent graphique et documentaire sur Figma.
Les échanges avec les équipes de développement, les chefs de projet et les directeurs artistiques ont permis d’identifier les contraintes de chacun et d’orienter la solution vers un système à la fois structurant et adoptable.
Comment réduire les efforts de production économiquement inutiles tout en permettant aux équipes de se concentrer sur l’itération graphique et fonctionnelle des projets utilisant un design system commun ?
Cette problématique a guidé une approche de conception progressive, inspirée de l’Atomic Design, afin de construire une bibliothèque cohérente, maintenable et évolutive.
Conception du projet - Démarche UX & problématique
Le projet Pareto a débuté par une phase d’exploration et d’analyse, comprenant un benchmark de plusieurs design systems de référence et un audit de l’existant au sein de l’entreprise.
Cette phase a permis de confirmer qu’un design system efficace doit avant tout être adapté à son contexte organisationnel et technique, plutôt que reproduire un modèle existant.
En parallèle, un audit des composants déjà développés, des gabarits WordPress, ainsi que des contraintes liées à l’accessibilité et au référencement a mis en évidence la nécessité de créer un miroir cohérent entre un kit de composants techniques et son équivalent graphique et documentaire sur Figma.
Les échanges avec les équipes de développement, les chefs de projet et les directeurs artistiques ont permis d’identifier les contraintes de chacun et d’orienter la solution vers un système à la fois structurant et adoptable.
Comment réduire les efforts de production économiquement inutiles tout en permettant aux équipes de se concentrer sur l’itération graphique et fonctionnelle des projets utilisant un design system commun ?
Cette problématique a guidé une approche de conception progressive, inspirée de l’Atomic Design, afin de construire une bibliothèque cohérente, maintenable et évolutive.
Design System - Pareto
Le design system Pareto a été conçu comme un socle durable, capable de s’inscrire dans le temps et d’évoluer avec les besoins de l’entreprise.
Il repose sur le principe de réutiliser environ 80 % de composants existants, tout en laissant une marge d’évolution pour les besoins spécifiques de certains projets.
Pareto s’appuie sur les principes de l’Atomic Design, combinés à une organisation inspirée de Material UI, distinguant clairement variables primitives et variables sémantiques.
Les primitives définissent les fondations du système (couleurs, typographies, espacements, bordures), tandis que les sémantiques invoquent ces primitives dans des contextes d’usage précis (remplissages, typographie, états, layers, responsive).
Les composants sont organisés selon différents niveaux :
Atomes : fondations visuelles et structurelle
Molécules : composants simples (boutons, champs, menus)
Organismes : ensembles fonctionnels plus complexes
Templates et gabarits : structures de pages prêtes à l’emploi pour WordPress
Cette hiérarchie permet aux équipes de travailler à différents niveaux de granularité sans casser le système.
Pareto a été conçu et documenté sur Figma, avec FigJam utilisé pour l’idéation.
La documentation, intégrée directement au design system, détaille l’anatomie des composants, leurs variantes, leurs règles d’usage, ainsi qu’une checklist d’accessibilité et les éléments modifiables afin de garantir une utilisation maîtrisée.
Le design system est pensé comme un système vivant, destiné à évoluer sans perte de cohérence.
Design System - Pareto
Le design system Pareto a été conçu comme un socle durable, capable de s’inscrire dans le temps et d’évoluer avec les besoins de l’entreprise.
Il repose sur le principe de réutiliser environ 80 % de composants existants, tout en laissant une marge d’évolution pour les besoins spécifiques de certains projets.
Pareto s’appuie sur les principes de l’Atomic Design, combinés à une organisation inspirée de Material UI, distinguant clairement variables primitives et variables sémantiques.
Les primitives définissent les fondations du système (couleurs, typographies, espacements, bordures), tandis que les sémantiques invoquent ces primitives dans des contextes d’usage précis (remplissages, typographie, états, layers, responsive).
Les composants sont organisés selon différents niveaux :
Atomes : fondations visuelles et structurelle
Molécules : composants simples (boutons, champs, menus)
Organismes : ensembles fonctionnels plus complexes
Templates et gabarits : structures de pages prêtes à l’emploi pour WordPress
Cette hiérarchie permet aux équipes de travailler à différents niveaux de granularité sans casser le système.
Pareto a été conçu et documenté sur Figma, avec FigJam utilisé pour l’idéation.
La documentation, intégrée directement au design system, détaille l’anatomie des composants, leurs variantes, leurs règles d’usage, ainsi qu’une checklist d’accessibilité et les éléments modifiables afin de garantir une utilisation maîtrisée.
Le design system est pensé comme un système vivant, destiné à évoluer sans perte de cohérence.
Design System - Pareto
Le design system Pareto a été conçu comme un socle durable, capable de s’inscrire dans le temps et d’évoluer avec les besoins de l’entreprise.
Il repose sur le principe de réutiliser environ 80 % de composants existants, tout en laissant une marge d’évolution pour les besoins spécifiques de certains projets.
Pareto s’appuie sur les principes de l’Atomic Design, combinés à une organisation inspirée de Material UI, distinguant clairement variables primitives et variables sémantiques.
Les primitives définissent les fondations du système (couleurs, typographies, espacements, bordures), tandis que les sémantiques invoquent ces primitives dans des contextes d’usage précis (remplissages, typographie, états, layers, responsive).
Les composants sont organisés selon différents niveaux :
Atomes : fondations visuelles et structurelle
Molécules : composants simples (boutons, champs, menus)
Organismes : ensembles fonctionnels plus complexes
Templates et gabarits : structures de pages prêtes à l’emploi pour WordPress
Cette hiérarchie permet aux équipes de travailler à différents niveaux de granularité sans casser le système.
Pareto a été conçu et documenté sur Figma, avec FigJam utilisé pour l’idéation.
La documentation, intégrée directement au design system, détaille l’anatomie des composants, leurs variantes, leurs règles d’usage, ainsi qu’une checklist d’accessibilité et les éléments modifiables afin de garantir une utilisation maîtrisée.
Le design system est pensé comme un système vivant, destiné à évoluer sans perte de cohérence.
Design System - Pareto
Le design system Pareto a été conçu comme un socle durable, capable de s’inscrire dans le temps et d’évoluer avec les besoins de l’entreprise.
Il repose sur le principe de réutiliser environ 80 % de composants existants, tout en laissant une marge d’évolution pour les besoins spécifiques de certains projets.
Pareto s’appuie sur les principes de l’Atomic Design, combinés à une organisation inspirée de Material UI, distinguant clairement variables primitives et variables sémantiques.
Les primitives définissent les fondations du système (couleurs, typographies, espacements, bordures), tandis que les sémantiques invoquent ces primitives dans des contextes d’usage précis (remplissages, typographie, états, layers, responsive).
Les composants sont organisés selon différents niveaux :
Atomes : fondations visuelles et structurelle
Molécules : composants simples (boutons, champs, menus)
Organismes : ensembles fonctionnels plus complexes
Templates et gabarits : structures de pages prêtes à l’emploi pour WordPress
Cette hiérarchie permet aux équipes de travailler à différents niveaux de granularité sans casser le système.
Pareto a été conçu et documenté sur Figma, avec FigJam utilisé pour l’idéation.
La documentation, intégrée directement au design system, détaille l’anatomie des composants, leurs variantes, leurs règles d’usage, ainsi qu’une checklist d’accessibilité et les éléments modifiables afin de garantir une utilisation maîtrisée.
Le design system est pensé comme un système vivant, destiné à évoluer sans perte de cohérence.
Solution finale
Pareto est initialisé dès le démarrage de chaque projet, servant de base commune aux équipes de design et de développement. Il permet de s’appuyer sur un existant fonctionnel, partagé et maintenable, dès les premières phases de conception.
En centralisant les composants et les règles d’usage, Pareto réduit les efforts de production inutiles et facilite les itérations rapides, sans recréation systématique.
La solution :
réduit la charge cognitive des équipes,
instaure un langage commun entre design et développement,
facilite la prise de décision face aux demandes clients,
améliore la maîtrise des délais, des coûts et de la qualité globale des projets.
Solution finale
Pareto est initialisé dès le démarrage de chaque projet, servant de base commune aux équipes de design et de développement. Il permet de s’appuyer sur un existant fonctionnel, partagé et maintenable, dès les premières phases de conception.
En centralisant les composants et les règles d’usage, Pareto réduit les efforts de production inutiles et facilite les itérations rapides, sans recréation systématique.
La solution :
réduit la charge cognitive des équipes,
instaure un langage commun entre design et développement,
facilite la prise de décision face aux demandes clients,
améliore la maîtrise des délais, des coûts et de la qualité globale des projets.
Solution finale
Pareto est initialisé dès le démarrage de chaque projet, servant de base commune aux équipes de design et de développement. Il permet de s’appuyer sur un existant fonctionnel, partagé et maintenable, dès les premières phases de conception.
En centralisant les composants et les règles d’usage, Pareto réduit les efforts de production inutiles et facilite les itérations rapides, sans recréation systématique.
La solution :
réduit la charge cognitive des équipes,
instaure un langage commun entre design et développement,
facilite la prise de décision face aux demandes clients,
améliore la maîtrise des délais, des coûts et de la qualité globale des projets.
Solution finale
Pareto est initialisé dès le démarrage de chaque projet, servant de base commune aux équipes de design et de développement. Il permet de s’appuyer sur un existant fonctionnel, partagé et maintenable, dès les premières phases de conception.
En centralisant les composants et les règles d’usage, Pareto réduit les efforts de production inutiles et facilite les itérations rapides, sans recréation systématique.
La solution :
réduit la charge cognitive des équipes,
instaure un langage commun entre design et développement,
facilite la prise de décision face aux demandes clients,
améliore la maîtrise des délais, des coûts et de la qualité globale des projets.
Voir d'autres projets
Voir d'autres projets
Voir d'autres projets
Voir d'autres projets
UX/UI Design
Créer un point d'entrée unique et adapté à la saison 2025 de l'Orchestre National des Pays de la Loire
UX/UI Design
Créer un point d'entrée unique et adapté à la saison 2025 de l'Orchestre National des Pays de la Loire
UX/UI Design
Créer un point d'entrée unique et adapté à la saison 2025 de l'Orchestre National des Pays de la Loire
UX/UI Design
Concevoir un site vitrine unique pour un groupe industriel aux activités multiples
UX/UI Design
Concevoir un site vitrine unique pour un groupe industriel aux activités multiples
UX/UI Design
Concevoir un site vitrine unique pour un groupe industriel aux activités multiples
UX/UI Design
Concevoir un site vitrine unique pour un groupe industriel aux activités multiples