Case StudyÉtude de cas·Skyjetz (UX Design Institute brief)·2022·9 min read9 min de lecture
Booking is where airlines lose people. I designed the part everyone hates.C'est à la réservation que les compagnies perdent leurs clients. J'ai conçu l'étape que tout le monde déteste.
A complete UX process for a fictional airline, research to annotated handoff. Research named where booking turns hostile, the seat picker answers it.Un processus UX complet pour une compagnie aérienne fictive, de la recherche au transfert annoté. La réservation devient hostile, le choix du siège répond.
Most airline booking flows are where good intentions go to die.
Too many steps. Hidden mandatory costs. A seat-selection screen that feels built to confuse you into paying more. Users know it, and the research confirmed it: the most painful part of booking a flight isn't searching or paying, it's the stretch in the middle where you pick a flight and get funnelled through options you didn't ask for.
Skyjetz is a fictional start-up airline. The brief was to design its booking experience end to end, grounded in real user research. I took it as the chance to run the complete process without the compromises a live commercial timeline usually forces: benchmarking, survey, user testing, synthesis, flow design, prototyping, and a full annotated handoff, on one project. Fifteen years into the work, I rarely get to do every stage properly. This was that project.
This case study is built the way the work was: research first, decisions second, design third. The seat-selection microapp at the end isn't a separate showpiece. It's the proof that the research paid off, the answer to the exact pain the journey map identified.
A note on scope. The baseline booking flow was provided by the UX Design Institute. The research, the synthesis, the interaction design, the edge and error states, and the handoff are mine. This was a UX project, so the deliverable is mid-fidelity annotated wireframes and a clickable prototype, the flow, the states, and the interaction logic, not the visual design layer.
La plupart des parcours de réservation aérienne sont l'endroit où les bonnes intentions meurent.
Trop d'étapes. Des coûts obligatoires cachés. Un écran de sélection de siège qui semble fait pour vous pousser à payer plus. Les utilisateurs le savent, et la recherche l'a confirmé : l'étape la plus pénible n'est ni la recherche ni le paiement, c'est le passage du milieu, où l'on choisit un vol avant d'être canalisé vers des options qu'on n'a pas demandées.
Skyjetz est une compagnie aérienne fictive en phase de lancement. Le brief consistait à concevoir son expérience de réservation de bout en bout, fondée sur une vraie recherche utilisateur. Je l'ai pris comme l'occasion de dérouler le processus complet sans les compromis qu'impose un calendrier commercial : benchmark, sondage, tests utilisateurs, synthèse, conception de flux, prototypage, et un transfert annoté complet, sur un seul projet. Après quinze ans de métier, j'ai rarement l'occasion de mener chaque étape correctement. Ce projet l'a permis.
Cette étude de cas est construite comme le travail l'a été : la recherche d'abord, les décisions ensuite, le design en troisième. Le microapp de sélection de siège, à la fin, n'est pas un showpiece séparé. C'est la preuve que la recherche a payé, la réponse à la douleur exacte que la carte de parcours a identifiée.
Une note sur le périmètre. Le flux de réservation de base a été fourni par le UX Design Institute. La recherche, la synthèse, le design d'interaction, les cas limites et états d'erreur, et le transfert sont les miens. C'était un projet UX : le livrable, ce sont des wireframes annotés en moyenne fidélité et un prototype cliquable, le flux, les états et la logique d'interaction, pas la couche de design visuel.
The researchLa recherche
Before designing anything, I needed to know where booking actually breaks. I ran three research methods and triangulated them.
Competitive benchmarking. I compared the booking usability of several best-in-class airlines, Air France, Air Canada, Norwegian, plus Google Flights as a wild card, across three areas: homepage, search and flight selection, and details and payment. The goal was to learn the conventions worth following and spot the bad patterns worth fixing.
An online survey. Quantitative and qualitative, to understand goals, behaviour, and pain. The findings that shaped the project: a clear majority booked on desktop rather than mobile, which set my primary focus to the desktop experience; 50% prioritised dates over price; and, most importantly, respondents named added options, seat selection and baggage, as the single most painful, least transparent part of booking. In their words: too many steps before checkout, and prices that hide mandatory costs until late.
User testing and depth interviews. Three sessions I ran (two remote, one in person) plus two recorded sessions I reviewed in detail, across four airlines. The recurring findings: information overload, features that confuse without explanation, uncertainty about whether a price covered one passenger or several, and a booking process that was simply hard to follow.
Three methods, one consistent signal. The next job was to turn a pile of findings into a direction.
Avant de concevoir quoi que ce soit, je devais savoir où la réservation casse réellement. J'ai mené trois méthodes de recherche et je les ai triangulées.
Benchmark concurrentiel. J'ai comparé l'utilisabilité de la réservation de plusieurs compagnies de référence, Air France, Air Canada, Norwegian, plus Google Flights en joker, sur trois zones : page d'accueil, recherche et sélection de vol, détails et paiement. Le but : identifier les conventions à suivre et repérer les mauvais schémas à corriger.
Un sondage en ligne. Quantitatif et qualitatif, pour comprendre objectifs, comportements et douleurs. Les résultats qui ont façonné le projet : une nette majorité réservait sur ordinateur plutôt que sur mobile, ce qui a fixé mon focus principal sur le desktop ; 50% priorisaient les dates sur le prix ; et surtout, les répondants désignaient les options ajoutées, choix du siège et bagages, comme la partie la plus pénible et la moins transparente. Dans leurs mots : trop d'étapes avant le paiement, et des prix qui cachent les coûts obligatoires jusqu'au dernier moment.
Tests utilisateurs et entretiens approfondis. Trois sessions menées par moi (deux à distance, une en présentiel) plus deux sessions enregistrées analysées en détail, sur quatre compagnies. Les constats récurrents : surcharge d'information, fonctionnalités qui déroutent sans explication, incertitude sur le fait qu'un prix couvre un ou plusieurs passagers, et un processus tout simplement difficile à suivre.
Trois méthodes, un signal cohérent. Le travail suivant : transformer un tas de constats en une direction.
Affinity diagram clustering research findings into booking-flow stages, a working artifact Diagramme d'affinité regroupant les constats de recherche par étapes du flux de réservation, un artefact de travailView full affinity diagramVoir le diagramme d'affinité complet
The synthesisLa synthèse
Raw research isn't a direction. A list of findings is a list of findings until something forces a decision out of it.
I clustered every observation onto individual notes and grouped them by triangulation, first into the stages of the booking flow (search form, results, flight selection, upsell, checkout), then into finer subgroups like the date picker and the flight card. Sequencing those clusters in booking order turned directly into a customer journey map, with goals, behaviours, positive moments, and pain points at each step, quotes from the usability tests pinned where they landed.
The journey map confirmed the spine of the whole project. Across every stage, one zone stood out as the most painful by a clear margin: search results, flight selection, and the upsell. The upsell in particular was described as unnecessary and annoying, the place where users felt the booking turn against them.
That synthesis is what gave me a focus instead of a wishlist. The design effort would concentrate where the pain was densest, the middle of the flow, and treat the upsell not as a revenue add-on to tolerate, but as the hardest UX problem to solve honestly. Every design decision after this point traces back to that one conclusion.
La recherche brute n'est pas une direction. Une liste de constats reste une liste de constats jusqu'à ce que quelque chose en fasse sortir une décision.
J'ai regroupé chaque observation sur des notes individuelles, par triangulation, d'abord selon les étapes du flux de réservation (formulaire de recherche, résultats, sélection de vol, upsell, paiement), puis en sous-groupes plus fins comme le sélecteur de dates et la carte de vol. Ordonner ces groupes dans l'ordre de réservation s'est traduit directement en une carte de parcours client, avec objectifs, comportements, moments positifs et points de douleur à chaque étape, les citations des tests épinglées là où elles tombaient.
La carte de parcours a confirmé la colonne vertébrale du projet. À chaque étape, une zone ressortait comme la plus pénible, et de loin : résultats de recherche, sélection de vol et upsell. L'upsell en particulier était décrit comme inutile et agaçant, l'endroit où les utilisateurs sentaient la réservation se retourner contre eux.
Cette synthèse m'a donné un focus plutôt qu'une liste de souhaits. L'effort de conception se concentrerait là où la douleur était la plus dense, le milieu du flux, et traiterait l'upsell non comme un ajout de revenu à tolérer, mais comme le problème UX le plus difficile à résoudre honnêtement. Chaque décision de design après ce point remonte à cette seule conclusion.
STAGEÉTAPE 01
From findings to a focusDes constats à un focus
The problemLe problème
Raw research isn't a direction. Three methods produced a mountain of findings, and a mountain of findings is not a design brief. Something had to force a decision out of it.La recherche brute n'est pas une direction. Trois méthodes ont produit une montagne de constats, et une montagne de constats n'est pas un brief de conception. Il fallait que quelque chose en fasse sortir une décision.
The methodLa méthode
I structured everything through triangulation into an affinity diagram, then sequenced the clusters in booking order to build a customer journey map, goals, behaviours, positive moments, and pain points at every step, with usability-test quotes pinned where they belonged.J'ai tout structuré par triangulation dans un diagramme d'affinité, puis ordonné les groupes dans l'ordre de réservation pour bâtir une carte de parcours client, objectifs, comportements, moments positifs et points de douleur à chaque étape, avec les citations des tests épinglées à leur place.
I ownJe maîtrise
The synthesis call. Reading the clustered data and the journey map and naming the one zone that mattered most, rather than spreading the design effort thin across everything users mentioned.La décision de synthèse. Lire les données regroupées et la carte de parcours, et nommer la seule zone qui comptait le plus, plutôt que d'éparpiller l'effort de conception sur tout ce que les utilisateurs ont mentionné.
The resultLe résultat
A single, defensible focus, search, flight selection, and the upsell, identified as the most painful zone by a clear margin. A focus, not a wishlist. Every later decision traces back to it.Un focus unique et défendable, recherche, sélection de vol et upsell, identifié comme la zone la plus pénible, et de loin. Un focus, pas une liste de souhaits. Chaque décision ultérieure y remonte.
Customer journey map identifying search and selection as the most painful zone, a working artifactCarte de parcours client identifiant la recherche et la sélection comme la zone la plus pénible, un artefact de travail
STAGEÉTAPE 02
A flow you can always locate yourself inUn parcours où l'on peut toujours se situer
The problemLe problème
Booking is multi-step by nature. Users get lost, lose confidence, and abandon when they can't tell how far through they are or what's coming next.La réservation est multi-étapes par nature. Les utilisateurs se perdent, perdent confiance et abandonnent quand ils ne savent pas où ils en sont ni ce qui vient ensuite.
The methodLa méthode
From the journey map I built the flow diagram, then designed the booking flow around a persistent progress indicator anchored below the header, showing completed steps, the current step, and what remains, across all eight stages from search to confirmation. Every screen keeps the user oriented.À partir de la carte de parcours, j'ai construit le diagramme de flux, puis conçu la réservation autour d'un indicateur de progression persistant ancré sous l'en-tête, montrant les étapes terminées, l'étape en cours et ce qu'il reste, sur les huit étapes, de la recherche à la confirmation. Chaque écran garde l'utilisateur orienté.
I ownJe maîtrise
The flow architecture and the decision to make progress legible at every step. The eight-stage structure and the branching within it, guest versus login, no-flights recovery.L'architecture du flux et le choix de rendre la progression lisible à chaque étape. La structure en huit étapes et ses embranchements, invité ou connexion, récupération en l'absence de vol.
The resultLe résultat
A linear flow with no dead ends, where the user always knows where they are and what's left. Orientation designed in, not bolted on, and traceable straight back to the journey map.Un parcours linéaire sans impasse, où l'utilisateur sait toujours où il est et ce qu'il reste. L'orientation conçue dès le départ, et traçable directement jusqu'à la carte de parcours.
Booking flow diagram, eight stages with guest/login and no-flights branchesDiagramme du flux de réservation, huit étapes avec embranchements invité/connexion et absence de vol
STAGEÉTAPE 03
A payment form that catches errors before the bank doesUn formulaire de paiement qui detecte les erreurs avant la banque
The problemLe problème
Payment is where abandonment is most expensive. A form that rejects input late, or unclearly, loses the booking at the last metre.Le paiement est l'endroit où l'abandon coûte le plus cher. Un formulaire qui rejette une saisie trop tard, ou sans clarté, perd la réservation au dernier mètre.
The methodLa méthode
I specified the payment form down to interaction detail for developer handoff. Card number restricted to digits, chunked in groups of four with spaces, validated on blur with specific error copy, and card-type detection that floats the issuer logo into the field after the first digits. Expiry auto-appends the slash between MM and YY. CVC is masked with a contextual tooltip showing where to find it. The Pay CTA stays disabled until every field validates and terms are accepted.J'ai spécifié le formulaire de paiement jusqu'au détail d'interaction pour le transfert. Numéro de carte limité aux chiffres, regroupés par quatre avec espaces, validé au blur avec messages d'erreur précis, et détection du type de carte qui fait apparaître le logo de l'émetteur dans le champ après les premiers chiffres. La date d'expiration ajoute automatiquement le slash entre MM et AA. Le CVC est masqué avec une infobulle contextuelle. Le bouton Payer reste désactivé tant que tous les champs ne sont pas validés et les conditions acceptées.
I ownJe maîtrise
Every validation rule, error message, input constraint, and the timing of when feedback appears. The connective tissue most flows leave to chance.Chaque regle de validation, message d'erreur, contrainte de saisie, et le moment ou le retour apparait. Le tissu conjonctif que la plupart des flux laissent au hasard.
The resultLe résultat
A form documented so completely a developer could build it without a single guess, and a user gets corrected gently, in place, before anything fails.
See full specs handoff document hereUn formulaire documenté si complètement qu'un développeur pourrait le construire sans une seule supposition, et un utilisateur corrigé en douceur, sur place, avant tout échec.
See full specs handoff document here
Annotated payment form specification with validation rules and error statesSpécification annotée du formulaire de paiement avec règles de validation et états d'erreur
STAGEÉTAPE 04
Designing for the moment it goes wrongConcevoir pour le moment où ça tourne mal
The problemLe problème
Most flows design the happy path and forget that payments fail, flights sell out, and servers stall. That's exactly when a user is most likely to leave for good.La plupart des flux conçoivent le chemin idéal et oublient que les paiements échouent, que les vols se remplissent, que les serveurs ralentissent. C'est précisément là qu'un utilisateur risque le plus de partir pour de bon.
The methodLa méthode
I designed the failure and edge states as first-class screens. Payment unsuccessful leads with reassurance (Don't worry, no money was debited from your account) and re-presents the form for an immediate retry. No flights available offers an adjacent-date selector instead of a dead end. Processing states cover the gaps while search and payment resolve.J'ai conçu les états d'échec et les cas limites comme des écrans à part entière. Paiement échoué : on rassure d'abord (Pas d'inquiétude, aucun montant n'a été débité), puis on représente le formulaire pour une nouvelle tentative. Aucun vol disponible : un sélecteur de dates adjacentes plutôt qu'une impasse. Des écrans de traitement couvrent les temps d'attente pendant que la recherche et le paiement se résolvent.
I ownJe maîtrise
The decision to treat error recovery as a designed experience, the reassurance copy, the recovery path, the choice never to leave a user stranded.Le choix de traiter la récupération d'erreur comme une expérience conçue, le texte rassurant, le chemin de récupération, la décision de ne jamais laisser un utilisateur bloqué.
The resultLe résultat
A flow that holds together when things break, which is the only time a booking experience is really tested.
See full specs handoff document hereUn parcours qui tient quand les choses cassent, le seul moment où une expérience de réservation est vraiment mise à l'épreuve.
See full specs handoff document here
Payment unsuccessful screen with reassurance copy and recovery pathÉcran de paiement échoué avec message rassurant et chemin de récupération
The upsell, made honestL'upsell, rendu honnête
Skyjetz (UX Design Institute brief) · 2022
The research had named the villain: the upsell. Seat selection specifically, the moment users said the booking stopped feeling honest. So the seat picker became the part of the project I most wanted to get right, because solving it meant solving the thing the journey map flagged as worst.
The answer was a self-contained seat-selection microapp, launched from the travel-extras step. Not another page in the chain. A focused module with its own internal logic, designed to make the most resented part of booking the most transparent.
Here is what it actually had to handle. Two passengers, two legs of a round trip, four independent seat decisions. Each passenger has their own selection track with three states: no seat selected, actively choosing, and seat confirmed. Click Select and the button becomes Cancel while a pick-a-seat prompt and the seat map both highlight, the interface tells you it's your turn to act. Pick a seat and the state flips again: the button becomes Change, and a release-seat control returns the passenger to the default. One passenger can be fully booked while the other still reads no seat selected, and the flow handles that partial state without complaint. The same workflow repeats for the return leg in its own tab.
Three fare tiers, Extra Legroom, Economy Comfort, Economy Standard, are stated openly in the panel, with the price visible at every step. The anchored bar shows the running total for all passengers, updating live as seats are added (664 euros, then 679.99, then 727.96). The flight-details sidebar itemises every charge by passenger and by leg. Nothing is hidden until checkout. Nothing is a surprise.
That is the research paying off. The journey map said seat selection is where booking feels deceptive. So I designed the version where the price is never hidden, the state is always clear, and the user is never tricked into anything. The upsell, made honest, because the research told me exactly which moment to make honest.
La recherche avait nommé le coupable : l'upsell. La sélection de siège en particulier, le moment où, selon les utilisateurs, la réservation cessait de sembler honnête. Le choix du siège est donc devenu la partie du projet que je voulais le plus réussir, car la résoudre, c'était résoudre ce que la carte de parcours désignait comme le pire.
La réponse : un microapp de sélection de siège autonome, lancé depuis l'étape des options. Pas une page de plus dans la chaîne. Un module ciblé avec sa propre logique interne, conçu pour rendre la partie la plus mal aimée de la réservation la plus transparente.
Voici ce qu'il devait gérer. Deux passagers, deux tronçons d'un aller-retour, quatre décisions de siège indépendantes. Chaque passager a sa propre piste de sélection avec trois états : aucun siège sélectionné, sélection en cours, siège confirmé. On clique sur Sélectionner et le bouton devient Annuler tandis qu'une invite choisir un siège et le plan de cabine se mettent en évidence, l'interface signale que c'est à vous d'agir. On choisit un siège et l'état bascule : le bouton devient Modifier, et un contrôle libérer le siège ramène le passager au défaut. Un passager peut être entièrement réservé pendant que l'autre affiche encore aucun siège sélectionné, et le flux gère cet état partiel sans broncher. Le même processus se répète pour le tronçon retour dans son propre onglet.
Trois catégories tarifaires, Espace jambes accru, Économie confort, Économie standard, sont affichées ouvertement dans le panneau, le prix visible à chaque étape. La barre ancrée montre le total courant pour tous les passagers, mis à jour en direct (664 euros, puis 679,99, puis 727,96). La barre latérale détaille chaque frais par passager et par tronçon. Rien n'est caché jusqu'au paiement. Rien n'est une surprise.
C'est la recherche qui paie. La carte de parcours disait que la sélection de siège est l'endroit où la réservation semble trompeuse. J'ai donc conçu la version où le prix n'est jamais caché, l'état toujours clair, et l'utilisateur jamais piégé. L'upsell, rendu honnête, parce que la recherche m'a dit exactement quel moment rendre honnête.
Seat microapp in selecting state, button switched to Cancel and seat map highlightedMicroapp de siège en état de sélection, bouton passé à Annuler et plan de cabine mis en évidenceSeat microapp with one passenger seated and one still unselected, sidebar reflecting partial stateMicroapp de siège avec un passager placé et un autre non sélectionné, barre latérale reflétant l'état partielSeat microapp with seats confirmed for both passengers across both legs, running total updatedMicroapp de siège avec sièges confirmés pour les deux passagers sur les deux tronçons, total mis à jour
What it deliveredCe que ça a livré
A complete process, start to finishUn processus complet, du début à la fin
Benchmarking, survey, user testing, affinity diagram, journey map, flow design, prototype, and annotated developer handoff. Every stage of the UX process, run properly on one project.Benchmark, sondage, tests utilisateurs, diagramme d'affinité, carte de parcours, conception de flux, prototype et transfert développeur annoté. Chaque étape du processus UX, menée correctement sur un seul projet.
Synthesis that picked the battleUne synthèse qui a choisi le combat
The decision to focus on search, selection, and the upsell wasn't a hunch. The affinity diagram and journey map identified it as the most painful zone, and naming that focus is the call every later decision rests on.Le choix de se concentrer sur la recherche, la sélection et l'upsell n'était pas une intuition. Le diagramme d'affinité et la carte de parcours l'ont identifié comme la zone la plus pénible, et nommer ce focus est la décision sur laquelle reposent toutes les suivantes.
The upsell, made honestL'upsell, rendu honnête
The seat microapp turned the most resented part of booking into the most transparent. Open pricing, clear state, a live running total, and no hidden costs, a direct answer to the journey-map finding.Le microapp de siège a transformé la partie la plus mal aimée de la réservation en la plus transparente. Tarifs affichés, état clair, total courant en direct, aucun coût caché, une réponse directe au constat de la carte de parcours.
A handoff with no guessworkUn transfert sans devinette
Every page, component, screen state, error message, and interaction documented for engineering. The kind of handoff that gets built as designed.Chaque page, composant, état d'écran, message d'erreur et interaction documentés pour l'ingénierie. Le genre de transfert qui se construit tel qu'il a été conçu.
The annotated wireframe handoff, every screen, state, and interaction documentedLe transfert en wireframes annotés, chaque écran, état et interaction documenté
This was an academic brief with a fictional client, and I'm clear about that. But the chain behind it, research to synthesis to a single focusing decision to design, is the one I run on real products, and the seat microapp is the kind of interaction problem, multi-state, multi-passenger, commercially loaded, that separates arranging screens from designing systems. If you're building a flow where the hard part is making a complicated, money-touching moment feel honest, that's the work I do.C'était un brief académique avec un client fictif, et je l'assume. Mais la chaîne derrière, recherche, synthèse, une seule décision de focalisation, puis design, est celle que je mène sur de vrais produits, et le microapp de siège est le type de problème d'interaction, multi-états, multi-passagers, à enjeu commercial, qui distingue l'agencement d'écrans de la conception de systèmes. Si vous construisez un parcours dont la difficulté est de rendre honnête un moment compliqué qui touche à l'argent, c'est le travail que je fais.
