Booking.com
Booking.com
Booking.com est l’une des plateformes de réservation de voyages les plus utilisées dans le monde. Elle permet aux utilisateurs de rechercher et de réserver des hébergements variés, allant des hôtels aux appartements, en passant par des maisons de vacances et des auberges. L’application et le site web offrent également des fonctionnalités pour réserver des vols, des voitures de location ou des activités locales.
Contexte
Dans le cadre d’un exercice d’UI design, j’ai entrepris de refondre le design du site web Booking.com. L’objectif principal de ce projet était de moderniser l’interface, tout en conservant l’expérience utilisateur efficace qui fait la renommée de la plateforme.
Le projet s’est concentré uniquement sur l’aspect visuel et ergonomique, sans intervenir sur les fonctionnalités ou l’architecture existante. L’idée était de proposer une expérience plus contemporaine, épurée et cohérente sur tous les supports (desktop et mobile), avec un accent particulier sur la lisibilité, la hiérarchie de l’information et la facilité de navigation.
Lors de cette refonte, j’ai travaillé sur :
La modernisation des couleurs et typographies, pour un rendu plus frais et harmonieux.
L’optimisation de la mise en page, afin que les informations clés soient immédiatement accessibles pour l’utilisateur.
La simplification des cartes et listes d’hébergements, pour réduire la surcharge visuelle et améliorer la scannabilité.
L’uniformisation des composants UI, comme les boutons, les formulaires de recherche et les filtres, pour renforcer la cohérence sur toutes les pages.
L’amélioration des micro-interactions, afin de rendre l’expérience plus fluide et agréable.
Avant
Charte graphique
Couleurs
Une palette de bleus et de gris, combinant énergie (Azure Blue, Deep Navy) et sobriété (Slate, Pale, Soft Gray) pour une identité élégante et professionnelle.
Typographie
Poppins, une police moderne et lisible, alliant clarté et cohérence pour une expérience premium.
Du wireframe aux maquettes
Où ?
Page d’accueil : mise en avant d’un champ de recherche central et d’un CTA clair pour favoriser l’action immédiate.
Exploration visuelle : intégration d’une carte interactive afin de rendre la recherche plus intuitive et ludique.
Hiérarchie visuelle : typographie contrastée et palette bleue pour renforcer la lisibilité et l’identité de marque.
Responsive design : déclinaison mobile optimisée avec une navigation par onglets en bas pour un usage fluide
Quand ?
Cette étape a été pensée pour rendre la planification du voyage rapide et fluide.
Formulaire simplifié : choix direct de la période et du nombre de nuits avec des contrôles clairs (+/-).
Contexte enrichi : affichage de la météo et d’informations locales pour aider l’utilisateur à mieux anticiper son séjour.
Navigation fluide : progression guidée par étapes (lieu → dates → invités), limitant la surcharge cognitive.
Responsive design : la version mobile conserve la même hiérarchie et met en avant l’action principale pour assurer une expérience homogène.
Qui ?
Cette dernière étape vise à conclure la recherche rapidement en définissant la composition du groupe et les besoins en chambres.
Formulaire modulable : possibilité d’ajouter ou retirer adultes, enfants et chambres grâce à des contrôles simples.
Option “solo travel” : un switch rapide adapte le formulaire pour un voyageur unique, rendant l’expérience plus personnalisée.
Accent sur l’émotion : un message d’accompagnement met en avant l’expérience unique qui attend l’utilisateur, renforçant l’aspect inspirationnel.
Cohérence cross-device : l’interface conserve la même logique et hiérarchie entre desktop et mobile pour un parcours fluide.
Autres projets
