Étude de cas BnB West Lyon : création d’un site avec agilité, IA et WordPress
Hey, salut !
Tu te demandes comment BnB West Lyon est apparu sur la toile ? Attache ta ceinture, je t’emmène dans les coulisses du chantier : un site WordPress piloté en mode agile et itératif, assisté par l’IA (GPT-4.1) et habillé d’une stack technique solide.
Entre recherches créatives, prompts farfelus et gestion organisée sur Notion, ce projet c’est un peu une histoire de rencontres : celle de la tech, de l’humain et de beaucoup d’impros.
Prêt à plonger dans l’aventure ? Prends ton café, installe toi confortablement, et on démarre !
Objectifs & Challenges
Le défi, c’était de créer un site web vitrine pour de la location courte durée, façon BnB West Lyon. Simple, claire, efficace : juste ce qu’il faut pour donner envie de poser ses valises !
Les logements sont déjà sur Airbnb, mais ici, le but c’est d’avoir sa propre ref, sa maison digitale à soi, chaleureuse et stylée.
Côté fonctionnalités, le cahier des charges était simplifié (enfin presque) :
Une gestion de contenus libre, simple et autonome.
Une seule langue : le français.
Une interface limpide, intuitive, où on ne se perd pas.
Un design minimaliste : on veut que les visiteurs se sentent chez eux.
Un bouton “Réserver” ultra-visible, sur chaque page (Call To Action anytime !).
La règle : jamais plus de trois clics avant d’arriver à la réservation. Fast and friendly.
On rassure : avis clients, mentions légales, politique de confidentialité, CGV, site sécurisé.
Et bien sûr, le fameux module calendrier de réservation, parce que sans lui, c’est juste une vitrine qui fait joli.
Bref, le challenge : donner envie, inspirer confiance, et rendre la réservation aussi simple qu’un sourire.
Solutions & Choix techniques
Après 22 mois d’intégration web sur Symfony, Twig et CSS natif chez Euronews, il était temps de remettre les mains dans le cambouis WordPress. L’idée ? Vérifier que je n’étais pas trop rouillé, retrouver le côté ludique et souple du CMS, et explorer un peu ce qui a changé.
WordPress, c’est du solide et du polyvalent. Côté front, j’ai choisi Elementor : envie de sortir du pur code, tester les limites du builder, observer le temps de prise en main et voir l’impact sur la prod. Spoiler : quand on vient du “tout intégré main”, ça secoue ! Mais c’est aussi un vrai terrain de jeu pour la créativité. Bon, côté code source, mieux vaut éviter d’inspecter le DOM généré (déprime garantie)… Ça reste un builder, pas du natif !
Impossible de lâcher la technique : le thème est sur mesure, histoire de garder la main sur le code et pouvoir bidouiller à volonté, surtout côté PHP POO et gestion des hooks.
Bref, un projet qui conjugue expertise, curiosité et envie d’expérimenter, avec une stack WordPress/Elementor qui réveille le webdesigner et challenge le développeur.
Mise à jour de la stack technique
Franchement, après 22 mois de sommeil technique, ma stack avait pris un sacré coup de vieux. Il était grand temps de dépoussiérer tout ça, de mettre en œuvre des solutions récentes et voir si je pouvais redompter Docker, ajouter ViteJS, sans finir en PLS devant mon terminal.
Du côté dev local, Windows 11 + WSL2 (Ubuntu), Docker Desktop pour tout containeriser, et un docker-compose.yml minimaliste mais efficace. Les données ? Bind mount direct à la racine du projet, histoire d’éviter les mauvaises surprises.
Backend : PHP, WordPress last version et tout frais, Composer pour les dépendances. Base de données ? MySQL classique, administrée via phpMyAdmin pour le côté « visualisation » dans son petit container bien rangé.
Niveau sécurité, pas de site sans HTTPS, même en local (vive les self certificates).
Front : thème WordPress maison avec du CSS natif sur la partie hors Elementor, genre le header, la navigation principale (pas de framework, c’est la diète), JS vanilla (et un soupçon de ViteJS pour le côté build moderne) et NPM pour les petits plus.
Tout ça versionné sur Git + GitHub, évidemment.
Objectif : une stack moderne, performante, sécurisée… et l’occasion de monter en compétences sans revenir en arrière. Bref, upgrade technique réussi !
UX/UI & Web Design
Pour le webdesign, j’ai misé sur la simplicité : une interface limpide et intuitive, où chaque visiteur navigue sans prise de tête. L’ambiance ? Minimaliste mais chaleureuse, avec un blanc dominant qui respire et des touches de couleur rappelant la charte des deux logements pour bien ancrer la marque. La typo sans-serif apporte la touche moderne, et les photos immersives donnent envie de poser ses valises dès le premier scroll.
Le maître mot, c’est la convivialité : beaucoup d’espace, des éléments arrondis, une hiérarchie claire et des sections bien organisées. La sécurité et la confiance sont au cœur du design : avis clients en avant, labels de fiabilité bien visibles, et des CTA clairs (“Réserver”, “Contacter”, “En savoir plus”) pour faciliter l’action. Bon j’ai pas révolutionner web non plus, mais je trouve ça clean.
L’accessibilité fait partie du package : contrastes travaillés, police lisible, navigation clavier basique et “skip to” pour fluidifier l’expérience.
Côté outils, je me suis appuyé sur un UI Kit simplifié pour garder une direction claire (nuancier, logo, titres, boutons, FontAwesome pour les icônes).
Figma Make m’a permis de prototyper et tester rapidement, d’ajuster chaque écran sans perdre de temps. La prise en main est intuitive : tout est modifiable à la volée, ce qui m’a vraiment aidé à affiner le design en quelques clics.
Base44 m’a servi à challenger mes choix, comparer facilement plusieurs variantes d’interface et sortir de ma zone de confort, histoire de pousser la créativité un peu plus loin. Pas de révolution graphique, mais un workflow efficace : des outils pour avancer vite, structurer les idées et obtenir des interfaces nettes, prêtes à l’emploi.
Bref, une trame solide pour concevoir un site qui donne envie de voyager… et de revenir.
Conception assistée avec l’IA (GPT-4.1)
Pour ce projet, j’ai voulu aller plus loin : et si l’IA pouvait devenir un vrai copilote de la conception ? Avec GPT-4.1 dans la boucle, l’intelligence artificielle est vite devenue un allié pour générer du contenu, structurer l’arborescence du site, et surtout débloquer les passages techniques quand ça coinçait (mais dis donc Jamy !). Et c’est franchement sympa aussi quand on est un “Landsome Cowboy Developer” : l’IA devient le partenaire idéal pour avancer vite, tester de nouvelles pistes, et rester libre de galoper d’une idée à l’autre.
Concrètement, l’IA m’a permis de :
Rédiger des textes clairs et accrocheurs, parfaitement adaptés à la cible et au ton souhaité.
M’assister sur les aspects techniques : clean code, config Docker & ViteJS, snippets PHP… Un vrai gain de temps pour explorer, tester des solutions récentes et améliorer mes connaissances.
Challenger les nouvelles pratiques en sécurité et optimisation web, histoire de rester à la page et d’éviter les failles oubliées.
Offrir une relecture et un regard critique : comme avoir un code reviewer dispo 24/7, toujours prêt à suggérer des améliorations et booster la qualité en continu.
L’IA n’a pas tout fait, mais elle a joué le rôle d’un assistant de choc : suggestions, corrections, et parfois des idées inattendues qui ont dopé la créativité et accéléré le process.
Au final, c’est un vrai gain d’efficacité et d’inspiration : de l’aide, des idées, et un projet qui avance plus vite… sans jamais perdre le contrôle.
Gestion de projet itérative avec Notion
Pour orchestrer tout le projet, j’ai misé sur une gestion agile et itérative… mais en mode solo ! Notion m’a servi de tableau de bord : l’outil idéal pour centraliser les idées, garder les guidelines sous la main, et noter tous les idées utiles, du wireframe à la doc technique.
Chaque étape (design, développement, contenus, tests…) était rédigé mais sans tickets ni deadlines : tout était organisé pour avancer à mon rythme, selon l’inspiration du moment. La structure restait flexible : je pouvais itérer sur les POC, améliorer au fil des retours et ajouter des idées au gré des trouvailles, sans pression.
Toutes les ressources étaient rassemblées au même endroit : UI Kit, arborescence, inspirations, liens Airbnb, doc technique, wireframes Figma… accessibles en un clic, rien que pour moi.
Notion a vraiment joué le rôle de « guide du mini projet ». Une organisation intuitive, vivante, qui permet d’itérer efficacement, d’adapter « le plan » en solo et d’avancer sans jamais perdre le fil.
Optimisations
Côté performance, j’ai joué avec le cache, séparer et minifier les styles, préparer le « fallback font », compressé les images avec du webp, et peaufiné le .htaccess pour booster la rapidité et limiter les accès indésirables.
Sécurité et accessibilité : HTTPS partout, protections anti-bruteforce, mots de passe costauds, permissions des fichiers… et tout ce qui expose la sécurité de WordPress.
Enfin, les fondations SEO sont posées : balises méta bien renseignées, structure claire, sitemap, titres accrocheurs et contenu optimisé pour les moteurs. De quoi assurer une belle visibilité, tout en gardant une expérience utilisateur au top.
Bref, un site rapide et sécurisé, prêt à briller et à rassurer, que ce soit pour les voyageurs… ou pour Google.
Résultats
Le site vient tout juste d’être publié, et la phase d’optimisation bat encore son plein. Il est donc un peu tôt pour tirer un 1er bilan de performances, fréquentations et retours utilisateurs.
Côté vitesse, les premiers tests Lighthouse / Web Core Vitals sont prometteurs : chargement rapide, scores élevés sur mobile comme sur desktop, et une expérience fluide pour les visiteurs. Il reste une petite marge de progression sur les « Performances », des opportunités : CDN, WP loadings order, preloads…
Le référencement naturel s’améliore à chaque itération : les contenus sont affinés. Les retours utilisateurs nous permettront d’ajuster l’expérience au plus près des attentes réelles.
Prochaines étapes :
Mise en place d’un monitoring régulier
Optimisation continue des contenus
Itération constante, amélioration progressive, pour faire grandir le projet !
Conclusion & Leçons
Cette aventure BnB West Lyon m’a prouvé que la réussite d’un site, c’est avant tout une question d’équilibre : technique, créativité, organisation et amélioration continue.
WordPress reste une très bonne solution pour des sites vitrines : flexible, robuste, et toujours intuitif. Mon conseil ? Miser sur une stack adaptée, itérer souvent, et ne rien laisser au hasard côté expérience utilisateur.
L’IA a été un vrai boosteur : pour gagner du temps, challenger les idées, ou simplement débloquer une impasse technique. Mais rien ne remplace l’œil humain pour ajuster, relire, et donner le ton juste : l’IA accompagne, mais c’est toi qui pilote.
Notion m’a permis d’organiser le projet sans me perdre et avec rapidité et simplicité (plus qu’un Kanban ou Gantt). Un bon tableau de bord, quelques guidelines, et des rappels : pas besoin de mille outils pour garder le cap, surtout quand on avance à son propre rythme.
Si tu te lances dans une refonte WordPress, retiens :
Avance étape par étape, teste beaucoup, améliore en continu.
Prends soin du design, de la stack, des contenus et de la sécurité, car tout passe par la confiance.
N’hésite pas à t’entourer de bons outils, IA comprise, mais garde la main sur le projet.
Vous avez un projet web ? Je reste disponible sur Lyon et sa métropole, ou à distance Contactez-moi pour en parler et booster votre présence digitale ! A bientôt !
