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. The research named where booking turns hostile. The seat picker is where the answer landed.Un processus UX complet pour une compagnie aérienne fictive, de la recherche au transfert annoté. La recherche a désigné où la réservation devient hostile. Le choix du siège est là où la réponse a pris forme.
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 reservation aerienne sont l'endroit ou les bonnes intentions meurent.
Trop d'etapes. Des couts obligatoires caches. Un ecran de selection de siege qui semble fait pour vous pousser a payer plus. Les utilisateurs le savent, et la recherche l'a confirme : l'etape la plus penible n'est ni la recherche ni le paiement, c'est le passage du milieu, ou l'on choisit un vol avant d'etre canalise vers des options qu'on n'a pas demandees.
Skyjetz est une compagnie aerienne fictive en phase de lancement. Le brief consistait a concevoir son experience de reservation de bout en bout, fondee sur une vraie recherche utilisateur. Je l'ai pris comme l'occasion de derouler le processus complet sans les compromis qu'impose un calendrier commercial : benchmark, sondage, tests utilisateurs, synthese, conception de flux, prototypage, et un transfert annote complet, sur un seul projet. Apres quinze ans de metier, j'ai rarement l'occasion de mener chaque etape correctement. Ce projet l'a permis.
Cette etude de cas est construite comme le travail l'a ete : la recherche d'abord, les decisions ensuite, le design en troisieme. Le microapp de selection de siege, a la fin, n'est pas un showpiece separe. C'est la preuve que la recherche a paye, la reponse a la douleur exacte que la carte de parcours a identifiee.
Une note sur le perimetre. Le flux de reservation de base a ete fourni par le UX Design Institute. La recherche, la synthese, le design d'interaction, les cas limites et etats d'erreur, et le transfert sont les miens. C'etait un projet UX : le livrable, ce sont des wireframes annotes en moyenne fidelite et un prototype cliquable, le flux, les etats et la logique d'interaction, pas la couche de design visuel.
The org realityLa réalité de l'organisation
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 ou la reservation casse reellement. J'ai mene trois methodes de recherche et je les ai triangulees.
Benchmark concurrentiel. J'ai compare l'utilisabilite de la reservation de plusieurs compagnies de reference, Air France, Air Canada, Norwegian, plus Google Flights en joker, sur trois zones : page d'accueil, recherche et selection de vol, details et paiement. Le but : identifier les conventions a suivre et reperer les mauvais schemas a corriger.
Un sondage en ligne. Quantitatif et qualitatif, pour comprendre objectifs, comportements et douleurs. Les resultats qui ont faconne le projet : une nette majorite reservait sur ordinateur plutot que sur mobile, ce qui a fixe mon focus principal sur le desktop ; 50% priorisaient les dates sur le prix ; et surtout, les repondants designaient les options ajoutees, choix du siege et bagages, comme la partie la plus penible et la moins transparente. Dans leurs mots : trop d'etapes avant le paiement, et des prix qui cachent les couts obligatoires jusqu'au dernier moment.
Tests utilisateurs et entretiens approfondis. Trois sessions menees par moi (deux a distance, une en presentiel) plus deux sessions enregistrees analysees en detail, sur quatre compagnies. Les constats recurrents : surcharge d'information, fonctionnalites qui deroutent sans explication, incertitude sur le fait qu'un prix couvre un ou plusieurs passagers, et un processus tout simplement difficile a suivre.
Trois methodes, un signal coherent. 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'affinite regroupant les constats de recherche par etapes du flux de reservation, un artefact de travailView full affinity diagramVoir le diagramme d'affinité complet
The diagnosisLe diagnostic
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'a ce que quelque chose en fasse sortir une decision.
J'ai regroupe chaque observation sur des notes individuelles, par triangulation, d'abord selon les etapes du flux de reservation (formulaire de recherche, resultats, selection de vol, upsell, paiement), puis en sous-groupes plus fins comme le selecteur de dates et la carte de vol. Ordonner ces groupes dans l'ordre de reservation s'est traduit directement en une carte de parcours client, avec objectifs, comportements, moments positifs et points de douleur a chaque etape, les citations des tests epinglees la ou elles tombaient.
La carte de parcours a confirme la colonne vertebrale du projet. A chaque etape, une zone ressortait comme la plus penible, et de loin : resultats de recherche, selection de vol et upsell. L'upsell en particulier etait decrit comme inutile et agacant, l'endroit ou les utilisateurs sentaient la reservation se retourner contre eux.
Cette synthese m'a donne un focus plutot qu'une liste de souhaits. L'effort de conception se concentrerait la ou la douleur etait la plus dense, le milieu du flux, et traiterait l'upsell non comme un ajout de revenu a tolerer, mais comme le probleme UX le plus difficile a resoudre honnetement. Chaque decision de design apres ce point remonte a cette seule conclusion.
STAGEÉTAPE 01
From findings to a focusDes constats a 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 methodes 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 decision.
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 structure par triangulation dans un diagramme d'affinite, puis ordonne les groupes dans l'ordre de reservation pour batir une carte de parcours client, objectifs, comportements, moments positifs et points de douleur a chaque etape, avec les citations des tests epinglees a 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 decision de synthese. Lire les donnees regroupees et la carte de parcours, et nommer la seule zone qui comptait le plus, plutot que d'eparpiller l'effort de conception sur tout ce que les utilisateurs ont mentionne.
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 defendable, recherche, selection de vol et upsell, identifie comme la zone la plus penible, et de loin. Un focus, pas une liste de souhaits. Chaque decision ulterieure 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 selection comme la zone la plus penible, un artefact de travail
STAGEÉTAPE 02
A flow you can always locate yourself inUn parcours ou 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 reservation est multi-etapes par nature. Les utilisateurs se perdent, perdent confiance et abandonnent quand ils ne savent pas ou 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.A partir de la carte de parcours, j'ai construit le diagramme de flux, puis concu la reservation autour d'un indicateur de progression persistant ancre sous l'en-tete, montrant les etapes terminees, l'etape en cours et ce qu'il reste, sur les huit etapes, de la recherche a la confirmation. Chaque ecran garde l'utilisateur oriente.
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 a chaque etape. La structure en huit etapes et ses embranchements, invite ou connexion, recuperation 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 lineaire sans impasse, ou l'utilisateur sait toujours ou il est et ce qu'il reste. L'orientation concue des le depart, et tracable directement jusqu'a la carte de parcours.
Booking flow diagram, eight stages with guest/login and no-flights branchesDiagramme du flux de reservation, huit etapes avec embranchements invite/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 ou l'abandon coute le plus cher. Un formulaire qui rejette une saisie trop tard, ou sans clarte, perd la reservation au dernier metre.
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 specifie le formulaire de paiement jusqu'au detail d'interaction pour le transfert. Numero de carte limite aux chiffres, regroupes par quatre avec espaces, valide au blur avec messages d'erreur precis, et detection du type de carte qui fait apparaitre le logo de l'emetteur dans le champ apres les premiers chiffres. La date d'expiration ajoute automatiquement le slash entre MM et AA. Le CVC est masque avec une infobulle contextuelle. Le bouton Payer reste desactive tant que tous les champs ne sont pas valides et les conditions acceptees.
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 documente si completement qu'un developpeur pourrait le construire sans une seule supposition, et un utilisateur corrige en douceur, sur place, avant tout echec.
See full specs handoff document here
Annotated payment form specification with validation rules and error statesSpecification annotee du formulaire de paiement avec regles de validation et etats d'erreur
STAGEÉTAPE 04
Designing for the moment it goes wrongConcevoir pour le moment ou ca 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 concoivent le chemin ideal et oublient que les paiements echouent, que les vols se remplissent, que les serveurs ralentissent. C'est precisement la 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 concu les etats d'echec et les cas limites comme des ecrans a part entiere. Paiement echoue : on rassure d'abord (Pas d'inquietude, aucun montant n'a ete debite), puis on represente le formulaire pour une nouvelle tentative. Aucun vol disponible : un selecteur de dates adjacentes plutot qu'une impasse. Des ecrans de traitement couvrent les temps d'attente pendant que la recherche et le paiement se resolvent.
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 recuperation d'erreur comme une experience concue, le texte rassurant, le chemin de recuperation, la decision de ne jamais laisser un utilisateur bloque.
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 ou une experience de reservation est vraiment mise a l'epreuve.
Payment unsuccessful screen with reassurance copy and recovery pathEcran de paiement echoue avec message rassurant et chemin de recuperation
When the research changed everythingQuand la recherche a tout changé
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 nomme le coupable : l'upsell. La selection de siege en particulier, le moment ou, selon les utilisateurs, la reservation cessait de sembler honnete. Le choix du siege est donc devenu la partie du projet que je voulais le plus reussir, car la resoudre, c'etait resoudre ce que la carte de parcours designait comme le pire.
La reponse : un microapp de selection de siege autonome, lance depuis l'etape des options. Pas une page de plus dans la chaine. Un module cible avec sa propre logique interne, concu pour rendre la partie la plus mal aimee de la reservation la plus transparente.
Voici ce qu'il devait gerer. Deux passagers, deux troncons d'un aller-retour, quatre decisions de siege independantes. Chaque passager a sa propre piste de selection avec trois etats : aucun siege selectionne, selection en cours, siege confirme. On clique sur Selectionner et le bouton devient Annuler tandis qu'une invite choisir un siege et le plan de cabine se mettent en evidence, l'interface signale que c'est a vous d'agir. On choisit un siege et l'etat bascule : le bouton devient Modifier, et un controle liberer le siege ramene le passager au defaut. Un passager peut etre entierement reserve pendant que l'autre affiche encore aucun siege selectionne, et le flux gere cet etat partiel sans broncher. Le meme processus se repete pour le troncon retour dans son propre onglet.
Trois categories tarifaires, Espace jambes accru, Economie confort, Economie standard, sont affichees ouvertement dans le panneau, le prix visible a chaque etape. La barre ancree montre le total courant pour tous les passagers, mis a jour en direct (664 euros, puis 679,99, puis 727,96). La barre laterale detaille chaque frais par passager et par troncon. Rien n'est cache jusqu'au paiement. Rien n'est une surprise.
C'est la recherche qui paie. La carte de parcours disait que la selection de siege est l'endroit ou la reservation semble trompeuse. J'ai donc concu la version ou le prix n'est jamais cache, l'etat toujours clair, et l'utilisateur jamais piege. L'upsell, rendu honnete, parce que la recherche m'a dit exactement quel moment rendre honnete.
Seat microapp in selecting state, button switched to Cancel and seat map highlightedMicroapp de siege en etat de selection, bouton passe a Annuler et plan de cabine mis en evidenceSeat microapp with one passenger seated and one still unselected, sidebar reflecting partial stateMicroapp de siege avec un passager place et un autre non selectionne, barre laterale refletant l'etat partielSeat microapp with seats confirmed for both passengers across both legs, running total updatedMicroapp de siege avec sieges confirmes pour les deux passagers sur les deux troncons, total mis a jour
What it deliveredCe que ça a livré
A complete process, start to finishUn processus complet, du debut a 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'affinite, carte de parcours, conception de flux, prototype et transfert developpeur annote. Chaque etape du processus UX, menee correctement sur un seul projet.
Synthesis that picked the battleUne synthese 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 selection et l'upsell n'etait pas une intuition. Le diagramme d'affinite et la carte de parcours l'ont identifie comme la zone la plus penible, et nommer ce focus est la decision sur laquelle reposent toutes les suivantes.
The upsell, made honestL'upsell, rendu honnete
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 siege a transforme la partie la plus mal aimee de la reservation en la plus transparente. Tarifs affiches, etat clair, total courant en direct, aucun cout cache, une reponse 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, etat d'ecran, message d'erreur et interaction documentes pour l'ingenierie. Le genre de transfert qui se construit tel qu'il a ete concu.
The annotated wireframe handoff, every screen, state, and interaction documentedLe transfert en wireframes annotes, chaque ecran, etat et interaction documente
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'etait un brief academique avec un client fictif, et je l'assume. Mais la chaine derriere, recherche, synthese, une seule decision de focalisation, puis design, est celle que je mene sur de vrais produits, et le microapp de siege est le type de probleme d'interaction, multi-etats, multi-passagers, a enjeu commercial, qui distingue l'agencement d'ecrans de la conception de systemes. Si vous construisez un parcours dont la difficulte est de rendre honnete un moment complique qui touche a l'argent, c'est le travail que je fais.
