UI Design

DS Blue Bird

Création & gouvernance du design system des apps métier d'Air France

B2EDesign SystemiOSUX Research Confidentiel
Rôle
Lead Product Designer — Design System
Durée
4 mois
Plateforme
iOS & Desktop — Figma
Client
Air France
Année
2024
DS Blue Bird
Contexte 01

À force de refontes successives, les applications du service en vol d'Air France avaient chacune développé leur propre vocabulaire visuel : mêmes usages, interfaces différentes, coûts de maintenance en hausse et formation des équipages compliquée. Blue Bird est le design system que j'ai construit pour y mettre fin, pensé pour les apps métier iOS et desktop, en complément de Daisy, le design system grand public du groupe.

SecteurUI Design
RôleLead Product Designer — Design System
Durée4 mois
PlateformeiOS & Desktop — Figma
ClientAir France
Problématique 02

Comment standardiser un parc d'applications métier hétérogènes sans figer la création, tout en fluidifiant le passage de relais entre designers et développeurs ?

Objectifs 03
01
Construire un système atomique complet : tokens, composants, patterns
02
Harmoniser l'expérience sur l'ensemble des applications du service en vol
03
Réduire le temps d'intégration des interfaces côté développement
04
Documenter pour rendre le système utilisable sans moi
Processus 04
01
Inventaire & consolidation
Extraction et audit de tous les composants Figma existants. Doublons, variantes orphelines, incohérences de nommage : la consolidation a été un travail de dentelle, style par style, marge par marge.
AuditAtomic design
02
Fondations & tokens
Mise en place des design tokens — couleurs, typographies, espacements, élévations — et paramétrage exhaustif des styles. Rien n'est détaché : tout se met à jour à la source.
TokensVariables Figma
03
Composants & patterns
Plus de 120 composants construits en auto-layout, des boutons génériques aux cards équipage spécifiques métier. Chaque composant expose des propriétés claires pour être manipulé sans casser le système.
Auto-layoutVariants
04
Documentation & gouvernance
Documentation sur Zeroheight en collaboration étroite avec le développeur principal, rituels de revue, et déploiement du système sur les autres applications Figma, jusqu'à l'app Pilot Mission.
ZeroheightGouvernance
Résultats 05
120+
Composants documentés
-30%
Temps d'intégration côté dev
3
Applications alignées sur le système
100%
Styles couverts par des tokens
Plus-values 07
Un langage commun entre designers et développeurs, adopté au quotidien
Des transferts de maquettes sans réunion d'explication : la documentation fait le travail
Un système qui a survécu à mon départ — le vrai test d'un design system
Partagé au-delà du périmètre initial, jusqu'à l'app Pilot Mission
Outils
Figma
Zeroheight
Jira
Github
Ce process vous parle ?
Chaque projet suit la même exigence : anticiper les usages, mesurer l'impact, soigner le moindre détail. Parlons de ce que je peux apporter à votre équipe.
Mon CV
← Précédent
Skylib
Suivant →
SNCF Connect