Application mobile - architecture en 6 étapes

Wondertale a conçu une architecture de parcours utilisateur parfaitement fluide qui guide le passager de la notification de perturbation à la confirmation de réservation en quelques minutes.

Notification push - l'alerte proactive

L'expérience commence avant même que le passager n'ouvre l'application. Dès qu'un vol est perturbé (annulé, retardé significativement, changement de porte), une notification push iOS personnalisée est envoyée immédiatement au passager. La notification affiche l'icône de la compagnie aérienne (white-label), le numéro de vol et le statut actuel avec un message rassurant : "Votre vol n°{numéro} à destination de {destination} est {statut}. Nous sommes désolés..."

Cette approche proactive transforme une mauvaise nouvelle en démonstration de service attentif. Le passager n'a pas besoin de chercher l'information, elle lui arrive automatiquement, créant une première impression de prise en charge.

Écran de bienvenue - l'empathie et la solution

Lorsque le passager ouvre l'application via la notification ou manuellement, il arrive sur un écran de bienvenue personnalisé qui s'adresse à lui par son prénom : "Bonjour Magali !". Cette personnalisation humanise immédiatement l'expérience digitale.

Le message principal est empathique et orienté solution : "Votre vol a été annulé. Nous sommes désolés. Mais ne vous inquiétez pas, nous nous occupons de tout ! Réservons ensemble votre hôtel et votre moyen de transport." Cette formulation transforme le problème en prise en charge rassurante.

L'écran demande ensuite de vérifier le numéro de billet d'avion pour authentifier le passager et récupérer toutes les informations de réservation. Un champ permet également d'ajouter des accompagnants s'ils voyagent ensemble, avec un bouton "+" pour ajouter leurs numéros de billet. Cette étape élimine le besoin de ressaisir des informations que la compagnie possède déjà, accélérant drastiquement le processus.

Le design utilise l'identité visuelle de la compagnie aérienne (ici FlyACME dans certains écrans, Air Corsica dans d'autres) démontrant la capacité white-label de l'application. Le logo de la compagnie est proéminent en haut, les couleurs de marque sont appliquées aux CTAs et éléments d'interaction.

Sélection des services - la personnalisation guidée

L'écran de sélection des services présente une interface claire et structurée qui permet au passager de composer exactement ce dont il a besoin sans être submergé d'options.

En haut, un rappel des passagers concernés (noms et numéros de billet) assure la transparence. Deux options principales sont présentées avec des radio buttons clairs : "Réserver un hôtel" et "Réserver un transport". Le passager peut sélectionner un seul service ou les deux selon ses besoins.

La section Chambre(s) utilise des steppers (+ et -) pour sélectionner le nombre de chambres par type : Simple(s), Double(s), Triple(s). Cette interface est intuitive et familière, semblable aux sites de réservation d'hôtel traditionnels, réduisant la courbe d'apprentissage à zéro.

La section Services additionnels propose des options avec radio buttons : PMR (Personne à Mobilité Réduite), Repas inclus, Animaux acceptés. Ces options permettent une personnalisation fine sans complexifier l'interface principale. Chaque option est clairement labellisée et facile à comprendre.

Un grand bouton "Suivant" avec flèche en bas de l'écran invite à progresser une fois les sélections faites. Le design minimaliste avec beaucoup d'espace blanc évite toute sensation de surcharge malgré le nombre d'options disponibles.

Sélection du transport - le choix visuel

Si le passager a sélectionné "Réserver un transport", il arrive sur un écran dédié qui présente plusieurs options de transport avec photos réelles. L'interface ressemble à Uber ou aux apps de VTC, un pattern familier qui accélère la compréhension.

Chaque option de transport affiche une grande photo contextuelle (ici des taxis jaunes dans une rue ensoleillée), le nom du service ("Taxi JP Bonifacio"), le temps de trajet estimé ("~18 minutes de trajet"), et le point de rendez-vous précis ("Aéroport de Figari, Sortie 2"). Un bouton "Réserver" bleu clair permet de sélectionner l'option souhaitée.

Les options sont présentées en liste scrollable verticale, permettant de comparer facilement plusieurs prestataires. Cette approche transparente donne au passager le contrôle et le sentiment de faire un choix éclairé plutôt que de se voir imposer une solution unique.

Le design utilise des cards bien espacées pour chaque option, créant une hiérarchie visuelle claire et facilitant le scanning rapide. Les informations essentielles (nom, temps, lieu) sont immédiatement visibles sans nécessiter de clic supplémentaire.

Confirmation - la célébration et la réassurance

Une fois les sélections confirmées, l'utilisateur arrive sur un écran de confirmation festif qui célèbre la complétion du processus. Un emoji festif (🎉) en grand format crée une émotion positive et transforme une situation négative (vol annulé) en moment de soulagement (solution trouvée).

Le titre affirmatif "Votre réservation est confirmée !" rassure immédiatement. Le message explicatif "Aussi simple que ça ! Fantastique non ? Retrouvez toutes les informations concernant votre trajet directement depuis votre lien de suivi." informe sur les prochaines étapes avec un ton chaleureux et conversationnel.

Un grand bouton "Je veux voir mes informations" permet d'accéder immédiatement aux détails de la réservation. Le footer mentionne discrètement "Service fourni par FlyACME", renforçant la confiance en rappelant que c'est un service officiel de la compagnie aérienne.

L'écran est volontairement minimaliste avec beaucoup d'espace blanc, créant une respiration après les écrans de sélection plus denses. Cette approche psychologique permet au passager de "souffler" et de ressentir le soulagement de la situation résolue.

Dashboard principal - le hub d'information

Après la confirmation, le passager accède au dashboard principal qui centralise toutes les informations pertinentes. C'est l'écran qu'il consultera régulièrement pour suivre l'évolution de sa situation.

Le header personnalisé "Hello Magali Neveu !" maintient la touche humaine, accompagné du numéro de réservation et du niveau de fidélité ("Platine"), créant un sentiment de reconnaissance et d'importance.

La section "Votre trajet" présente une card détaillée du vol avec le numéro ("Vol : TX000"), le statut en temps réel avec badge coloré ("Retardé" en orange), et un bouton "Coupons" pour accéder aux avantages. Les informations de départ et destination sont présentées de manière visuelle avec un pictogramme d'avion entre les deux villes.

Les détails pratiques sont organisés en grille claire : ville de départ (Paris ORY - Paris Orly Airport) avec heure (20H00 - Jeudi 26 Février 2025), durée du vol (4h00), ville d'arrivée (Fort-de-France FDF - Martinique Aimé Césaire International Airport) avec heure (00H00 - Vendredi 27 Février 2025), nombre de bagages (2), repas (inclus), et siège (2B).

Un grand bouton "Voir le détail" permet d'accéder à des informations plus complètes sur le vol. En dessous, une section "Autres Réservations" affiche des cards compactes pour l'hôtel et le transport réservés, avec possibilité de cliquer pour voir plus de détails ou accéder à toutes les réservations via le bouton "Autres réservations" avec flèche.

Cette organisation hiérarchique présente d'abord l'information la plus importante (le vol et son statut), puis les réservations connexes, puis les actions possibles, créant un flow de lecture naturel et intuitif.

Information du vol, réservations, messagerie et coupons

Les écrans dédiés aux informations de vol, autres réservations, messagerie et coupons fournissent le niveau de détail nécessaire pour que le passager reste informé et rassuré tout au long de son parcours perturbé, comme détaillé précédemment.

Back-office web - le centre de contrôle opérationnel

Le back-office web destiné aux compagnies aériennes est le cœur névralgique du système Lelounge. Wondertale a conçu une interface desktop professionnelle permettant aux équipes opérationnelles de gérer efficacement les perturbations à grande échelle.

Architecture de navigation - la clarté opérationnelle

La sidebar de navigation présente trois sections principales sous "Opérations" : Vols avec irrégularités, Prévision des irrégularités, et Vols opérationnels. Cette hiérarchie permet aux agents de basculer rapidement entre la gestion des crises actives, l'anticipation des problèmes futurs, et la surveillance de la normalité opérationnelle.

Une section "Paramètres" donne accès aux logs système et permet la déconnexion. Le logo Air Corsica en haut de la sidebar maintient le contexte white-label, rappelant quelle compagnie utilise actuellement le système.

Vue "Vols Opérationnels" - la surveillance de la normalité

L'écran "Vols opérationnels" présente un tableau data-dense listant tous les vols se déroulant normalement. Chaque ligne affiche le numéro de vol (TX000), l'aéroport de départ (ORY), la date de départ (12/03/2025), l'heure de départ (12:30 CET), l'aéroport d'arrivée (FDF), la date d'arrivée (12/03/2025), et l'heure d'arrivée (16:30 CET).

Les colonnes sont triables (icônes de tri dans les headers) permettant aux agents de réorganiser rapidement les données selon leurs besoins. Des checkboxes à gauche de chaque ligne permettent la sélection multiple pour des actions groupées. Les boutons en haut à droite "Nouvelle irrégularité" et "Envoyer un message" permettent d'agir rapidement si une situation évolue.

Des filtres de recherche et de date (Numéro de vol, 12/03/2025) en haut permettent de réduire le scope aux vols pertinents. L'option "Classer par" offre des tris prédéfinis.

Cette vue donne aux agents une vision d'ensemble de l'activité normale, leur permettant de détecter rapidement toute anomalie émergente et d'avoir le contexte complet de l'opération quotidienne.

Vue "Prévision des Irrégularités" - l'anticipation proactive

L'écran "Prévision des irrégularités" est probablement l'innovation la plus stratégique du système. Il liste les vols susceptibles de rencontrer des problèmes basés sur des données prédictives (météo, congestion aéroportuaire, historique, patterns saisonniers).

Le tableau affiche des colonnes additionnelles cruciales : Type d'incident (Retardé, Annulé), Statut avec badge jaune "En attente" indiquant que l'incident n'est pas encore confirmé mais anticipé, et Dernier envoi montrant les actions déjà prises (Envoi demandé Ernestine, Attente validation Ernestine, Prêt à l'envoi).

Cette vue permet aux compagnies de passer d'une posture réactive à proactive. Au lieu d'attendre que le problème survienne pour agir, les agents peuvent préparer les communications, pré-réserver des hôtels et transports, et avoir une longueur d'avance. Cela réduit drastiquement le temps de réponse perçu par les passagers.

Les badges de statut "En attente" créent une urgence visuelle, attirant l'attention des agents sur les situations nécessitant une préparation. La colonne "Dernier envoi" assure la traçabilité des actions entreprises, évitant les doublons ou oublis.

Vue "Vols avec Irrégularités" - la gestion de crise

L'écran "Vols avec irrégularités" liste tous les vols actuellement perturbés nécessitant une gestion active. C'est probablement l'écran le plus consulté en situation de crise opérationnelle.

La colonne Statut utilise des badges colorés pour une reconnaissance visuelle instantanée : "Ouvert" en vert indiquant que l'incident est géré activement, "Clôturé" en rouge/rose indiquant que l'incident est résolu et archivé. Cette distinction visuelle permet aux agents de prioriser leur attention sur les incidents ouverts.

La colonne Dernier envoi affiche l'historique des communications : "12/03/2025 : Message initial", "12/03/2025 : Message de clôture", permettant aux agents de savoir exactement où en est chaque situation sans avoir à ouvrir le détail. Cette transparence est cruciale quand on gère des dizaines d'incidents simultanément.

Le bouton "Nouvelle irrégularité" permet de créer manuellement une entrée si un problème est détecté avant que le système automatique ne l'identifie. Le bouton "Envoyer un message" permet de communiquer avec les passagers affectés.

Interface d'envoi de message - la communication maîtrisée

L'écran d'envoi de message est le cœur de la communication avec les passagers. Il présente une interface structurée en trois zones principales.

La sidebar gauche affiche tous les détails du vol concerné (TX0000) : Départ initial (Aéroport de Paris Orly, 12/03/2025, 13h45 UTC), Départ final (même lieu, même date, 15h45 UTC), Arrivée initiale (Aéroport Aimé Césaire, 12/03/2025, 17h45 UTC), Arrivée finale (19h45 UTC), Enregistrement initial et final avec terminaux et guichets, et Embarquement avec horaires et porte. Cette vue exhaustive donne à l'agent tout le contexte nécessaire pour composer un message précis.

La zone centrale contient le formulaire de composition du message. En haut, trois chips indiquent l'état : numéro de vol (TX0000), bouton "Sélectionner des passagers" permettant de cibler précisément qui recevra le message, et indicateur "48 Passagers sélectionnés". Un badge "96 - RO - OPERATIONS CONTROL" identifie le code de délai utilisé.

La section "Nouveau numéro de vol" permet de communiquer un vol de remplacement (TX0032) avec bouton "Envoyer" et possibilité de programmer l'envoi (12/03/2025 à 11:20 UTC). La section "Langue" permet de sélectionner la langue du message (Français) avec bouton d'envoi.

La section "Nouvelles informations concernant le vol" est le cœur du système. Elle présente des formulaires pour Départ (Nouvelle date avec date picker, Nouvel horaire avec time picker) et Arrivée (même structure). Une section Enregistrement et Embarquement permet de mettre à jour ces détails critiques.

Un grand champ "Entrez le corps du message" permet de composer le texte libre qui sera envoyé aux passagers. En dessous, un champ "Commentaires (notes internes)" permet aux agents de laisser des notes pour leurs collègues sans que cela soit visible par les passagers.

Cette séparation entre message externe et notes internes est cruciale pour maintenir le professionnalisme tout en facilitant la collaboration interne.

Zone de logs - l'historique des interactions

La zone droite affiche les "Dernières interactions (logs)" montrant l'historique chronologique de tous les messages envoyés aux passagers pour ce vol. Chaque log affiche le timestamp, le contenu du message et le contexte.

Par exemple : "Nous vous informons que votre vol est retardé pour raisons opérationnelles. Veuillez nous excuser pour la gêne occasionnée. Message d'information - Créé le Mercredi 12 Mars 2025 à 9:43 UTC" suivi du message détaillé : "Votre voyage va se poursuivre. Nouvelle heure de départ : 16:00. Nouvelle heure d'arrivée (heure locale) : 16:00. Attention, la nouvelle date de départ est le Jeudi 13 Mars 2025, et votre nouvelle date d'arrivée est le Jeudi 13 Mars 2025. L'enregistrement ferme à 14:00. Nous sommes désolés pour la gêne occasionnée et vous souhaitons un agréable voyage."

Cette traçabilité complète permet à n'importe quel agent reprenant le dossier de comprendre immédiatement ce qui a déjà été communiqué, évitant les messages contradictoires ou redondants.

Modale de validation - la vérification finale

Avant d'envoyer un message à des dizaines de passagers, une modale de confirmation s'affiche pour éviter les erreurs. Elle pose la question "Confirmez-vous l'envoi de ce message?" avec sélecteur de langue (Français).

Le corps du message est affiché en entier pour relecture : "Votre voyage va se poursuivre. Votre nouvelle heure de départ est : 16:00, nouvelle heure d'arrivée (heure locale) est : 16:00. Attention, la nouvelle date de départ est le jeudi 27 février 2025 et la nouvelle date d'arrivée le jeudi 27 février 2025. L'enregistrement ferme jeudi 27 février 2025 14:00. Nous sommes désolés de la gêne occasionnée et vous souhaitons un agréable voyage."

Une section "Vérifiez la date et l'heure du message" affiche la date (12/03/2025) et l'heure (11:20 UTC) d'envoi programmé, avec possibilité de modifier si nécessaire.

Deux boutons permettent soit d'Annuler (rouge) soit d'Envoyer (bleu) définitivement. Cette étape de validation critique empêche les envois accidentels qui pourraient créer confusion et frustration chez les passagers.

Design system du back-office

Le design du back-office utilise une palette professionnelle avec fond blanc dominant créant clarté et focus, gris clairs pour les backgrounds de tableaux et sections, bleu Air Corsica pour les boutons d'action primaires et éléments de navigation active, badges colorés (vert pour "Ouvert", rouge/rose pour "Clôturé", jaune pour "En attente") pour identification visuelle rapide, et rouge pour les actions destructives (Annuler, Clôturer).

La typographie est claire et hiérarchisée avec titres de section en gras et taille confortable, corps de texte lisible même en sessions prolongées, et labels de colonnes en gris moyen distinguant headers et contenu. Les espacements sont généreux pour réduire la fatigue visuelle lors d'utilisation intensive, avec tableaux aérés évitant la sensation d'entassement, et margins cohérentes créant un rythme visuel régulier.

Les interactions sont optimisées pour l'efficacité avec hover states sur toutes les lignes de tableau, tri des colonnes en un clic, filtres et recherche en temps réel, et raccourcis clavier probables pour les actions fréquentes (bien que non visibles dans les captures).

Résultats & Impact

Transformation de l'expérience de perturbation

Lelounge transforme radicalement ce qui était traditionnellement une expérience négative (vol perturbé, stress, incertitude, heures perdues à chercher des solutions) en expérience fluide et prise en charge. Le passager passe de la notification de perturbation à la réservation confirmée en moins de 5 minutes, contre plusieurs heures avec les processus traditionnels.

Autonomie opérationnelle pour les compagnies

Le back-office donne aux compagnies aériennes un contrôle total sur la gestion des crises sans dépendre de prestataires externes. Les agents peuvent anticiper, communiquer et résoudre les problèmes depuis une interface unique, réduisant drastiquement les délais de réaction et améliorant la satisfaction client.

Passage de réactif à proactif

La fonction "Prévision des irrégularités" est un game-changer. Elle permet aux compagnies de préparer les solutions avant que le problème ne survienne, créant une perception de service exceptionnel chez les passagers qui reçoivent des solutions avant même de réaliser qu'il y a un problème.

Réduction du stress et augmentation de la satisfaction

En prenant en charge proactivement le problème et en fournissant une solution immédiate, les compagnies aériennes transforment un moment de frustration en démonstration de service client exceptionnel. Cette approche peut potentiellement transformer un détracteur (passager mécontent) en promoteur (passager impressionné par la qualité du service).

Scalabilité white-label

La capacité white-label permet à Lelounge de s'adresser à l'ensemble du marché des compagnies aériennes sans développement custom pour chaque client. Une même plateforme technique peut servir Air France, Lufthansa, Emirates, etc., chacune avec son branding propre, accélérant considérablement le déploiement et réduisant les coûts.

Méthodologie de conception

Wondertale a appliqué une approche holistique en concevant simultanément l'application mobile et le back-office web pour assurer la cohérence du système global. La phase de recherche a impliqué des interviews avec des voyageurs fréquents pour comprendre leurs expériences de perturbations et des échanges avec les équipes opérationnelles des compagnies aériennes pour identifier les pain points de gestion de crise.

Le mapping des parcours utilisateurs a couvert tous les scénarios possibles côté passagers (vol annulé, retardé, changement d'appareil, passager seul vs groupe, avec ou sans besoins spéciaux) et côté compagnies (gestion d'un incident isolé vs crise massive, communication de masse vs individuelle, anticipation vs réaction).

Le wireframing dans Figma a validé les flows et l'architecture d'information avant le design visuel. Le système de design white-label a créé une structure flexible permettant l'intégration de différentes identités de marque sans compromettre l'UX. Le prototypage interactif haute-fidélité dans Figma a permis des tests avec des stakeholders réels.

La collaboration avec le client s'est effectuée principalement via WhatsApp, permettant des échanges rapides, du partage de prototypes pour feedback immédiat, et des itérations agiles sans la lourdeur des emails ou réunions formelles. Cette approche moderne et flexible s'est parfaitement adaptée au rythme d'une startup.

Technologies utilisées

Le design complet a été réalisé dans Figma, incluant les maquettes mobile (iOS et Android), les maquettes desktop du back-office (1920px), le système de design avec composants réutilisables, les prototypes interactifs pour validation, et les specs de design pour l'équipe de développement.

La communication client via WhatsApp a permis des échanges fluides avec partage de liens Figma pour review, feedback en temps réel avec screenshots annotés, validation rapide des itérations, et collaboration asynchrone efficace malgré des emplois du temps chargés.

Wondertale a livré un package design complet comprenant tous les écrans mobile en résolution native, tous les écrans desktop du back-office, le design system documenté (couleurs, typographies, composants, spacings), les assets exportés (icônes, illustrations, logos), et les prototypes cliquables pour démonstration aux investisseurs et utilisateurs tests.

Pourquoi ce projet est emblématique

Lelounge illustre parfaitement la capacité de Wondertale à concevoir des systèmes complexes avec multiples stakeholders (passagers, compagnies aériennes, hôtels, transporteurs, agents opérationnels) tout en maintenant une expérience utilisateur simple et élégante pour chaque persona. Le projet démontre également l'expertise en design white-label, permettant une scalabilité business tout en maintenant l'excellence du design.

La conception simultanée de l'application mobile orientée consommateur et du back-office web orienté opérations prouve la capacité de Wondertale à penser l'expérience de bout en bout, pas juste l'interface visible par l'utilisateur final. Cette vision systémique est ce qui différencie un bon design d'interface d'un excellent design de produit.

La transformation d'un moment négatif (perturbation de vol) en opportunité de démontrer un service exceptionnel était un défi UX fascinant. Chaque détail, de la notification empathique aux coupons à valeur ajoutée côté passager, et de l'anticipation prédictive à la traçabilité complète côté compagnie, contribue à transformer la frustration en satisfaction.

Besoin d'une solution design complète pour un produit multi-facettes ?

Réservez votre consultation gratuite avec Wondertale pour transformer votre vision produit en système cohérent qui enchante vos utilisateurs finaux et autonomise vos équipes opérationnelles, le tout livré en design haute-fidélité prêt pour le développement.