Concevoir la page d'accueil d'un programme qui aide les hôtes en location courte durée à devenir une vraie entreprise, et conduire des visiteurs méfiants jusqu'à un appel gratuit.
Une landing page complète, du premier écran à la réservation d'un appel, livrée en réponse à un exercice de recrutement.
La réservation commence dès le hero, en cinq étapes sans effort. Le parcours est pensé pour le pouce sur mobile, avec des contrastes vérifiés. Il s'agit d'un exercice : la page n'a pas été mise en ligne ni mesurée, d'où le plan de test en bas de page.
Flex Academy est le nouveau programme des fondateurs de The Flex et de Base360. J'ai conçu sa page d'accueil dans le cadre d'un exercice de recrutement.
Le public : des hôtes ambitieux, pressés et méfiants envers les formations de « gourous ». L'objectif : qu'on comprenne en 5 secondes à qui s'adresse la page, qu'on lui fasse confiance en 30 secondes, et qu'on puisse réserver un appel à tout moment.
J'ai choisi de parler d'abord à l'hôte qui gère 1 à 3 logements et veut en faire une entreprise. C'est le public le plus large, celui par lequel les fondateurs ont eux-mêmes commencé, et ce sont les futurs clients de Base360.
Le brief demandait quatre questions pour préparer chaque appel. Un formulaire de quatre champs, c'est un effort : on le remet à plus tard. J'ai donc transformé ces questions en cinq petites étapes, dans une carte posée directement sur la photo du hero.
Une question par écran, un geste par réponse. Dès qu'on choisit, la carte passe toute seule à l'étape suivante. Le budget est facultatif, et on explique pourquoi on le demande.
L'appel se fait en visio : le lien arrive par email, donc aucun numéro de téléphone n'est exigé. Ce public craint d'être relancé par un commercial. Ceux qui préfèrent le téléphone peuvent ajouter leur numéro en un clic.
Le compromis : une étape de plus qu'un formulaire classique, mais chaque étape se fait sans effort. Essayez le parcours ci-dessous.
For short-term rental hosts
Grow your rentals
into a real business.
A 12-week programme for hosts ready to grow, with the people who built The Flex beside you at every step.
Prefer to start on your own? Get the STR scaling checklist
The one we use at The Flex. Email only, no calls.
Comme le site de The Flex, la page s'ouvre sur un vrai lieu. Elle alterne ensuite des sections photo, qui font voyager, et des sections calmes, faites pour lire. Elle commence le jour, sur Lisbonne, et se termine au crépuscule, là où l'on réserve.
Chaque section répond à la question suivante que se pose un visiteur méfiant : pour qui c'est, puis-je leur faire confiance, comment ça marche, combien de temps ça me prend. Et parce que ce public se méfie des promesses trop belles, une section dit clairement pour qui le programme n'est pas fait.
Le logo de The Flex se termine par un point. Base360 fait circuler un petit point dans la présentation de son produit. Flex Academy donne à ce point un rôle : montrer où l'on en est. On le retrouve dans le logo, sur la ligne de progression de la réservation, dans la méthode et au début de chaque bouton d'appel.
C'est la seule couleur chaude du site. Tout le reste est vert, crème ou neutre : le point est donc toujours la première chose que l'œil trouve.
Sur ordinateur, on voit tout le chemin d'un coup. Sur mobile, on le parcourt une étape à la fois : les cinq cartes de la méthode deviennent un carrousel qu'on fait glisser, et le point devient sa barre de progression.
Des flèches permettent aussi d'avancer sans glisser, pour le clavier et les technologies d'assistance. Et une barre fixe en bas de l'écran garde la réservation à portée de pouce.
Photo: UnsplashWeeks 1–2Which flats to take, and which to walk away from.
Photo: UnsplashWeeks 3–4Agreements owners say yes to, and that protect you.
Photo: UnsplashWeeks 5–7Cleaning, check-ins and messages that run without you.
Photo: UnsplashWeeks 8–9Who to hire first, and how to hand over.
Image: Base360Weeks 10–12Pricing with data, then deciding when to add units.
Un site que tout le monde peut utiliser inspire confiance. Contrastes vérifiés, focus clavier visible, erreurs expliquées en mots et pas seulement en rouge, sous-titres sur les vidéos, respect des réglages « réduire les animations » et « réduire la transparence », et un anglais simple pour un public souvent non anglophone.
Quatre composants, construits une fois avec tous leurs états, servent tous les écrans.
Un test des 5 secondes : montrer le hero à quelques hôtes et leur demander « À qui s'adresse cette page ? ». S'ils ne savent pas répondre, la page échoue avant tout le reste.
Puis un test A/B entre la carte de réservation dans le hero et un simple bouton, pour mesurer combien de visiteurs commencent et terminent chaque étape.
Contact
and base360