← Retour aux projets

ÉTUDE DE CAS 01 · SITE CLIENT EN LIGNE

Clarifier trois offres sans perdre l’identité d’un lieu.

La Borboutoise réunit une salle de réception et deux gîtes dans une ferme familiale à Thimister. Le travail de conception a consisté à rendre ces offres distinctes, lisibles et immédiatement reliées aux informations pratiques.

Projet
Site vitrine client
Mon rôle
UX/UI et front-end
Périmètre
Structure, interface, responsive
Preuve
Site accessible en production
Comparaison de la page d’accueil La Borboutoise sur desktop et mobile
Même promesse, même action principale et même identité sur desktop et mobile.

01 · CONTEXTE ET PROBLÈME

Un seul lieu, trois offres à comprendre.

Le site doit présenter une salle de réception et deux hébergements, tout en donnant accès aux capacités, équipements, tarifs, informations d’accès, histoire du lieu et moyens de contact.

Le risque de conception était de traiter ces contenus comme un catalogue uniforme. Un visiteur devait au contraire pouvoir identifier rapidement l’offre qui correspond à son besoin, puis obtenir les informations pratiques sans perdre le contexte du lieu.

02 · RÔLE ET RESPONSABILITÉS

De la hiérarchie à l’interface livrée.

J’ai pris en charge la structuration de l’information, la conception UX/UI, la direction visuelle et l’intégration front-end responsive.

  • Hiérarchiser les contenus communs et spécifiques aux trois offres.
  • Définir un langage visuel cohérent avec le caractère rural et familial du lieu.
  • Conserver une proposition de valeur et une action principale lisibles sur mobile.
  • Transformer les contenus fournis en pages publiques utilisables.

03 · CONTRAINTES

Préserver l’authenticité sans sacrifier la clarté.

01

Offres liées

La salle et les deux gîtes appartiennent au même lieu, mais répondent à des besoins distincts.

02

Contenu visuel

Les photographies doivent donner le ton sans rendre le texte ou l’action illisibles.

03

Usage mobile

Les informations pratiques et le contact doivent rester accessibles sur un écran étroit.

04 · COMPRÉHENSION DU BESOIN

Partir des questions auxquelles le site doit répondre.

Le cadrage documenté repose sur l’inventaire du contenu client et des questions informationnelles visibles dans l’offre. Les entretiens ou tests utilisateurs n’ayant pas été archivés, ils ne sont pas présentés ici comme des preuves.

  • Qu’est-ce que le lieu propose ?Une salle et deux gîtes.
  • Quelle offre me correspond ?Des pages dédiées permettent de comparer capacités et équipements.
  • Combien cela coûte ?Les tarifs sont regroupés dans une entrée identifiable.
  • Comment poursuivre ?Le contact reste une destination explicite du parcours.

05 · ARCHITECTURE ET PARCOURS

Distinguer, comparer, puis contacter.

L’accueil introduit le lieu, puis oriente vers trois parcours d’offre. Les tarifs, l’histoire et le contact forment des repères transversaux. Le schéma ci-dessous reconstitue cette logique à partir de la navigation actuellement visible en production.

06 · DÉCISIONS UI ET RESPONSIVE

Faire comprendre le lieu avant de détailler l’offre.

DÉCISION 01

Donner la première place au lieu réel.

Une photographie plein cadre installe immédiatement le caractère de la ferme. Un voile sombre stabilise le contraste du titre, de la promesse et du bouton de contact.

Hero desktop de La Borboutoise avec photographie de la ferme, titre, description et bouton de contact
Le lieu, la promesse et l’action sont regroupés dans le premier écran.

DÉCISION 02

Conserver la hiérarchie sur mobile.

La version mobile simplifie la navigation, conserve le nom du lieu et place l’action principale avant le détail des offres. La composition change, pas l’ordre de décision.

Comparaison des versions desktop et mobile de La Borboutoise
Une composition normalisée permet de comparer les deux formats sans texte miniature isolé.

07 · DÉVELOPPEMENT ET COLLABORATION

Faire coïncider contenu, interface et comportement.

L’intégration front-end matérialise la hiérarchie définie en conception : navigation dédiée, pages d’offre, blocs de capacités et d’équipements, page tarifs et contact. Le périmètre technique détaillé n’est pas attribué ici faute de source projet versionnée dans ce portfolio.

La collaboration visible dans le livrable repose sur une séparation claire des apports : les informations et photographies décrivent l’activité du client ; mon rôle porte sur leur organisation, leur mise en forme et leur adaptation responsive.

08 · RÉSULTAT ET APPRENTISSAGES

Une preuve publique, sans métrique inventée.

Au 1er septembre 2026, le site est accessible en production. Il présente séparément la salle et les deux gîtes, documente leurs capacités et équipements, publie les tarifs, raconte l’histoire familiale et fournit les informations de contact.

RÉSULTAT OBSERVABLE

Un parcours complet est consultable en ligne.

La preuve porte sur le livrable et son contenu public, pas sur un impact commercial non mesuré.

APPRENTISSAGE

Une offre multiple exige d’abord une architecture nette.

L’identité visuelle devient plus persuasive lorsqu’elle soutient cette différenciation.

09 · ACCÈS AU SITE EN PRODUCTION

Voir la solution dans son contexte réel.

Le site peut évoluer après sa livraison. Cette étude distingue donc les choix présentés ici des contenus actuellement administrés en production.