Étude de cas · N° 04 · Voyage · réservation · 2024
MECCA Booking : réserver près du Haram sans deviner la distance
Une plateforme de location pour la Omra et le Hajj : des logements vérifiés à distance de marche du Haram, une réservation en trois étapes pour les pèlerins et un espace pour les hôtes qui les accueillent.
- UX/UI web
- Back-office
- Design system
- Rôle
- Product designer, de la recherche au prototype
- Durée
- 10 semaines
- Équipe
- Projet conceptuel, en solo
- Plateforme
- Web, desktop d’abord
- Outils
Figma 
Miro 
Google Meet 
Google Docs- Livrables
- Benchmark, Proto-personas, Journey map, User flows, Wireframes, Design system, 28 écrans, Prototype
Le projet en chiffres
Ce qui a été livré, compté dans le fichier Figma. Le produit est fictif : aucun résultat d’usage.
28
écrans
17 pour le voyageur, 11 pour l’hôte et l’équipe de modération
3
rôles servis
Le pèlerin, l’hôte, l’équipe qui vérifie les annonces
23
composants
Sur trois collections de variables : couleurs, espaces, rayons
01 · Le projet
Se loger près du Haram
Chaque année, des millions de pèlerins cherchent un logement à La Mecque pour la Omra ou le Hajj. En 2024, l’Arabie saoudite a compté 35,7 millions de pèlerins de la Omra, dont 16,8 millions venus de l’étranger.
Pour eux, le critère n’est ni le style ni le prix seul : c’est la distance à pied jusqu’au Haram, une arrivée possible à toute heure après un vol de nuit, et un hôte de confiance, souvent pour toute une famille.
MECCA Booking est une plateforme de location pensée pour ce séjour-là : chercher par distance au Haram, réserver en trois étapes, et, côté hôte, gérer ses annonces, son calendrier et ses revenus.
Dix semaines, de la recherche au back-office
01 · Semaines 1 à 3
Découvrir
Parcours de réservation de quatre offres, des généralistes aux forfaits d’agence, et contexte du pèlerinage.
- Benchmark
- Recherche documentaire
02 · Semaines 3 à 4
Définir
Deux proto-personas, le voyageur et l’hôte, et la carte d’expérience d’un séjour.
- Proto-personas
- Journey map
- HMW
03 · Semaines 4 à 6
Idéer
Architecture des deux espaces, flux de réservation, wireframes.
- User flow
- Impact × effort
- Wireframes
04 · Semaines 6 à 9
Prototyper
Design system, 17 écrans voyageur, 11 écrans hôte et modération, prototype relié.
- Design system
- UI haute fidélité
- Prototype Figma
05 · Semaines 9 à 10
Vérifier
Revue des lois UX, des états vides et d’erreur, plan de test.
- Revue heuristique
- Plan de test
02 · Découverte
Un marché de pèlerins, pas de touristes
≈ 1 km
à pied, au plus, avec des aînés
La distance au Haram qu’une famille accepte, cinq prières par jour.
Hypothèse
3 à 6
voyageurs par réservation
Parents, conjoints, enfants : on loue pour une famille.
Hypothèse
2 h – 4 h
heures d’arrivée fréquentes
Les vols de nuit arrivent quand personne n’ouvre la porte.
Hypothèse
Chiffres de fréquentation consultés en octobre 2026. Les autres sont des hypothèses à vérifier en entretien.
Quatre façons de se loger
Les généralistes, la location entre particuliers et l’alternative indirecte : le forfait d’agence.
| Critère | MECCA · le projetLe projet | Booking.comGénéraliste | AirbnbEntre particuliers | Forfait d’agenceIndirect |
|---|---|---|---|---|
| Distance à pied au Haram | OuiSur chaque annonce, et en filtre | PartielDistance à un repère | PartielUne carte, pas une distance | NonHôtel imposé |
| Arrivée autonome à toute heure | OuiCode envoyé la veille | PartielSelon l’hébergement | Oui | PartielAccueil de groupe |
| Annulation lisible avant de payer | OuiDate et montant | Oui | Oui | Non documenté |
| Contenus pensés pour la Omra | OuiQuartiers, portes, suhoor | Non | Non | OuiEncadrement |
| Liberté de dates et de logement | Oui | Oui | Oui | NonDates du groupe |
Le tableau défile de côté.
Revue des parcours publics, sans compte. Les verdicts décrivent ce qui était visible, pas un audit complet.
À retenir
Les généralistes savent réserver, pas servir un pèlerinage ; les agences connaissent le pèlerinage mais imposent tout. La place libre : la liberté d’une location, avec le savoir d’une agence.
03 · Définition
Deux côtés de la même porte
Proto-personas : des hypothèses à valider en entretien ; leurs citations sont illustratives.
P1 · le pèlerin
Youssef, 46 ans
Cadre à Casablanca, part en Omra en avril avec sa mère et sa femme
- Objectif
- Un appartement à moins de dix minutes à pied du Haram, réservé avant les billets
- Ce qui bloque
- Les annonces « près du Haram » sans distance, l’arrivée de nuit après le vol
« Ma mère marche lentement : je veux savoir combien de minutes, pas « proche ». »
P2 · l’hôte
Youness, 38 ans
Loue trois appartements à Ajyad aux pèlerins depuis des années
- Objectif
- Remplir Ramadan et le Hajj sans passer ses nuits au téléphone
- Ce qui bloque
- Les demandes sur WhatsApp, l’argent à la remise des clés, les annulations tardives
« Je veux voir mes arrivées de la semaine sans ouvrir dix conversations. »
Le séjour de Youssef, avant
Sans plateforme dédiée, entre un site généraliste et les messages. Émotions supposées.
Youssef
01Chercher
02Comparer
03Réserver
04Arriver
05Séjourner
06Rentrer
Fait
Pense
Ressent
Opportunité
La carte défile de côté.
Le problème à résoudre
Les pèlerins ont besoin de connaître la distance à pied au Haram et l’heure à laquelle ils pourront entrer, parce qu’ils voyagent en famille et prient cinq fois par jour. Aujourd’hui, les annonces disent « proche » sans le prouver.
Les questions auxquelles la conception répond
Q1
Comment pourrions-nous faire de la distance à pied le premier critère de recherche ?
Pourquoi elle · C’est le seul critère qui ne se rattrape pas sur place.
Q2
Comment pourrions-nous rendre l’arrivée possible à toute heure ?
Pourquoi elle · Le pic d’angoisse de la carte d’expérience.
Q3
Comment pourrions-nous rendre un hôte digne de confiance avant le paiement ?
Pourquoi elle · On confie sa famille à un inconnu.
Q4
Comment pourrions-nous aider l’hôte à remplir ses dates sans conversations ?
Pourquoi elle · Youness gère tout à la main.
04 · Idéation
Ce que la première version garde
Impact ↑
Gains rapides · Impact fort · Effort faible
Distance à pied au HaramEn V1
Q1
Annulation datée, prix totalEn V1
Arrivée autonome et codeEn V1
Q2
Grands chantiers · Impact fort · Effort fort
Annonces vérifiées par l’équipeEn V1
Q3, console de modération
Espace hôte : calendrier et prixEn V1
Q4
Messagerie hôte–voyageurEn V1
Bonus · Impact faible · Effort faible
Horaires des prières sur la fichePlus tard
Plus tard · Impact faible · Effort fort
Litiges et remboursementsEn V1
Indispensable pour payer en ligne
Application mobilePlus tard
Le séjour se prépare sur ordinateur
Effort →
Impact et effort estimés : une priorisation de concepteur, à revoir avec une équipe.
Réserver, en trois étapes
Début
Accueil
Destination, dates, voyageurs
Écran
Résultats
Liste et carte, distance au Haram
Écran
Fiche logement
Photos, équipements, avis, prix total
Décision
Connecté ?
Non : connexion ou compte, puis retour à la fiche
Écran
Votre séjour
Voyageurs, heure d’arrivée
Écran
Paiement
Carte, PayPal ou Apple Pay
Système
Vérification 3-D Secure
Fin
Confirmation
Code d’arrivée envoyé la veille
Les wireframes basse fidélité
Quatre pages avant toute couleur : la recherche, les résultats, la fiche et le tableau de bord de l’hôte.
01 · Accueil
02 · Résultats
03 · Fiche logement
04 · Tableau de bord hôte
05 · Conception
Un design system chaleureux et sobre
Geist, un jaune d’accent pour l’action, des neutres chauds et des coins arrondis : chaque couleur, espace et rayon des écrans est une variable.
Couleurs
Accent
#FBB040
Action principale
Accent survolé
#E89A1F
État survolé
Accent doux
#FFF6E5
Bandeaux, demandes
Texte accent
#9A5F06
Texte jaune lisible (AA)
Page
#FFFFFF
Fond
Texte
#0A0A0A
Titres et texte
Texte secondaire
#525252
Légendes
Succès
#15803D
Confirmé, payé
Succès doux
#ECFDF3
Fond de statut
Danger
#DC2626
Annulation, litige
Typographie
Display
Geist Bold 44
Réservez près du Haram
Titre 1
Geist Bold 30
Quartiers populaires
Titre 3
Geist Bold 20
Ce que propose ce logement
Corps
Geist Regular 16
Deux chambres climatisées et une cuisine équipée.
Prix
Geist Bold 20
858 €
23 composants
- Logo
- Bouton
- Badge
- Champ
- En-tête
- Pied de page
- Recherche
- Étapes
- Équipement
- Note
- Carte d’annonce
- Carte de quartier
- Carte d’hôte
- Avis
- Récapitulatif de prix
- Option
- Ligne de réservation
- Avatar
- Pastille de prix
- Bulle de message
- Statistique
- Menu hôte
- Barre hôte
L’accueil : quatre champs, trois garanties
Première itération
Version finale
Ce qui change
La recherche passe de six champs à quatre : destination, dates, voyageurs, puis l’appel.
Loi UX · Loi de HickRespectée
Trois garanties sous la recherche : hôtes vérifiés, distance au Haram, annulation gratuite.
Loi UX · Effet de position sérielleRespectée
Un seul bouton jaune à l’écran : celui qui lance la recherche.
Loi UX · Effet Von RestorffRespectée
La fiche : décider sans faire défiler
Première itération
Version finale
Ce qui change
Titre, note, avis et distance au Haram tiennent en une ligne, au-dessus des photos.
Loi UX · Loi de proximitéRespectée
Le prix du séjour entier et l’annulation restent à droite pendant la lecture.
Loi UX · Effet d’ancrageRespectée
Le parcours du voyageur
Résultats : la distance d’abord
Votre séjour
Paiement
Confirmation
Détail de la réservation
Messages
Côté hôte et modération
Le back-office répond à Q4 : voir sa semaine, régler ses prix, être payé, sans conversations.
Tableau de bord
Calendrier et prix
Revenus
Ajouter un logement
Litiges, côté équipe
06 · Validation
Les lois UX à l’œuvre
- Enfreinte
Loi de Hick
Plus de choix, décision plus lente : réduisez et groupez les options.
Six champs avant la première réponse.
Accueil, première itération
- Respectée
Loi de Hick
Plus de choix, décision plus lente : réduisez et groupez les options.
Quatre champs, des valeurs par défaut.
Accueil
- Respectée
Effet Von Restorff
Ce qui diffère est ce dont on se souvient.
Le jaune ne sert qu’à l’action principale.
Partout
- Respectée
Loi de proximité
Ce qui est proche se lit ensemble.
Note et distance sont lues d’un regard.
Fiche logement
- Respectée
Effet d’ancrage
Le premier chiffre fixe l’échelle de tous les suivants.
Le prix du séjour entier, frais compris, avant de payer.
Récapitulatif
- Respectée
Règle du Peak-End
On juge le pic et la fin, pas la moyenne.
Le moment le plus redouté devient un code envoyé la veille.
Arrivée
Résultats attendus
Ce qu’un test et un lancement devraient montrer. Rien n’a été mesuré.
| Résultat attendu | Indicateur | Cible indicative |
|---|---|---|
| Un choix plus sûr | Testeurs qui citent la distance au Haram avant le prix | 4 sur 5 en test |
| Une réservation sans détour | Réservations terminées, de la fiche au paiement | Au-dessus de 60 % (hypothèse) |
| Des arrivées sans appel | Arrivées de nuit sans contact avec l’hôte | 9 sur 10 (hypothèse) |
Le test qui validerait le parcours
ParticipantsCinq personnes ayant fait la Omra en famille ces trois dernières années, en séance à distance de 40 minutes sur le prototype, partage d’écran par Google Meet.
01
TâcheTrouver un logement pour trois adultes à moins d’un kilomètre du Haram, du 20 au 26 avril.
Critère de réussiteTrouvé en moins de 3 minutes, filtre de distance utilisé.
02
TâcheVérifier jusqu’à quand l’annulation est gratuite.
Critère de réussiteDate donnée sans quitter la fiche.
03
TâcheRéserver et indiquer une arrivée à 3 h du matin.
Critère de réussitePaiement fait, mode d’arrivée compris.
04
TâcheEn hôte : accepter une demande et bloquer deux nuits.
Critère de réussiteFait depuis le tableau de bord, sans aide.
Questions d’entretien
- Racontez comment vous avez trouvé votre dernier logement à La Mecque.
- Qu’est-ce qui vous a inquiété le plus avant le départ ?
- À quelle distance du Haram renonceriez-vous à un logement, et pourquoi ?
Ce que j’en retiens
01
Un critère peut tout porter
La distance à pied au Haram a fini par organiser la recherche, les cartes, la fiche et les avis.
02
Dessiner l’autre côté
Le parcours voyageur ne tenait qu’avec l’espace hôte : sans lui, l’arrivée autonome restait une promesse.
03
Une itération vaut une étude
Revoir la première version écran par écran a montré ce qu’un regard neuf aurait relevé : trop de champs, pas de garanties.
Un projet en tête ?
Décrivez l’écran ou le parcours qui coince : je réponds avec une première lecture du problème.