Double sens

Double Sens, voyagiste de tourisme équitable, souhaite moderniser son site pour mieux convertir (réservation de départs garantis, demandes de devis sur‑mesure), valoriser la preuve sociale, et clarifier ses “collections” (Vols inclus, Départs garantis, Last minutes).

Contexte et objectifs

Objectifs business (OKR) O1 – Acquisition/Conversion : ↑ taux de clic vers les fiches voyages et ↑ demandes de devis. O2 – Expérience : ↓ temps pour trouver un voyage pertinent, ↑ compréhension des différences entre “Rejoindre un groupe” et “Sur‑mesure”. O3 – Marque : affirmer le positionnement “tourisme équitable depuis 18 ans” et la communauté de voyageurs. KPIs cibles (à instrumenter, valeurs cibles définies avec le chef de projet) : CTR carte voyage, complétion “Demande de devis”, taux d’usage des filtres/recherche, scroll depth homepage, engagement vidéo, abandon formulaire, NPS post‑visite.

Gouvernance & standards UX

Rituels : atelier de cadrage (vision & priorités), weekly avec chef de projet, revues design inter‑équipes (UX, UI, contenu, SEO, dev), démos bimensuelles. Standards : grille 8pt, responsive mobile‑first, WCAG 2.2 AA/RGAA, composants DIA (Design Interface Assets) : tokens typographiques, couleurs, espacements, radius 12–16, ombres, motion 150–250ms. Accessibilité : contraste ≥ 4.5:1 pour le texte, focus visible, labels explicites, ordre tabulaire logique, alternatives media (sous‑titres vidéo), tailles des cibles tactiles ≥ 44px.

Recherche utilisateur (entretiens + données)

3.1 Entretiens & analytics

Participants (10) : 4 voyageurs “engagés” (valeurs solidaires), 3 “pragmatiques” (prix/date), 2 B2B/écoles, 1 couple 55+. Guide : motivations, critères de choix (destination, période, budget, type d’immersion), compréhension des labels (“départ garanti”, “vol inclus”), friction sur le parcours (inspiration → sélection → réservation/devis). Principaux insights : - Besoin de repères rapides (dates & prix de départs garantis) dès la home. - Confusion entre inspiration et recherche dirigée : nécessité de 2 portes d’entrée claires. - Forte valorisation de la preuve sociale (avis, communauté, vidéos “sur place”). - Pour le sur‑mesure : peur d’un brief long → proposer un formulaire court en 2 étapes (essentiel → coordonnées).Événements GA4 : clics CTAs (“Je fonce”, “M’inspire”), interactions carte (favoris, “Départs garantis”), usage filtres, play vidéo, étapes formulaire, erreurs. Hotjar : heatmaps par breakpoint, enregistrements sessions sur home/liste/fiches, sondage micro‑sortie (“Avez‑vous trouvé un départ garanti adapté ?”). Hypothèses issues des données Les CTAs en hero orientent 2 parcours distincts (inspiration vs recherche). Les modules “Collections & Offres” et “Rejoignez un groupe” doivent remonter ↑ dans la page sur mobile. Les étiquettes “Départs garantis” / “Vol inclus” / “Last minutes” sont des facettes à réutiliser partout (cartes, filtres, listing).

Modélisation : Personas, JTBD & top tâches

Persona 1 – Explorateur engagé : veut un impact local positif, prêt à payer un peu plus, cherche des témoignages authentiques. Persona 2 – Pragmatique : contrainte de dates/budget, veut voir rapidement les départs garantis. Persona 3 – B2B/Écoles : brochure + contact, besoin d’un circuit validé et sécurisant. Jobs-to-be-done (exemples) “Quand j’ai 10 jours en octobre, je veux voir les départs garantis compatibles pour réserver en confiance.” “Quand je découvre Double Sens, je veux comprendre en 30s ce qu’est le tourisme équitable et lire des retours d’expérience.” Top tâches Trouver un voyage par date/pays/budget (départ garanti). Demander un devis sur‑mesure. Télécharger une brochure B2B. S’inscrire à la newsletter.

Collaboration UX ↔ UI & cohérence avec l’écosystème DIA Mapping DIA :

Mapping DIA : Couleurs : Primary, Success (départ garanti), Warning (dernières places), Surface/Border, Semantic. Typo : titres H1/H2/H3, body, méta; échelles responsives. Rayons & ombres : cards 12/16, hover + elevation. Motion : 150–200ms ease‑out pour hover/accordéon, 250ms pour modales. Handover : Storyboard de states (hover/pressed/disabled/loading), tokens documentés, exports d’icônes SVG optimisés, redlines Figma Inspect. Dév : pairing hebdo UI/Front pour s’assurer des détails (breakpoints, tailles cibles tactiles, contraste).

Contenus & micro‑copy

Promesse courte en hero (“Partez pour un voyage… qui a du sens !”). Labels normalisés : “Départs garantis” (éviter synonymes), “Vols inclus”, “Dernières minutes”. CTA : verbe d’action concret (Rejoindre ce départ, Voir les dates, Décrire mon projet). Preuve sociale : “Nos voyageurs en parlent” + métrique (si disponible) + lien vers page d’avis. Confiance : mentions de l’impact local, années d’expérience, certifications s’il y a lieu.

Create a free website with Framer, the website builder loved by startups, designers and agencies.