Air France Mobile App | E-commerce

  • UX Design
  • UI Design
  • Design System
  • Art Direction
  • Figma
  • Maze
  • Adobe Suite
  • Protopie

Rôle: Lead Product Designer | 2020 → 2023

Responsabilités:

Refonte UI et prototype interactif haute fidélité pour tests & validation • Création du design system mobile • Collaboration rapprochée avec CX, produit et les équipes iOS/Android pour garantir cohérence et qualité d’implémentation

Contexte:

Suite à la fusion des applications Air France et KLM, l’objectif était de créer une interface unifiée et moderne, tout en respectant l’identité propre à chaque marque. L’application Air France devait refléter son nouveau positionnement premium. L’existant, daté et peu structuré, manquait de hiérarchie visuelle et d’une UX solide, un enjeu important pour les membres premium et voyageurs loisirs, qui attendent une expérience fluide et élégante.

Approche

Prototype haute fidélité

Pendant le déroulement du Design Sprint, j’ai designé (à partir de sketch) et réalisé le prototype avec Protopie afin d’obtenir le réalisme d’une véritable application, ce que Figma ne permettait pas. Il servait principalement aux tests utilisateurs, mais avait aussi un rôle clé : convaincre les stakeholders et la direction d’adopter une nouvelle direction visuelle radicalement différente.

Modernisation globale de l’expérience

L’ensemble de l’interface a été repensé pour devenir plus premium, accessible et homogène. Les principales améliorations comprennent :

  • Réduction de la surutilisation du rouge pour éviter un aspect « alerte »

  • Palette de couleurs, typographie, espacements et structures retravaillés

  • Hiérarchie visuelle clarifiée pour faciliter la navigation

  • Unification des patterns UI issus des deux anciennes apps

Avant redesign
Après redesign
Introduction du mode sombre

Conception du premier dark mode de l’application, pensé pour le confort visuel, le contraste et l’expression premium de la nouvelle identité.

Conception du Design System

Création d’un design system complet dans Figma, comprenant :

  • Tokens de couleurs et typographies

  • Bibliothèques de composants avec états d’interaction

  • Règles de layout et d’espacement

  • Intégration des principes d’accessibilité dans chaque composant

Le système a été structuré pour faciliter le travail des développeurs grâce à une documentation claire sur Zeroheight et Storybook, ainsi qu’une roadmap conjointe de livraison des composants.

Impact

Résultats clés
  • Interface moderne et premium, alignée sur la nouvelle identité de marque.
  • Meilleure utilisabilité grâce à une hiérarchie et une accessibilité renforcées.
  • Cycles de développement accélérés grâce au design system partagé.
  • Cohérence accrue entre les expériences issues des deux anciennes applications.
  • Designs validés auprès des utilisateurs, notamment les segments à forte valeur.
  • Après le lancement de la nouvelle app mobile, l’engagement et la rétention utilisateurs ont augmenté de 25 %.