Un studio de pole dance,
tout un écosystème.
De l'identité visuelle au site public, du back-office multi-utilisateurs au système de feedback interactif intégré : un projet mené de bout en bout, conçu pour rendre mes clients totalement autonomes sur leur outil de travail.
Un studio en pleine ouverture, besoin d'un outil clé en main.
Mes clients ont ouvert leur deuxième studio de pole dance après studiopolefitness.com (également créé par mes soins en vibe coding Claude Code). Ils avaient besoin d'un site vitrine élégant, d'un back-office pour gérer leur contenu sans dépendre d'un développeur, et d'une intégration propre avec leur logiciel de réservation Mindbody. Sans connaissances techniques, ils voulaient pouvoir publier un cours, modifier un coach ou ajuster les tarifs en autonomie totale.
- Aucune identité visuelle, juste une vision et un nom
- Aucune présence en ligne au moment où le studio ouvre ses portes
- Mindbody fournit un widget de réservation, mais aucune vitrine éditoriale
- Besoin de modifier prix, plannings, coachs sans toucher au code
- Communication client habituellement via Google Slides illisibles ou mails à rallonge
- Identité visuelle complète : logo, palette, typographie, ton éditorial
- Site public éditorial avec 11 pages éditables, optimisé mobile et SEO
- Back-office multi-utilisateurs avec permissions granulaires et 2FA
- Wizards 4 étapes avec preview live pour gérer coachs, cours, tarifs, workshops
- Widget feedback intégré : commentaires posés directement sur les pages
- Guide d'utilisation embarqué dans l'admin, mis à jour à chaque évolution
- Livraison en quelques semaines, du brief au go-live
Un univers éditorial, à la frontière du magazine et du studio chic.
Le brief : sortir des codes "salle de sport". Le studio voulait évoquer l'élégance, la précision technique, et le prestige des arts aériens. J'ai conçu une identité bâtie sur des contrastes forts (ink/cream), une typographie serif italique pour l'émotion, et un bleu accent vif pour la vivacité. Le résultat : une charte qui vit aussi bien sur le site que sur les supports print, les réseaux et la signalétique du studio.
Typographie éditoriale
DM Serif Display en italique pour les titres et les emphases — un clin d'œil aux magazines de mode. Montserrat en sans-serif pour la lisibilité du corps de texte. Le contraste serif/sans renforce la hiérarchie sans alourdir.
Palette contrastée
Trois couleurs cardinales : un noir profond, un crème chaud et un bleu électrique. Chacune a un rôle précis : structure, respiration, accent.
Ton de voix
Ni techno-bro ni body-positive caricatural. Le studio s'adresse à un public adulte qui veut progresser. Vouvoiement systématique, phrases courtes, emphases italiques pour souligner ce qui compte. Pas d'emojis dans les textes éditoriaux.
11 pages éditoriales, chaque pixel pensé.
Au-delà de la vitrine, chaque page est conçue pour convertir : présentation des studios et de leur ambiance, mise en valeur des coachs avec leurs spécialités, listing des cours par discipline, parcours de réservation guidé via Mindbody, FAQ avec recherche instantanée, page privatisation pour les événements. Le tout en mobile-first.
Chaque page pensée mobile-first.
Première fois chez nous ? On vous oriente.
Le pole, le cerceau, le pilates : autant de disciplines, autant de packs tarifaires. Pour un visiteur qui n'a jamais mis les pieds dans un studio, le choix est intimidant — et chaque seconde d'hésitation tue la conversion. J'ai conçu un mini-quiz de 3 questions, accessible depuis la page d'accueil et la page tarifs, qui aboutit à une recommandation personnalisée (cours conseillé + pack idéal) avec deep-link vers la bonne section du site.
Niveau
3 paliers émotionnels (jamais essayé / un peu / régulièrement) pour casser l'intimidation du débutant.
Discipline
4 choix dont un "Pas sûr·e — Conseillez-moi" qui ne stigmatise jamais l'indécision.
Fréquence
L'intention budgétaire formulée sans gêne : "juste tester", "quelques cours", "le plus possible".
- 3 questions · pas une de plus
- Empathie · zéro langage technique, zéro jugement
- Action · CTA vers le cours conseillé + la bonne ancre tarifs
- Refaisable · pas de cookie qui bloque l'exploration
- Mobile-first · tout passe sur l'écran sans scroll
Chaque page, une intention.
Des zooms sur des moments du site où l'attention au détail compte : la grille des coachs en magazine éditorial, le listing des cours par studio façon sommaire, la dualité claire/sombre des formules de privatisation, l'encart d'achat de crédits avec accroche en italique. Chaque section a été pensée pour servir une intention précise, pas pour remplir un gabarit.
Un admin pensé pour des non-développeurs.
Le back-office est le cœur de l'autonomie de mes clients. Chaque action courante (ajouter un coach, publier un cours, programmer une solde) passe par un wizard 4 étapes avec preview live. Pas de jargon, pas de champs énigmatiques. La preview se met à jour en temps réel pour refléter exactement ce que verra le visiteur. Multi-utilisateurs avec permissions granulaires : superadmin, admin standard, lecture seule.
Wizard 4 étapes avec aperçu live
Exemple appliqué à un pack tarifaire. Le formulaire est à gauche, l'aperçu de la card telle qu'elle apparaîtra sur le site est à droite, mis à jour à chaque frappe. Même logique pour les coachs, les cours et les workshops.
Un système de feedback directement intégré au site.
J'ai conçu un widget que mes clients utilisent directement sur le site en navigation. Ils cliquent n'importe où sur une page, écrivent un commentaire textuel ou dessinent sur la page elle-même pour pointer un détail visuel précis. Tous les retours arrivent dans mon back-office, géolocalisés sur la page concernée. Je les traite, je marque comme résolu, je réponds — un Trello, mais nativement intégré au produit.
Onboarding en clarté
À la première visite, une modale explique en 4 étapes comment annoter. Pas besoin de tutoriel externe.
Deux modes de feedback
Au clic sur le CTA bleu, choix entre commenter un élément précis (clic ciblé) ou dessiner librement pour annoter visuellement.
Pin résolu sur la page
Le feedback reste visible directement sur la page (pin coloré). Mes clients voient leurs retours, leur statut, peuvent ré-ouvrir.
Back-office À traiter
Chaque retour arrive dans l'admin avec URL, position en %, message, date, capture du contexte. Tri par statut, action en 1 clic.
Workflow Résolu / Ré-ouvert
Quand un retour est traité, il bascule dans l'onglet Résolus avec son historique. Réversible à tout moment.
- Texte ou dessin · 2 modes pour s'adapter au type de retour
- Géolocalisé · Position en % sur la page
- Contexte capturé · URL, device, viewport, date
- Workflow · À traiter → Résolu → Ré-ouvrable
- Mobile-first · Marche sur le téléphone comme sur desktop
Bullet-proof par design.
La sécurité d'un site qui héberge données clients et système de réservation n'est pas une option. Le projet a été conçu dès le départ avec une approche défense-en-profondeur : authentification forte, isolation des privilèges, hardening HTTP, monitoring. Le tout sans alourdir l'expérience utilisateur ou admin.
De zéro à en production.
Le mot de l'équipe.
Vibe-codé de A à Z avec Claude Code.
Tout le projet a été conçu et développé en pair-programming avec Claude Code. La direction produit, les arbitrages UX, l'identité visuelle et les décisions d'architecture restent humaines — l'IA accélère l'implémentation, refactore, teste, documente. Cette méthode m'a permis de livrer en quelques semaines ce qui aurait pris plusieurs mois en solo.
Projet en ligne · Production