Refonte d’interface : Es Saadi Marrakech Resort

Acteur historique de l’hôtellerie de luxe à Marrakech, le Es Saadi souhaitait un nouveau site proche de ses valeurs, de son histoire et mettant en avant l’offre pléthorique du resort : hôtel, palace, casino, club, restaurants, spa…

Les objectifs de la refonte :

• Renforcer la visibilité du groupe
• Accroître le trafic et la conversion
• Développer les synergies entre les différentes entités du groupe
• Incarner la nouvelle image du resort sur le digital

Cette étude de cas retrace les différentes étapes du processus de création de cette nouvelle interface à forte consonance expérience utilisateur.

1. Découverte utilisateur

Dans un premier temps, nous avons mené un travail de découverte. Des recherches autour des utilisateurs : usages, habitudes, besoins, attentes (…) nous ont permis de mieux appréhender la population cible du resort. Pour affiner nos recherches sur les comportements utilisateurs, un questionnaire en ligne a été créé et soumis à un panel d’utilisateurs. Des interviews en face à face ont également réalisés. En parallèle, une approche marché a été initiée par le planning stratégique afin d’en savoir plus sur les tendances du e-tourisme.

Quel device privilègent-ils pour faire des recherches liées à un séjour ? Et pour réserver ? Sur quel(s) critère(s) basent-ils le choix d’un hôtel ? Quels sont les mots clés qu’ils tapent dans les moteurs de recherche ? Qu’est ce qui influence la décision d’achat ? Nous dressons dès lors les user journey.

Dans ce marché en pleine expansion qu’est le e-tourisme, on s’est aperçu que le parcours d’achat est long et sophistiqué. Les internautes visitent en moyenne 8 sites avant la transaction et le parcours d’achat dure en moyenne 55 jours ! Un parcours qui débute notamment sur mobile où les internautes concentrent leurs recherches (51% des voyageurs en 2017). Le mobile est donc un enjeu majeur car c’est sur ce device que se fera la 1ère impression. L’autre aspect à ne pas négliger en matière de e-tourisme : la/les communauté(s). Tripadvisor, l’entourage et les avis online sont des éléments qui influent énormément sur les décisions des internautes dans le choix d’un séjour.

Toutes ces réponses ont permis de créer des personas représentant les utilisateurs type du nouveau site du Saadi. Des personas qui ont été le fil conducteur tout au long du projet. Ils nous ont permis de garder en tête à chaque étape les attentes des utilisateurs pour orienter le travail de prototypes des chefs de projet UX ou les choix créatifs des webdesigners.

2. Refonte graphique

L’objectif premier de la refonte ergonomique du site est d’accroître le trafic et la conversion grâce à une interface claire, attractive et efficace. Pour ce faire nous avons structuré et hiérarchisé l’information et fait évoluer les principes de navigation en nous appuyant sur les retours d’utilisateurs.

Dans un premier temps nous nous sommes focalisés sur le site existant en effectuant un audit ergonomique afin d’identifier les points noirs de cette interface et les potentiels améliorations à y apporter. Pour compléter l’audit, nous réalisons un atelier de shadowing. Cet atelier consiste à faire tester l’interface à des utilisateurs suivant des scénarios : réserver une chambre d’hôtel, le localiser, trouver une information précise (…) Il nous permet d’identifier les parcours utilisateurs basés sur les habitudes et usages. À l’issue de ces tests nous possédons déjà une base de travail intéressante qui permet de définir les évolutions nécessaires et nos axes d’interventions sur le site.

Par la suite, nous réalisons des tris par cartes : un atelier efficace pour tester la sémantique de l’arborescence et hiérarchiser les entrées du menu. Nous procédons d’abord à un tri par carte dit « ouvert ». Nous demandons aux participants de regrouper des étiquettes où sont inscrit les intitulés des entrées du menu, puis de nommer chaque regroupement par un libellé de catégorie qui caractérise le regroupement. Ensuite, nous réalisons un tri par carte « fermé » nous permettant de confirmer les résultats du premier tri de carte « ouvert ». La manière de procéder est identique mais nous ajoutons les catégories existantes et demandons aux participants de regrouper les entrées du menu dans ces catégories.

Une fois l’arborescence validée, nous réalisons des prototypes. Ils nous permettent de mettre en place l’architecture du site, de hiérarchiser le contenu, d’imaginer les principes de navigation et de simuler les interactions entre l’utilisateur et l’interface. Cette phase est essentielle car elle nous permet de tester réellement l’aspect fonctionnel et la structure du site avant de passer à la phase de webdesign. Les prototypes sont testés par des utilisateurs (sélectionnés selon les personas établis précédemment) selon le même principe que le shadowing mais grâce à des scénarios plus précis et plus détaillés. Tous les éléments des prototypes doivent être testés. Les wireframes sont modifiés en fonction de ces tests afin de proposer une expérience la plus user friendly possible.

Ainsi s’achève la phase de prototypes. Ils sont transmis aux webdesigners qui ont pour mission de réaliser les maquettes en fonction des principes graphiques s’inscrivant dans les tendances actuelles et correspondant à l’image de marque du Es Saadi Marrakech Resort.

Afin de choisir les bons codes graphiques nous réalisons des planches tendances qui feront l’objet de validation auprès du client. Ces planches tendances permettent aux webdesigners de garder en tête les principes à appliquer à l’interface.

Les partis pris créatif :

• Un design épuré et une disposition aérienne des éléments laissant l’utilisateur cheminer à son rythme. On illustre par ce biais le calme et l’espace qu’offre le Resort.
• Une palette colorimétrique inspirée par la ville rouge. Une dominante « terre » équilibrée par des tons gris associés à l’univers haut de gamme.
• Des éléments interactifs discrets , des typographies et pictogrammes sobres pour amener de la modernité.
• Une dimension immersive tout en maîtrise, pour se différencier de la concurrence.
• Des juxtapositions de visuels donnant une dynamique à la navigation et le sentiment d’une offre riche.
• Une iconographie mêlant différents traités, sujets et époques.

3. Refonte technique

Dans l’optique de respecter parfaitement les maquettes graphiques réalisées et d’avoir un site administrable, nous avons créé un thème WordPress sur-mesure. Des templates de pages et des types de contenus spécifiques ont été mis en place pour gérer les différents éléments du site (hébergements, restaurants, offres spéciales…).

Le site pouvant être amené à évoluer dans le futur, nous avons pris le temps de mettre en place un code HTML/CSS maintenable, notamment grâce à l’utilisation du préprocesseur Less, du framework front-end Bootstrap et de la base de travail HTML5 Boilerplate.

Le développement responsive étant devenu indispensable aujourd’hui au regard des conditions d’utilisation d’internet, une attention particulière a été portée à l’affichage du site sur les terminaux mobiles : le travail de recettage/debuggage a donc été important pour obtenir un site qui s’adapte aussi bien sur smartphone que sur ordinateur.

Les performances web ont été prises en compte afin d’avoir un site qui s’affiche le plus rapidement possible et l’analyse Google PageSpeed nous a confirmé la rapidité d’affichage des différentes pages.

Etant donné qu’il s’agissait d’un projet de refonte internet, nous avons passé du temps sur l’optimisation SEO afin de ne pas faire perdre de positions au Es Saadi sur Google (et pour en gagner dans le temps) : URL SEO Friendly, contenus optimisés pour les moteurs de recherche, redirections 301, passage à HTTPS, HTML sémantique et respectant les bonnes pratiques du W3C…

Un accompagnement client a été mis en place pour que le service marketing du Es Saadi puisse être autonome sur la gestion des contenus du site via le back-office. C’est ainsi que des séances de formation ont été organisées et qu’une notice utilisateurs a été livrée.

Découvrez le nouveau site du Es Saadi Marrakech Resort en cliquant ici !