Armée de l’air
Type de projet : Design System
Collaborateurs :
- UI designer confirmé
- UX designer confirmé
Outils utilisés : Figma
Demande
L’Armée de l’Air et de l’Espace souhaitait moderniser son site de recrutement afin d’optimiser l’expérience utilisateur tout en renforçant l’efficacité de son dispositif digital. L’objectif principal de cette refonte était d’attirer davantage de candidats et de faciliter leur passage à l’action, en les orientant rapidement vers un centre de recrutement. Il s’agissait donc de transformer un site purement informatif en un véritable outil de conversion, tout en valorisant la diversité des parcours proposés.
Mon intervention
J’ai intégré l’équipe UI dès le début du projet, en apportant mon soutien à la création du design system. Ce projet a été l’un de ceux où j’ai bénéficié de la plus grande autonomie, notamment dans la structuration des composants clés et la création de nombreux éléments réutilisables. Grâce à mon implication dans plusieurs initiatives, j’ai pu être au cœur de la mise en place d’une base solide pour la cohérence visuelle et fonctionnelle du site.
Les enjeux
Du côté utilisateur, le site devait permettre à chacun, jeunes diplômés, reconversions, technophiles ou profils militaires, de s’informer clairement, de trouver rapidement les informations pertinentes et de se projeter dans les carrières possibles. Côté business, le défi était de générer un maximum de leads qualifiés vers les centres de recrutement, tout en assurant une cohérence dans les messages, les visuels et les parcours, malgré la diversité des cibles. La création d’un design system modulaire et scalable s’est révélée essentielle pour répondre à ces deux enjeux simultanément.
Mise en place des styles
La première étape a consisté à définir les fondations visuelles du design system : typographies, couleurs, grilles, espacements et styles de boutons. Cette normalisation permet d’instaurer un langage visuel cohérent, en ligne avec l’identité de l’Armée de l’Air, tout en assurant une lisibilité optimale pour l’utilisateur final.
Atomatisation des illustrations
Une base d’illustrations nous a été fournie, qu’il a fallu trier, classer et structurer. J’ai participé à cette phase en identifiant les catégories visuelles (par exemple : type de métier, environnement, matériel militaire) pour faciliter leur réutilisation. Cette organisation a permis d’intégrer les illustrations de façon intelligente dans les composants sans alourdir les interfaces.
Créations de composant
À partir des styles et illustrations atomisées, nous avons conçu des composants modulables, tels que les fiches métiers, les encarts informatifs ou encore les carrousels de témoignages. Chaque composant a été pensé pour être adaptable rapidement via des variantes (contenus, visuels, versions desktop/mobile), ce qui facilite la déclinaison de maquettes selon les pages ou contextes du site.
Créations des molécules
En combinant plusieurs composants de base, nous avons conçu des molécules plus complexes répondant à des besoins spécifiques, comme des blocs d’appel à l’action contextuels ou des sections d’information interactives. Ces molécules jouent un rôle clé dans la construction de pages claires et dynamiques, en s'adaptant aux attentes des utilisateurs identifiées en amont.
Créations des TLC
Une fois tous les composants et molécules créés, nous sommes passés à la création des Top Level Components (TLC). Ces éléments regroupent plusieurs composants au sein de blocs fonctionnels complets, prêts à être utilisés dans le back-office. J’ai pris part activement à cette étape en créant plusieurs TLC, notamment ceux destinés à présenter les parcours de formation, les conditions d’engagement ou encore les témoignages.
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.
