Refonte de l'application Booking.com

Equipe : Noam Bergmann, Maria Iracli
Chronologie : 3 jours
Livrables : Atomic Design Assets, Style Tile, 4 Écrans Redesignés, 1 Micro Interaction
Matériel : Figma, Zoom, Discord

Le bref

La portée de ce projet était de reconcevoir 4 écrans d'une application bien connue. Nos modifications de conception ne se limiteront pas à l'esthétique mais affecteront également la convivialité du produit.

Nous avons choisi Booking.com comme application sur laquelle travailler. Booking.com est une application de réservation de voyage populaire qui permet aux utilisateurs de réserver des vols, des hôtels, des voitures de location et d'autres services liés aux voyages.

Cependant, malgré sa popularité, l'application a la réputation d'être chaotique et incohérente en termes d'interface utilisateur (UI) et d'expérience utilisateur (UX). Cette incohérence peut entraîner de la confusion et de la frustration chez les utilisateurs, ce qui les empêche de trouver ce qu'ils recherchent et de finaliser leurs réservations rapidement et efficacement. Ainsi, au premier coup d'œil, nous avons pu identifier 2 principaux points douloureux :

1. Incohérence : différents éléments de l'application ont des conceptions incohérentes, cela peut semer la confusion chez les utilisateurs et compliquer leur navigation.
2. Mise en page encombrée : Une mise en page encombrée et surpeuplée rend difficile pour les utilisateurs de trouver ce qu'ils recherchent et les submerge avec trop d'informations.

Cloner l'application

La première étape consistait à cloner quatre écrans de l' application Booking.com . L'objectif principal de cette tâche était de s'assurer que les écrans clonés étaient cohérents avec l'application d'origine tout en conservant une interface conviviale. Pour ce faire, nous avons effectué une analyse approfondie de la conception de l'application d'origine, y compris la palette de couleurs, la typographie et la mise en page.

Analyse heuristique

Nous avons fait une analyse heuristique, principalement centrée sur le 8ème principe du design esthétique et minimaliste.

Voici quelques-unes des lueurs que nous avons filtrées :

• Belle mosaïque d'images
• Bon usage de la catégorisation et de la division des informations dans la partie inférieure d'un écran

• Les icônes ne sont parfois pas uniformément réparties
• Hiérarchie des informations peu claire
• Mise en page globale encombrée avec trop d'informations
• Utilisation excessive de couleurs (bleu foncé, bleu clair, rouge, vert, gris foncé, gris clair)
• Les images sont souvent trop petites (par exemple pour se faire une idée de la pièce)
• Utilisation incohérente des éléments visuels entre les différents écrans
• Utilisation incohérente de la police de caractères

Afin d'assurer une cohérence et une cohésion tout au long du processus de refonte, nous avons décidé de nous inspirer du premier écran et d'y intégrer les éléments qui lui étaient propres. Ce faisant, nous visons à créer une expérience utilisateur plus unifiée et intuitive sur tous les écrans.

Analyse visuelle de la concurrence

Nous avons choisi 3 concurrents pour comparer visuellement à booking.com . Nous avons choisi Air BnB, Expedia et EasyJet.

Nous avons remarqué que la plupart d'entre eux utilisent une quantité très limitée de couleurs.

Air BnB et EasyJet n'utilisent qu'une seule couleur - leur couleur de marque principale en plus des neutres. Air BnB utilise même cette couleur probablement plus comme couleur d'accent. En combinaison avec la conception de mise en page réduite et la conception de l'information, cela donne une sensation très moderne et aérée à l'application.

EasyJet a également une approche très claire, réduite et moderne. Seules les informations les plus importantes sont visibles au début, ce qui donne à l'utilisateur une sensation de calme et de détente lors de la réservation via l'application.

Expedia a une palette de couleurs légèrement plus complète, dans l'ensemble montre un peu plus d'informations à l'utilisateur. Ce qui ressort, c'est la bonne utilisation des cartes pour diviser les différentes propriétés.

Conseil d'humeur

Nous avons décidé d'opter pour un design plus minimaliste avec une utilisation réfléchie de la couleur après avoir examiné les résultats de l'analyse heuristique et de l'analyse de comparaison visuelle. Ces analyses ont probablement révélé que la conception actuelle de l'application était encombrée et écrasante, avec une quantité excessive d'informations sur chaque écran.

Nous voulions vraiment puiser dans l'envie de voyager de l'utilisateur et créer un design plus immersif et expérientiel qui parle vraiment de son désir d'aventure et d'exploration. En adoptant un design plus calme et minimaliste avec une utilisation réfléchie de la couleur, nous visons à créer une expérience utilisateur plus engageante et agréable, rendant finalement l'application plus attrayante et conviviale.

Couleurs & Typographie

Nous avons réuni tous ces éléments et créé une nouvelle tuile de style pour notre palette de couleurs. Nous voulions lui donner un look plus moderne et frais, nous avons donc mis à jour la couleur primaire avec une teinte de bleu similaire mais plus saturée qui, selon nous, fonctionnerait mieux et l'a associée à une nuance de jaune plus vibrante. Nous nous sommes assurés de maintenir un look épuré avec beaucoup d'espace blanc et une marge de manœuvre pour les éléments visuels.

L'application d'origine utilisait SF Pro comme police de caractères principale, que nous avons décidé de conserver car elle fonctionnait très bien. L'application utilisait à l'origine Avenir comme police de caractères supplémentaire, que nous avons décidé d'abandonner et de jouer avec les différentes polices proposées par SF Pro d'Apple pour la rendre plus cohérente. L'enregistrement de toutes nos polices en tant que styles dans notre fichier a facilité leur application, chaque fois que nous en avions besoin.

HiFi Wireframes et Prototype

Nous avons apporté plusieurs mises à jour à la conception de l'application pour améliorer son interface utilisateur et donc également sa convivialité et son expérience utilisateur :

• Nous avons gardé l'écran d'accueil similaire à l'original, mais avons mis à jour les couleurs et utilisé la typographie de manière plus cohérente tout au long de la conception.
• Nous avons mis à jour le design des cartes avec une image plus grande et un texte aligné.
• La barre de navigation propose désormais notre palette de couleurs mise à jour, avec notre couleur d'accentuation utilisée pour souligner l'emplacement actuel de l'utilisateur sur l'application.

• Nous avons utilisé des éléments de carte de manière plus cohérente tout au long de la conception.
• Lorsqu'un utilisateur clique sur une destination, comme Prague, nous nous sommes assurés d'afficher en premier les informations les plus importantes. Cela permet à l'utilisateur de parcourir rapidement les propriétés proposées, et s'il veut en savoir plus, il peut cliquer sur la carte pour voir plus de détails.

• Une fois que les utilisateurs ont sélectionné une propriété, des images, des informations supplémentaires sur la propriété leur sont présentées et ils peuvent choisir la chambre souhaitée. Lors de la sélection de leur type d'hébergement, les utilisateurs recevront une confirmation visuelle via une micro-interaction animée qui affiche la flèche bleue se transformant en une coche verte. Nous avons déplacé cet élément de sélection de pièce vers le haut sur la page et l'avons intégré dans le même écran. De cette façon, nous pourrions raccourcir considérablement la page entière et même omettre le deuxième écran. À l'origine, la procédure de sélection de la salle se trouvait en bas de la page et obligeait l'utilisateur à naviguer vers une autre page pour faire sa sélection.

Conclusion

En simplifiant la conception et en utilisant une palette de couleurs et une typographie cohérentes, nous avons pu rendre l'application plus facile à utiliser et plus attrayante visuellement. L'utilisation d'éléments de carte tout au long de la conception a également contribué à créer une expérience plus cohérente et intuitive pour l'utilisateur.

Grâce à l'affichage amélioré des informations, les utilisateurs peuvent désormais parcourir rapidement les propriétés proposées et voir les détails les plus importants à l'avance. Cela leur permet de prendre une décision plus éclairée quant à savoir s'ils souhaitent en savoir plus sur une propriété particulière ou passer à l'option suivante.

De plus, en amenant l'élément de sélection de chambre sur la même page, nous avons réduit le nombre de clics nécessaires pour effectuer une réservation, rendant le processus de réservation plus efficace et convivial.

Dans l'ensemble, ces mises à jour ont amélioré l'expérience utilisateur de l'application, la rendant plus agréable à utiliser et augmentant les chances que les utilisateurs réservent leur hébergement via cette application.

Principaux apprentissages personnels

Avant de commencer le bootcamp, j'avais une base solide en design graphique et industriel, et j'avais hâte de travailler sur un projet basé sur l'interface utilisateur. Ce projet récent m'a donné l'opportunité de plonger profondément dans la conception d'interface utilisateur, et j'ai découvert que j'en avais une véritable passion !

Ce qui a rendu ce projet particulièrement enrichissant, c'est que je n'étais pas seulement concentré sur le fait de rendre le design « plus joli » ou plus esthétique. J'étais animé par une réelle volonté de créer une interface réellement fonctionnelle et répondant aux besoins des utilisateurs.

Dans l'ensemble, travailler sur ce projet d'interface utilisateur a été une expérience d'apprentissage précieuse qui a renforcé mon intérêt pour la conception d'interface utilisateur et mon désir de continuer à développer mes compétences dans ce domaine.