Aller au contenu principal
Virabo Hoy
Retour aux projets
Accor

Mercure Bucket List

Interface mobile-first présentant 50 expériences gastronomiques mondiales avec carte interactive.

  • UX/UI
  • Web Design
  • WordPress
  • Design System
Mercure Bucket List
Rôle
UX/UI Designer & Chef de projet digital
Durée
3 mois
Année
2023-2024
Délai tenu
3 mois

Contexte

Mercure (groupe Accor) célèbre ses 50 ans et souhaite incarner son ADN local par une plateforme valorisant 50 expériences gastronomiques, une par pays. La marque cible un voyageur urbain, curieux, sensible au sens du lieu.

Le défi

« Comment présenter 50 expériences hétérogènes dans 50 pays sans noyer l'utilisateur, en respectant la charte Accor et en tenant un délai de 3 mois imposé par la campagne ? »

Recherche et insights

Comprendre avant de dessiner

Analyse comparative de 12 plateformes voyage haut de gamme pour identifier les codes du segment et les patterns récurrents de navigation par destination.

Sources analysées

  • Michelin Guide
  • Condé Nast Traveler
  • Booking Experiences
  • Airbnb Experiences
  • Tablet Hotels
  • Tripadvisor Premium

Constats clés

  • Les plateformes premium misent sur l'éditorial (long-form, photographie immersive) plutôt que sur des grilles produit denses.

  • La carte interactive est attendue en navigation principale, pas comme outil secondaire.

  • Le tunnel de réservation reste hors-périmètre : les utilisateurs cherchent à découvrir, puis quittent la plateforme pour réserver via leur canal habituel.

Sur le terrain

  • 5 entretiens individuels avec les équipes marketing Accor (1h chacun)
  • 3 sessions de co-design avec voyageurs représentatifs des personas Mercure
  • Tests utilisateurs sur prototype basse-fidélité (Figma), 6 participants

Ce que les utilisateurs ont dit

  • 70%

    des testeurs filtraient par envie (type de cuisine) avant de filtrer par destination, inverse de la hiérarchie initiale pays-first.

  • Les utilisateurs sautaient systématiquement les blocs textuels de plus de 80 mots, décision : tronquer les descriptions à 60 mots avec un lien "lire la suite".

Solution

Les choix qui comptent

  1. 01

    Filtre primaire "par envie" (type de cuisine) en navigation principale, filtre secondaire "par destination" dans une zone secondaire.

  2. 02

    Carte mondiale interactive en hero, scroll horizontal sur mobile pour conserver la lisibilité.

  3. 03

    Design system documenté (24 composants, 5 tokens couleur) pour permettre à l'équipe WordPress de produire les 50 pages sans dépendance.

UX et accessibilité

  • Mobile-first dès le wireframe, 68% du trafic attendu sur mobile selon les benchmarks Accor.
  • Contraste WCAG AA validé sur l'ensemble du design system, navigation clavier complète sur la carte.
  • Images servies en WebP + lazy-loading sous la ligne de flottaison pour limiter l'impact carbone de la galerie photo.

Résultats

Ce que ça a donné

Site livré dans les temps. Les chiffres d'engagement détaillés restent confidentiels (Accor), mais la campagne anniversaire a tenu ses objectifs internes selon les retours équipes.

Délai tenu
3 mois
Pages produites
50
Composants du design system
24

Ce que j'ai appris

« Tester un parti-pris ("on filtre par pays") sur un prototype basse-fi a évité 3 semaines de production sur un design qui n'aurait pas convaincu les utilisateurs. »

Projet suivant

Novotel x Pixar

Disney Pixar / Accor
Essayer la démo