étude de cas

Design de l'interface d'un site e-tourisme

En complément de l'immobilier et du e-commerce, je me suis essayé à un nouvel exercice de design d'interface d'un site dans le secteur du e-tourisme. De la même façon que pour le projet "c\imo", je me suis basé sur plusieurs éléments présentés dans un cahier des charges réel sur lesquels j'ai travaillé.

Les objectifs de cette refonte ergonomique étaient les suivants : diminution du check out, augmentation du panier moyen, développement du site en Responsive Design, remontée des pages du site dans les premiers résultats de recherche (SEO) ou encore adaptation des contenus pour davantage de personnalisation.


01 —
identité visuelle

Pourquoi ce nom ?

Avant de rentrer dans le vif du sujet, un court aparté sur le nom : atlea. J'ai choisi ce nom pour le projet, car dans la mythologie grecque Atlas est un Titan qui porte le monde sur ses épaules suite à sa défaite contre Zeus. La lettre "e" représente la terre penchée et le symbole situé dessous, les bras d'Atlas, ainsi qu'une chaîne de montagne et la mer.


02 —
contexte

L'e-tourisme en France

Pour mieux appréhender l'e-tourisme, je vous propose un petit tour d'horizon du secteur sur internet avec des chiffres qui datent de la première moitié de 2018. Internet représenterait plus de 60% du total des réservations de séjour et parmi les autres points essentiels, voici ceux que l'on peut retenir :

  • l'audience mobile augmente encore avec 31% du total des visites dans le secteur privé et 35% pour les sites du tourisme institutionnel
  • 54% des professionnels du secteur sondés misent sur le mobile
  • 23% des professionnels du secteur sondés se penchent de plus en plus sur l'aspect conversationnel
  • la personnalisation, le ciblage via la data et l’intelligence conversationnelle (I.A.) sont des éléments déterminants pour améliorer l'expérience client (CX)


03 —
Process

Approche

Le projet initial avait été réalisé en étroite collaboration avec le client, les experts en interne (Ergonomie/Webdesign, SEO, SEA, Contenu etc.) et l'équipe en charge du développement.
J'ai repris cette base de travail complète pour réfléchir aux parcours utilisateurs, à l'arborescence ou encore au positionnement des éléments au sein de l'interface.


04 —
Solution

Interface utilisateur

Comme évoqué un peu plus haut, le site n'était pas développé en Responsive Design. Après vérification des données sur Google Analytics, la consultation depuis le mobile était en augmentation depuis N-1. Dans ce sens, une attention particulière a été apportée à l'interface sur smartphone pour améliorer le confort de navigation des utilisateurs jusqu'à la conversion.

Un autre point de vigilance concernait l'accessibilité. Pour rapprocher le plus possible cet exercice du réel, j'ai repris les contraintes liées à la charte graphique du projet original, notamment les couleurs avec le bleu et le fuschia. Ces dernières étaient très claires à l'origine et ont été ajustées, justement pour optimiser l'accessibilité, tout comme le noir que j'ai fait choisi de faire évoluer vers des teintes de gris pour faciliter la lecture du contenu.


—————

Les premières phases réalisées en amont (étude de l'existant, analyse des données sur Google Analytics, benchmark etc.), j'ai commencé à croquer les interfaces des pages principales : page d'accueil, liste de résultats, détail d'une résidence et les étapes du tunnel de réservation.

La conception a ainsi été orientée pour permettre une interaction facilitée avec le pouce et suite à plusieurs recherches, l'interface a été imaginée comme une application.
Suite à plusieurs explorations et itérations, le design s'est basé sur une esthétique brute pour privilégier la simplicité, sans pour autant mettre de côté la personnalité avec une typographie arrondie, des images mises en avant et une élégance minimale.


05 —
UI

Page d'accueil

Avant d'entamer la présentation, une précision sur la navigation persistante sur mobile. La définition choisie est la 360x640, l'espace réduit qu'elle impose oblige à faire des choix dans la présentation des éléments. De ce fait, le header intègre les éléments essentiels : le logo accompagné de la baseline, l'accès au compte et au menu, volontairement accessible via le libellé "menu" et non un burger (🍔) pour plus de compréhension.

Sur la page d'accueil, 4 éléments/blocs composent la zone hero sur mobile :

  • un slider réduit qui présente des offres de séjour
  • un moteur de recherche, élément principal pour permettre aux utilisateurs d'accéder rapidement à un listing de résidences qui correspond à leur besoin
  • un accès à une recherche secondaire via une carte
  • un accès à une fonctionnalité plus spécifique : la recherche vocale



Pourquoi cette dernière fonctionnalité ?
J'ai imaginé le fait qu'un utilisateur pourrait avoir du mal à utiliser l'interface pour différentes raisons, voire à préférer ce fonctionnel pour aller plus vite, plutôt que de passer par les champs conventionnels.

Une intelligence artificielle ("altei" ?!) pourrait ainsi l'accompagner dans les différents choix pour qu'il puisse rapidement accéder à un listing de résidences, voire à des suggestions personnalisées.

Enfin, l'idée est de présenter un visuel d'ambiance adapté aux utilisateurs en fonction de la saison, voire de leur(s) recherche(s) antérieures pour leur offrir une expérience accrue sur le site.


—————

Page de listing

Une spécificité à souligner sur le projet, un changement de saison devait être intégré pour proposer aux utilisateurs de consulter les résidences version été et/ou version hiver. Cet élément devait être accessible sur la page de listing, mais également sur la fiche d'une résidence. Dans ce sens, le fonctionnel a été intégré à proximité du titre, en haut à droite, pour que son emplacement soit identique sur les différentes pages.

Un autre point de réflexion s'est porté sur la visibilité et l'aspect des aperçus des résidences. En effet, l'utilisateur devait pouvoir rapidement visualiser un aperçu d'une résidence, sans pour autant rendre difficile l'accès aux filtres et à l'affinage de la recherche. Deux versions de l'affichage des résidences ont ainsi été testées :

  • une première avec un affichage en card des aperçus qui proposait en complément de switcher entre les différentes photos de la résidence
  • une seconde avec un affichage des aperçus à l'horizontal pour permettre d'en afficher plusieurs sur un écran

C'est finalement la première qui a été retenue, notamment car les informations textuelles plus grandes permettaient une lecture facilitée.


—————

Page de détail

En premier niveau de lecture, le fonctionnel lié au changement de saison a été conservé. La hauteur des pages pouvant varier, le choix d'une sidebar fixe en bas d'écran a été testé et intégré pour permettre aux utilisateurs de visualiser à tout moment le prix et d'accéder rapidement au bouton principal lié à la réservation.

Pas de zoom photo, mais plutôt un bouton qui offre la possibilité de visiter la résidence avec son smartphone, à l'image des visite 360°. Ce fonctionnel permet de se balader dans le logement et d'obtenir des précisions supplémentaires grâce à différentes zones cliquables.


—————

Tunnel de paiement

Soon 😊