Vue d'ensemble du design system Halo de La Poste présentant les fondations graphiques, composants UI, typographie, illustrations et identité visuelle.

La Poste

Harmoniser les expériences numériques grâce à un design system commun et évolutif.

La Poste, entreprise à mission depuis 2021, maintient un vaste réseau de points de contact répartis sur l'ensemble du territoire français. Au fil des années, de nombreux outils métiers et services numériques ont été développés pour répondre aux besoins des équipes, créant un écosystème riche mais hétérogène. Le projet consistait à accompagner la convergence graphique et technique de ces interfaces grâce à la conception d'un design system partagé, capable d'unifier les pratiques, d'améliorer la cohérence des parcours et de faciliter l'évolution des produits numériques.

SECTEUR
Service public

SAVOIR-FAIRE
Design system, UI, illustration

ÉQUIPE
Pollux (équipe design de Docaposte)

Illustration présentant le design system comme référentiel collaboratif pour la conception d'interfaces numériques cohérentes.
Présentation des bénéfices du design system : collaboration, harmonisation, accélération des projets et maintenance des interfaces.

Création d’un design system

Suite à une phase d'analyse des outils existants, nous avons identifié les principales problématiques de l'écosystème numérique : dette technique, bibliothèques incomplètes, composants à enrichir et parcours hétérogènes. Ce travail a permis d'amorcer la création d'un design system destiné à l'ensemble des services numériques utilisés dans les points de contact La Poste.

Baptisé Halo, en référence à la lumière omniprésente dans l'univers de La Poste, ce design system constitue le point de référence pour toutes les personnes impliquées dans la conception et le développement des interfaces. Il offre un langage commun, capable d'accompagner durablement l'évolution des produits numériques.

Système typographique du design system Halo de La Poste avec hiérarchie des styles de texte et spécifications des polices.
Aperçu des tokens primitifs du design system, incluant les couleurs de marque, d’états et additionnelles.

Des fondations communes

La création du design system a débuté par la définition de fondations communes pour l'ensemble des interfaces. Le système graphique a été mis en conformité avec l'identité visuelle de La Poste et de ses différentes branches, notamment La Banque Postale et La Poste Pro.

Ce socle partagé repose sur une architecture de tokens primitifs et sémantiques, un système typographique flexible, des bibliothèques d'icônes et d'illustrations, ainsi que sur des règles communes de grilles, d'espacements et de radius. Il garantit la cohérence de l'ensemble des produits numériques.

Tableau de variable montrant 3 thèmes du design system et l’utilisation de tokens sémantiques
Mockup d’une interface de connexion montrant successivement 3 thèmes du design system.
Série d’illustrations sur la thématique du courrier : timbres, enveloppes, prêt à poster, courriers recommandés, colissimo, chronopost, courriers internationaux, etc.
Présentation d’une sélection d’icônes du design system.
Mockup d’une interface utilisateur de prise de rendez-vous utilisant des icônes du design system.
Dashboard de La Poste Pro utilisant des icônes et des illustrations du halo design system.
Librairie d’icônes filaires du design system halo.
Plusieurs intefaces mobiles utilisant notamment des icônes et des illustrations du design system
Comparaison des composants web et android montrant leur convergence graphique.

Des composants cohérents et accessibles

Parce que les outils métiers de La Poste reposent sur plusieurs technologies, le design system a été décliné en bibliothèques de composants spécifiques au web responsive et à Android natif. Si chacune répond à des contraintes techniques différentes, elles ont été conçues pour partager un même langage visuel et des comportements similaires.

Pensés dans le respect des normes d'accessibilité, ils permettent au plus grand nombre d'utiliser les interfaces dans les meilleures conditions. Leur harmonisation contribue à créer des parcours plus cohérents, des repères communs et une expérience plus intuitive pour les utilisatrices et utilisateurs.

Détail de l’architecture figma du design system : une bibliothèque de fondations, un UI kit web, un UI kit andoid et une bibliothèque de parcours récurrents.
Écran de chargement montrant une illustration de cycliste et une barre de progression.
Interface d’un outil pour les partenaires utilisant le composant tableau.
Aperçu de l’ensemble des variants du composant bouton (filled, outlined, text, avec ou sans icône, hover, focus, etc).
Aperçu de l’ensemble des variants du composant field (hover, focus, erreur, avec ou sans label, avec ou sans icône, etc).
Gallerie d’interfaces utilisateur de différents outils laposte utilisant tous le design system.

Faciliter l'appropriation

Afin de faciliter l'adoption du design system par l'ensemble des équipes, une documentation complète a été conçue en collaboration avec les développeur·euses. Elle détaille les composants, leurs règles d'utilisation, leurs variantes ainsi que les bonnes pratiques de mise en œuvre. Véritable référentiel partagé, cette documentation garantit une utilisation cohérente du design system et accompagne son évolution dans le temps.

Vue d'ensemble de la documentation du design system Halo présentant les règles d'utilisation des composants web.
Documentation du composant Button du design system Halo.
Documentation du composant Text Field du design system Halo.