Agence de la Biomédécine
Revenir à mes projets 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. D’autres projets
Protégé : Armée de l’air
Il n’y a pas d’extrait, car cette publication est protégée.
McDonald’s
Revenir à mes projets Type de projet : Design System Collaborateurs : UI designer confirmé UX designer confirmé Outils utilisés : Figma Demande Dans le cadre de la refonte complète des bornes de commande McDonald’s, l’objectif principal était d’optimiser les parcours utilisateurs et de moderniser l’interface. En collaboration étroite avec les équipes UI et UX, le projet a nécessité une adaptation fine aux contraintes techniques et physiques liées à un déploiement à grande échelle. Mon intervention J’ai accompagné l’équipe UI dans la phase de création du design system, un outil essentiel qui rassemble tous les composants graphiques et fonctionnels (boutons, typographies, couleurs, icônes, grilles, etc.) afin de garantir une cohérence visuelle et une efficacité dans la production de futures interfaces. Ce travail a permis de structurer l’écosystème digital de McDonald’s de manière durable et évolutive. Les enjeux La refonte des bornes de commande McDonald’s représentait un enjeu à la fois technique et organisationnel. À chaque évolution ou nouveau besoin, les équipes UI devaient recréer des composants graphiques en partant de zéro, sans base centralisée. Cela entraînait des variations visuelles selon les projets, une perte de temps significative, et une complexité croissante dans la gestion de la cohérence entre les différents supports digitaux (bornes, app mobile, site web). Atomatisation des images et illustrations Pour construire un design system solide et fonctionnel, il est essentiel de passer par certaines étapes clés. Lors de ce projet, j’ai eu l’opportunité de prendre en charge l’organisation et l’optimisation des images et illustrations qui allaient être intégrées sur les bornes McDonald’s. À partir d’une base de données fournie par le client, nous avons trié et classifié chaque visuel, qu’il s’agisse d’illustrations de produits, d’icônes ou de photos. L’objectif était d’identifier des groupes cohérents (burgers, menus, boissons, desserts, etc.) afin de poser des bases solides pour la création des composants UI. Créations de composant Une fois les visuels bien organisés, l’étape suivante consiste à créer des composants. Ces composants permettent aux UI designers de modifier rapidement les visuels au sein des templates grâce à un système de variantes. En catégorisant les visuels par type de produit, de packaging, de taille, ou encore par la présence de toppings, chaque composant devient modulable selon des critères bien définis. Dans certains cas, nous avons également intégré des toggles, par exemple pour gérer la présence ou non d’ombres sur les images. Ce travail rend la manipulation des visuels plus rapide, plus cohérente, et surtout adaptée aux besoins spécifiques de chaque interface. Créations des TLC Une fois tous les composants créés, nous passons à la mise en place des TLC, les Top Level Components. Ce sont des éléments structurants qui se retrouvent dans le back-office, une plateforme interne qui centralise toutes les ressources visuelles et fonctionnelles de la marque. En tant qu’UI designer, je réutilise régulièrement ces TLC pour construire des interfaces tout en respectant les règles du back-office. En quelques clics, je peux intégrer des blocs déjà pensés pour être cohérents, flexibles et prêts à l’emploi, ce qui fait gagner un temps précieux à toutes les équipes. Avantages des TLC La création de TLC représente un véritable gain de temps et de qualité dans la gestion d’un design system. Pour les chefs de projet, les développeurs ou les intégrateurs, c’est une garantie de cohérence et de fiabilité. Chaque TLC comprend toutes les déclinaisons nécessaires (desktop, mobile, nombre de slides, etc.) et définit les comportements attendus. Même si certains états ou éléments (comme certains types de CTA) ne sont pas toujours utilisés, leur présence dans les TLC évite les oublis, les erreurs, et surtout les allers-retours inutiles. C’est un vrai pont entre la création et l’intégration : tout est anticipé, documenté, et prêt à être utilisé de manière fiable. D’autres projets
