Le contexte
Manuel Huynh, photographe professionnel depuis plus de trente ans à Toulouse, propose des stages photo individuels : un ou deux élèves, un thème par demi-journée, pour apprendre à régler son appareil et sortir du mode automatique. Il souhaitait un site qui présente ses stages, prenne les réservations et les paiements à sa place, et qui reflète son expertise et sa personnalité.
Le défi
Deux exigences à tenir ensemble. Côté image, éviter le gabarit de réservation anonyme : le site devait avoir une identité forte, une âme, tout en restant simple et rassurant pour quelqu'un qui hésite à s'inscrire. Côté technique, un site de réservation touche à l'argent et aux données personnelles : disponibilités, paiements, remboursements, annulations, e-mails, RGPD. Et le tout devait rester pilotable à 100 % par le client, sans appeler un développeur pour changer un prix, fermer une semaine ou publier un article.
La solution apportée
Une application Next.js complète, sans CMS tiers, adossée à PostgreSQL. Le visiteur choisit sa formule, son stage et son créneau sur un calendrier de disponibilités en direct, puis paie par carte dans un formulaire Stripe intégré ; le montant est recalculé côté serveur, le statut ne change que par un webhook signé, et le créneau est retenu le temps du paiement. Chaque client reçoit un lien personnel pour gérer sa réservation, sans créer de compte. De l'autre côté, un back-office sur mesure donne à Manuel la main sur tout : agenda, réservations, remboursements, bons cadeaux, mais aussi chaque texte, photo, prix, FAQ, article de journal et balise SEO, avec brouillon, aperçu privé et publication en un clic. L'accès est protégé par mot de passe, double authentification obligatoire, clé d'accès et invitations, chaque action sensible est journalisée, les photos vivent sur Cloudflare R2, les sauvegardes sont chiffrées et la clé de déchiffrement reste hors du serveur. L'ensemble est protégé par une CI (qualité, secrets, CodeQL) et déployé automatiquement. Les données visibles dans les captures du back-office sont fictives.
Fonctionnalités clés
- Catalogue de stages et page détaillée par stage, avec programme, déroulé et démonstration interactive des réglages
- Réservation en ligne : durée, stage, date sur calendrier de disponibilités en temps réel, paiement par carte
- Paiement Stripe intégré au site (Payment Element), confirmation signée par webhook
- Créneau retenu pendant le paiement, libéré automatiquement s'il n'est pas réglé
- Lien personnel sécurisé pour consulter ou reporter sa réservation, sans compte client
- Politique d'annulation appliquée automatiquement, remboursement total ou partiel depuis l'admin
- Bons cadeaux envoyés tout de suite ou à la date choisie par e-mail
- E-mails de confirmation, de rappel avant le stage et de bon cadeau
- Agenda : jours et demi-journées ouverts ou fermés, semaine type, fermetures de période
- Tableau de bord : chiffres du mois, prochains stages, demandes à traiter
- Journal avec éditeur riche, catégories, recherche, flux RSS et données structurées
- Aucun texte codé en dur : pages, stages, tarifs, FAQ, avis, photos et SEO modifiables depuis le CMS
- Brouillon, aperçu privé et publication en un clic, saisie sauvegardée en continu
- Comptes sur invitation, double authentification obligatoire, clé d'accès (passkey), journal d'activité
- Newsletter sans publicité avec désinscription en un clic, mesure d'audience facultative soumise au consentement
- Conformité RGPD : consentement aux cookies, conservation limitée, export et purge des données
- SEO complet : balises par page, sitemap, JSON-LD, llms.txt éditable
- Sauvegardes chiffrées quotidiennes, déploiement automatique, HTTPS
Stack technique
En images
Version mobile
Design et conversion
Manuel Huynh photographie depuis plus de trente ans et enseigne la prise en main de l'appareil en face à face. Un site de réservation générique aurait vendu des « stages photo » comme des centaines d'autres. Le design devait faire deux choses à la fois : montrer d'emblée qu'on s'adresse à un artisan de l'image, et lever les doutes d'un débutant qui hésite à se lancer. L'identité s'appelle « Rose de Toulouse, fait main » : la clarté des pages d'expériences d'Airbnb et des sites de réservation d'activités comme Manawa, avec la main de Manuel dessus. Chaque choix ci-dessous répond à une question du visiteur, et sert autant l'image du site que la réservation.
Identité
Le rose de Toulouse : une couleur qui dit où l'on estUne couleur qui ancre le site dans sa ville et signale où agir.
Le rose est celui de la brique toulousaine. Il ancre le site dans sa ville, ce qui compte pour un stage où l'on se retrouve en personne, et il écarte le noir et blanc attendu d'un site de photographe, plus froid, pour une teinte qui donne envie de venir. Il est réservé aux actions (bouton, sélection, lien), jamais à la décoration.
Ce que ça apporteEsthétique : une identité reconnaissable en une seconde, chaleureuse. UX et vente : le rose signifie « on peut agir ici », donc l'œil trouve le bouton sans effort, sur une page blanche où rien d'autre ne lui fait concurrence.
Le jaune surligneur : guider sans crierUn surligneur plutôt que des badges : la hiérarchie se lit d'un regard.
Le jaune n'apparaît que sous un mot clé (« à votre rythme »), sous un lien, ou en ruban qui tient une photo. Comme un surligneur sur une feuille de cours, il dit « retenez ceci » sans ajouter de bloc, de bandeau ou de badge.
Ce que ça apporteEsthétique : le duo rose et jaune est vif sans être criard, car chaque couleur a un rôle unique. UX : la hiérarchie se lit en balayant la page, ce qui permet de comprendre l'offre en quelques secondes, même sur mobile.
Des épreuves collées plutôt que des vignettesLes photos, preuve de l'expertise, comme des tirages tenus en main.
Les photos sont des tirages légèrement penchés, avec leur ruban jaune, comme sur une planche de travail. La matière première d'un photographe est l'image : la montrer comme un objet qu'on tient en main raconte son métier mieux qu'une grille de vignettes alignées.
Ce que ça apporteEsthétique : de la vie et du relief sur un fond blanc, sans surcharge. UX : l'œil va aux photos, qui sont la preuve de l'expertise, et le côté « fait à la main » installe une relation de proximité avant même le premier contact.
Une typographie qui change de voix selon le rôleUne police par rôle : information, conseil de Manuel, donnée.
Un titre gras et serré (Bricolage Grotesque) pour affirmer, une grotesque sobre (Instrument Sans) pour lire longtemps, une écriture manuscrite (Caveat) pour les annotations et les légendes, une mono (DM Mono) pour les chiffres et les étapes, une signature pour conclure. Chaque police a un seul emploi : le visiteur sait d'instinct si une ligne est une information, un mot de Manuel ou une donnée.
Ce que ça apporteEsthétique : un site éditorial qui a une voix, loin du gabarit. UX : on distingue d'un coup d'œil le contenu (lisible) de la note personnelle (manuscrite), et les chiffres en mono restent faciles à comparer.
Les réglages de la photo sur la carte du stageLe jargon du métier devient un repère, et une démo à essayer.
Chaque stage affiche sa photo d'exemple avec ses réglages (f:4 · 1/250 · ISO 200). C'est le langage du public visé : ceux qui hésitent savent qu'ils vont apprendre ces mots-là, ceux qui connaissent un peu reconnaissent un professionnel. La démonstration « Essayez avant de venir » pousse l'idée plus loin : on bouge un curseur et on voit l'effet d'un réglage.
Ce que ça apporteUX et vente : le visiteur comprend le contenu d'un stage sans lire un programme, et il a déjà commencé à apprendre, la meilleure preuve de ce que fait Manuel. Esthétique : le jargon devient un élément graphique plutôt qu'une barrière.
Réservation
Une carte de réservation en billet, toujours sous les yeuxToujours visible, un seul bouton, un total en direct.
Sur grand écran, la carte reste collée à droite pendant le défilement : prix de départ, durée, total en direct, un seul bouton « Choisir ma date », comme sur une page d'expérience Airbnb. Elle prend la forme d'un billet à découper, avec sa ligne pointillée et ses échancrures. C'est le moment où l'on décide de payer, et un billet dit « votre place est réservée » avant le premier clic.
Ce que ça apporteEsthétique : un détail ludique, cohérent avec le reste, qui rend un formulaire désirable. UX et vente : le visiteur n'a jamais à chercher comment réserver, la carte se distingue du texte autour, et le total se met à jour sous ses yeux.
Sur mobile, une barre d'action collée en basLe prix et l'action à portée du pouce, tout le temps.
Le prix à gauche, « Choisir ma date » à droite, toujours à portée du pouce, comme sur Airbnb ou Manawa. Elle remplace une barre d'onglets : la navigation passe par un bouton « Menu » dans l'en-tête, pour libérer le bas de l'écran à l'action.
Ce que ça apporteUX et vente : sur téléphone, le visiteur n'a jamais à remonter la page pour réserver, et le prix reste visible pendant qu'il lit. Esthétique : un écran dégagé, avec une seule action mise en avant.
Un prix clair et des doutes levés au bon endroitTout est dit avant de cliquer, les doutes sont levés au bon moment.
120 € la demi-journée, 210 € la journée, +60 € pour venir à deux : tout est affiché avant de cliquer. Sous le bouton : paiement sécurisé et annulation gratuite jusqu'à 7 jours avant. Plus loin : un à deux élèves maximum, tous niveaux, n'importe quel appareil, que faire s'il pleut. La FAQ répond avant que la question ne soit posée.
Ce que ça apporteUX et vente : un prix transparent rassure et évite l'abandon à la dernière étape ; chaque réponse arrive au moment où le doute apparaît. Esthétique : du texte court en notes manuscrites, pas de pavés juridiques.
Un parcours en six étapes, une question par écranUne décision par écran, avec une barre de progression.
Durée, stage, date sur un calendrier de disponibilités en direct, coordonnées, paiement par carte. Une barre de progression montre où l'on en est. Le créneau est retenu pendant le paiement, et la confirmation arrive par e-mail avec un lien pour gérer sa réservation, sans compte à créer.
Ce que ça apporteUX et vente : chaque écran n'a qu'une décision, donc moins d'hésitation et moins d'abandon, notamment sur mobile. Esthétique : des écrans aérés, un rythme calme qui accompagne l'acheteur.
Au-delà de la page
Offrir un stageUn second motif d'achat sur le même parcours.
Les bons cadeaux, que le bénéficiaire date à son rythme, ouvrent un deuxième motif d'achat : on offre un stage au lieu de le réserver pour soi. Le même parcours sert aux deux cas, avec un simple interrupteur « C'est pour offrir ? ».
Ce que ça apporteVente : une seconde porte d'entrée vers le même produit, sans page de plus à maintenir. UX : pas de nouveau parcours à apprendre pour celui qui offre.
Un site qui nourrit les deux activitésLe journal attire, la passerelle relie les deux activités.
Le journal (diaphragme, vitesse, choix d'un premier appareil) répond aux recherches des débutants et conduit vers le stage adapté. Une passerelle relie aussi les stages et le site de portraits du même photographe, avec un paramètre de suivi pour mesurer d'où viennent les demandes.
Ce que ça apporteVente : le contenu utile attire les bons visiteurs, puis les amène à réserver. UX : le lecteur trouve la suite logique de sa lecture au lieu d'une impasse.
La confiance se construit dans les détailsContrastes, légèreté, aucun pistage : de la confiance avant de payer.
Chaque couleur et chaque bord de champ est mesuré selon les contrastes WCAG, et la police manuscrite n'est chargée que dans une seule graisse pour alléger le chargement. Le bandeau « Ici, pas de pistage » dit en une phrase qu'aucun cookie de mesure ni de publicité n'est posé sans accord.
Ce que ça apporteUX : moins de visiteurs bloqués, une lecture possible au soleil ou sans voir les couleurs, un chargement plus vif sur mobile. Vente : le visiteur sait qu'il n'est pas une cible publicitaire avant de laisser ses coordonnées et sa carte.
Le back-office
Agenda, réservations, paiements, remboursements, bons cadeaux, articles du journal, textes, photos, tarifs, FAQ et SEO : tout se pilote depuis une administration pensée pour un photographe, pas pour un développeur. Brouillon, aperçu privé, puis publication en un clic ; la saisie est enregistrée au fil de la frappe, et l'ensemble reste utilisable depuis un téléphone. Les captures ci-dessous montrent le vrai back-office avec des données fictives.
Back-office sur mobile
Aujourd'hui
Le site est en ligne : une identité reconnaissable au premier regard, un parcours de réservation pensé pour rassurer et convertir, et un photographe qui gère seul son agenda, ses réservations et son contenu.