Logo Cyprien Castells
FR / EN

La Pradella

Une maison d'hôtes familiale en Ardèche Verte, un site WordPress daté, et des réservations qui filaient chez des plateformes à commission. Un site refondu pour reprendre la réservation en direct.

Année
2026
Rôle
UX/UI & Intégration
Client
Maison d'hôtes, Préaux (07)
Contexte
Freelance, auto-entreprise
Lien
La Pradella, page d'accueil du site vitrine sur ordinateur portable

Le Contexte

Un projet qui en cachait deux

La Pradella, c'est une maison d'hôtes familiale à Préaux, en Ardèche Verte. Olivier et Edwige la tiennent depuis 2007 : quatre chambres, une piscine, une table d'hôtes et six mille mètres carrés de jardin. Photographes et artisans du bois tous les deux, ils font aussi vivre un atelier de menuiserie d'art, où naissent cadres en vieux bois de grange, plateaux et luminaires.

Au départ, ils ne me demandaient qu'une chose : une boutique en ligne pour l'atelier, pour vendre au-delà du dépôt-vente et des clients de passage. Mais dès le premier rendez-vous chez eux, l'autre besoin m'a sauté aux yeux. Leur site de maison d'hôtes, un vieux WordPress inadapté au mobile, méritait lui aussi une refonte. Je leur ai proposé les deux. Ils ont dit oui.

J'ai livré les deux sites en parallèle. Cette étude de cas porte sur le site vitrine.

C'était mon premier projet en freelance, sous auto-entreprise. Tout est passé par moi : le cadrage, le devis, la conception, l'intégration, la mise en ligne.

La Découverte

Écouter sur place avant de dessiner

Avant de dessiner quoi que ce soit, j'ai écouté. Un rendez-vous chez eux, mes questions préparées. Puis un tour de l'existant : l'ancien site, mais aussi leurs pages sur les plateformes et tous les avis laissés au fil des ans.

L'ancien site accumulait les angles morts. Pas de vraie version mobile. Des photos sous-exploitées. Une table d'hôtes et des activités presque invisibles. Et un formulaire si peu engageant que la réservation filait vers Gîtes de France ou Booking, commissions comprises.

Deux constats ont tout réorienté. D'abord, Olivier et Edwige sont photographes : leurs images étaient déjà superbes, il n'y avait qu'à leur laisser de la place. Ensuite, les plus belles vues, les panoramas et le domaine vu du ciel, ne se trouvaient nulle part. Alors que c'est exactement ce qu'on vient chercher ici.

Edwige a ajouté un point important : la piscine n'est pas chauffée, la table d'hôtes se réserve à l'avance. Autant le dire clairement, pour éviter les déceptions à l'arrivée. On a écrit les contenus ensemble, au plus juste.

Le Parti Pris Visuel

Laisser la photo parler

Les photos étaient la plus grande force du projet. J'ai donc tout construit autour d'elles : un hero plein écran, de grandes galeries, une interface qui s'efface pour les laisser briller. J'ai même réservé une section entière aux plus belles vues, le domaine vu du ciel, ce qu'on veut voir avant de réserver.

Pour les couleurs, je suis parti d'une intuition : des tons terreux et chauds, qui répondent à la pierre et au jardin. De l'olive, de la terracotta, du sable, de la crème. J'ai écarté d'emblée le vert sapin et le bois vernis, trop attendus pour un gîte de campagne.

À partir de ces quelques teintes, j'ai décliné chaque couleur en variantes claires et foncées, de quoi gérer proprement les fonds, les survols et le texte. Un serif chaleureux pour les titres, un sans-serif lisible pour le reste. Puis j'ai tout figé, couleurs, tailles et composants, dans un système réutilisé sur chaque page. Rien n'est rechoisi au coup par coup : c'est ce qui donne au site son unité.

Design system : palette olive et terracotta, typographies et composants

L'Architecture

Se projeter, se rassurer, demander

J'ai structuré le site autour des trois questions que se pose un voyageur, dans cet ordre :

Se projeter. Quatre chambres, quatre fiches. Surface, couchages, prix de départ, la vue par la fenêtre. La Suite et sa terrasse plein sud, La Piscine au bord du bassin, L'Hirondelle de plain-pied, Le Lavoir face aux Alpes. Chacune a sa personnalité, décrite avec des mots simples, jamais en langage d'agence.

Se rassurer. Les avis, l'accès, les prix affichés sans détour. Quarante-neuf avis, 4,8 de moyenne : tout existait déjà, mais servait les plateformes, pas eux. Je l'ai remonté dès le premier écran.

Demander. Un seul geste : la demande de disponibilité. Accessible partout, à deux clics maximum de n'importe quelle page.

L'atelier a sa propre page sur le site vitrine. Elle raconte le travail d'Olivier et Edwige, et renvoie vers la boutique. C'est le pont entre les deux sites, et entre leurs deux publics.

Arborescence du site : accueil, sept rubriques et quatre fiches chambres

La Réservation en Direct

Reprendre la main sur la marge

C'était l'objectif le plus concret. Chaque réservation via une plateforme coûte une commission. Pas question de couper les plateformes, mais de donner au visiteur une bonne raison de réserver en direct.

Tout le parcours mène au même endroit : « Demande de disponibilité ». Téléphone, e-mail ou formulaire, réponse sous 24 h, sans engagement. Aucun lien ne renvoie vers une plateforme : leurs notes sont là comme preuve, pas comme sortie de secours.

Les tarifs sont affichés en clair, par chambre et par saison, table d'hôtes comprise. Le visiteur connaît le prix avant même d'écrire. Autant d'allers-retours en moins.

Sur mobile, une barre d'action reste toujours en bas de l'écran : appeler, ou demander les disponibilités. L'ancien site ignorait le mobile. C'est pourtant là qu'on cherche une adresse pour le week-end prochain, en déplacement, sans patience pour fouiller un menu.

Parcours de réservation en cinq étapes, de l'accueil à la demande envoyée

Bilan

Ce que j'en retiens

La demande de départ ne parlait que de l'atelier. Le vrai besoin, une vitrine qui ne dépende plus des plateformes, personne ne l'avait formulé. Il est apparu en discutant sur place. Élargir le projet n'était pas une vente en plus : c'était la condition pour que la boutique trouve son public.

Sur ce premier projet en freelance, c'est le cadrage qui a le plus compté. Une heure de questions chez eux a décidé de presque tout le reste. Le mieux, maintenant, c'est d'aller voir le résultat.

Voir le site Voir l'étude Figma