Agence de la Biomédécine
Type de projet : Design System
Collaborateurs :
- UI designer confirmé
- UX designer confirmé
Outils utilisés : Figma
Demande
L’Agence de la biomédecine souhaitait moderniser son site d’information sur le don d’organes afin d’offrir une expérience utilisateur plus fluide, accessible et actuelle. Cette refonte avait pour objectif principal de rendre l’information plus claire, plus pédagogique et mieux structurée, pour permettre à chacun de comprendre facilement les enjeux du don et les démarches associées. Il s’agissait ainsi de transformer un site dense et institutionnel en une plateforme plus humaine, engageante et tournée vers l’action, tout en conservant un haut niveau de fiabilité et de rigueur scientifique.
Mon intervention
Dans l’optique de répondre aux besoins de clarté et de hiérarchisation de l’information, notre équipe a proposé la mise en place d’un bento design, afin d’organiser les contenus de façon modulaire, visuelle et facilement compréhensible. Pour ma part, j’ai été en charge de l’automatisation des visuels, une étape essentielle pour garantir l’efficacité du design system. N’étant pas à mon premier projet de ce type, j’ai pu travailler en toute autonomie sur cette phase, en structurant les composants visuels et en optimisant leur réutilisabilité. Mon rôle m’a permis d’être au cœur de la création d’une base solide, pensée pour assurer cohérence, évolutivité et fluidité dans la production des futures interfaces du site.
Les enjeux
Du côté utilisateur, le site devait permettre à chacun – citoyens curieux, personnes concernées par le don d’organes, familles en questionnement ou simples visiteurs – d’accéder à une information claire, fiable et rassurante sur un sujet souvent sensible. L’enjeu était de lever les zones d’ombre, de rendre les démarches plus compréhensibles et d’accompagner l’utilisateur avec pédagogie tout au long de sa navigation. Côté institutionnel, il s’agissait de redonner une image plus moderne et accessible à l’Agence de la biomédecine, tout en garantissant la rigueur et la crédibilité attendues d’un site public. La création d’un design system cohérent et évolutif a été un levier essentiel pour structurer les parcours, harmoniser les contenus et faciliter les futures évolutions du site.
Mise en place des styles
La première étape a consisté à poser les bases du design system en définissant les éléments essentiels de l’identité visuelle : typographies, couleurs, grilles, marges et styles de boutons. Cette phase de normalisation visait à instaurer un langage graphique homogène, fidèle à l’univers de l’Armée de l’Air et de l’Espace, tout en garantissant une expérience lisible, structurée et accessible pour l’utilisateur.
Atomatisation des illustrations
Une base d’illustrations existantes nous a été fournie en début de projet. J’ai participé à leur tri, à leur catégorisation et à leur structuration, en identifiant des ensembles visuels cohérents (par exemple : environnement, métiers, équipements). Cette classification a permis de rationaliser leur utilisation au sein du design system, en intégrant les illustrations de façon pertinente et non-intrusive dans les interfaces.
Créations de composant
À partir des éléments visuels atomisés, nous avons conçu une bibliothèque de composants UI : fiches métiers, carrousels, blocs d’information, etc. Chaque composant a été pensé pour être modulaire et facilement ajustable, notamment via des variantes de contenu, d’illustration ou d’affichage (desktop/mobile). Cette approche permet de gagner du temps lors de la production des maquettes et de conserver une cohérence globale, quelle que soit la page ou le contexte.
Créations des molécules
En combinant ces composants de base, nous avons conçu des structures plus complexes répondant à des objectifs précis : mise en avant d’un appel à l’action, encarts interactifs, parcours guidés… Ces molécules ont été pensées pour s’adapter aux usages et aux attentes utilisateurs identifiés en amont, tout en offrant une grande flexibilité dans l’assemblage des pages.
Créations des TLC
Une fois les composants et molécules en place, nous avons développé les Top Level Components (TLC). Ces blocs complets, prêts à l’emploi, sont pensés pour être directement intégrés depuis le back-office. J’ai activement contribué à cette étape, en créant plusieurs TLC clés, notamment pour les pages dédiées aux parcours de formation, aux conditions d’engagement ou aux retours d’expérience.
Avantages des TLC
Les TLC représentent un gain de temps et de rigueur non négligeable pour les équipes. Ils offrent une base stable et modulaire pour les développeurs, les chefs de projet et les intégrateurs. Chaque TLC est documenté, décliné pour le responsive, et couvre tous les états possibles, même ceux qui ne seront peut-être jamais utilisés. Cela permet d’anticiper les besoins, d’éviter les erreurs de conception ou d’intégration, et de fluidifier considérablement la chaîne de production. Ce projet a démontré l’efficacité d’un design system bien structuré, au service de la cohérence, de la performance et de la qualité d’expérience utilisateur.
