Six offres. Trois parcours. Une plateforme claire.
Pour Cintia Németh, nous développons une plateforme bilingue qui réunit en un seul endroit ses offres d'entraînement, de conseil et de produits. Les clientes potentielles peuvent comparer les prestations, consulter les prix et trouver le bon parcours vers la réservation ou l'achat.
- Cliente
- Cintia Németh
- Secteur
- Santé & fitness
- Langues
- Hongrois, Anglais
- Statut
- En cours de réalisation
- Volume du projet
- CHF 5'000–10'000
- Site web
- ciklusfit.hu
- Stratégie et architecture de l'information
- Design UX/UI et système de design propre
- Développement web sur mesure
- Réalisation multilingue
- Gestion du consentement et intégrations
- Hébergement, déploiement et suivi technique
Les contenus spécialisés, les prix et les images proviennent de la cliente.
Budapest, Hongrie
Suivi du projet depuis Alt St. Johann (CH‑SG). Localisation du projet : Budapest.
Une offre développée avait besoin d'une structure numérique centrale
Cintia Németh est personal trainer, conseillère en nutrition et en mode de vie ainsi que formatrice en équilibre du cycle. Jusqu'ici, ses prestations étaient surtout présentées sur Instagram et Facebook. Il manquait toutefois, pour les six offres différentes, une vue d'ensemble centrale et durablement trouvable.
Les personnes intéressées devaient souvent demander directement les prix, le contenu des prestations et les possibilités de réservation. Cela entraînait un travail manuel récurrent et rendait la comparaison des offres plus difficile.
- 01Présenter clairement six offres
- 02Rendre comparables prestations, prix et conditions
- 03Proposer pour chaque offre le parcours de réservation ou d'achat adapté
- 04Proposer deux versions linguistiques autonomes
- 05Intégrer contenus personnels et informations spécialisées
- 06Intégrer les services externes dans le respect de la protection des données
- 07Ajouter de nouvelles offres sans refonte fondamentale
Des prestations différentes exigent des parcours de réservation différents
Les six offres se distinguent par leur contenu, leur durée, leur structure tarifaire et leur processus de réservation. Le défi consistait à associer une structure d'information commune à des parcours de réservation individuels.
- Formats différents
- Entraînement en présentiel et en ligne, conseil, programmes de cycle et produits numériques exigent des informations différentes. Alors que les forfaits et les rendez-vous priment pour les entraînements, un conseil commence souvent par un premier entretien.
- Trois parcours de réservation et d'achat
- Selon l'offre, la plateforme mène au choix du forfait, au premier entretien ou à l'achat direct. Chaque parcours est adapté à la prestation concernée.
- Multilinguisme et services externes
- Le hongrois et l'anglais disposent de leurs propres URL indexables. Les services de rendez-vous et de statistiques soumis à consentement ne se chargent qu'après le consentement requis.
Un système pour des offres et des processus différents
La plateforme est encore en cours de réalisation. Les données sur la repérabilité, les demandes et les réservations ne pourront être collectées qu'après la mise en ligne.
Une structure commune pour six offres différentes
Les six offres suivent la même structure d'information : trouver l'offre, comparer prestations et prix, choisir l'étape suivante. Les contenus et les parcours de réservation restent individuels.
- GroupeMouvement et entraînementOffres: Entraînement en présentiel et en ligneÉtape suivanteChoix du forfait
- GroupeConseil et accompagnement du cycleOffres: Conseil en nutrition et mode de vie, programme de cycleÉtape suivantePremier entretien
- GroupeProduits numériquesOffres: E-book, vidéo d'entraînementÉtape suivanteAchat direct
Parcours utilisateur
Les personnes intéressées arrivent à l'offre adaptée via la page d'accueil, les moteurs de recherche ou les réseaux sociaux.
Intérêt
Accès par différents canaux.
Comparer les offres
Consulter prestations, prix et conditions.
Choisir l'étape suivante
Premier entretien ou choix du forfait.
Réservation ou checkout
Finaliser le processus adapté.
Confirmation
Recevoir une confirmation de réservation ou une réponse.
Décisions structurelles centrales
- Trois entrées au lieu de six équivalentes
- Le regroupement facilite l'orientation et la comparaison des différentes offres.
- Parcours de réservation individuels
- Selon la prestation, l'étape suivante mène au choix du forfait, au premier entretien ou à l'achat direct.
- URL de langue autonomes
- Le hongrois et l'anglais disposent de leurs propres URL indexables. Canonical et hreflang relient les versions linguistiques.
- Consentement avant la prise de rendez-vous externe
- Un composant local informe sur l'intégration. Le service externe n'est chargé qu'après le consentement requis. Le reste du site reste utilisable indépendamment.
Du wireframe au système de design
Le wireframe définit pour chaque offre le classement, l'image, les caractéristiques, les prix et l'étape suivante. La réalisation reprend les mêmes composants avec images, couleur et un parcours clair par forfait.
Des surfaces de base chaleureuses, du vert sauge et du vert forêt créent une mise en forme calme. Couleurs, espacements, rayons et états sont tenus comme valeurs de design réutilisables, afin que les nouvelles pages restent cohérentes et faciles à étendre.
- #FDFBF8#FDFBF8Surface de baseSilk White
- #F3F7F3#F3F7F3Surface teintéeVery Light Lichen
- #71877A#71877ACouleur de marqueMain Brand Sage
- #55685D#55685DSurface heroHero Sage
- #2D3932#2D3932TitresDark Forest Sage
- #26211D#26211DTexte courantDeep Charcoal
- #544D46#544D46Texte secondaireWarm Grey
- #E8E4DB#E8E4DBFilets de séparationSilk Border
Un esprit sain dans un corps sain
Playfair Display · Titres
AaBbCc 0123456789 ÁÉÍÓŐÚŰ áéíóőúű
Inter · Texte courant et libellés
Chaque couleur de texte est mesurée sur son fond : le texte blanc sur la teinte hero atteint 5,96:1 et dépasse donc le seuil WCAG AA de 4,5:1 pour le texte courant.
Le système de design en détail
- 2.5rem
- 2rem
- 1.5rem
- Surface de base
- Surface teintée
Anneau de focus: 2px Main Brand Sage
Texte blanc sur le ton hero
5,96:1Texte blanc sur la couleur de marque
3,85:1Avec du texte blanc, le ton hero atteint 5,96:1 et dépasse ainsi l'exigence WCAG AA de 4,5:1 pour le texte courant. Le ton de marque plus clair atteint 3,85:1 et n'est donc utilisé que pour les grands caractères, les surfaces, les filets et les icônes.
Offres, contenus personnels et réservation sur une seule plateforme
La plateforme relie six offres à des contenus spécialisés et personnels. Toutes les offres suivent la même structure d'information, mais conservent leurs propres prix, conditions et parcours de réservation. De nouvelles prestations peuvent être ajoutées sans refonte fondamentale.
Une page « À propos », des témoignages et une galerie de résultats donnent un aperçu de la personne derrière l'offre.
Les prix et les forfaits figurent directement auprès de l'offre. Selon la prestation suivent le choix du forfait, le premier entretien, la prise de rendez-vous ou, plus tard, l'achat direct.
Sur mobile, la disposition, les cadrages d'images et l'utilisation sont adaptés. La structure d'information reste la même.
Le checkout est aligné sur les parcours de réservation prévus et sur le marché hongrois.
Une base technique qui évolue avec l'offre
La réalisation sur mesure repose sur Next.js, React, TypeScript et Tailwind. Les offres, les contenus et les intégrations sont structurés de sorte que de nouvelles prestations puissent s'ajouter sans nouveau concept de page. Les contenus principaux se trouvent dans le HTML livré ; l'interactivité n'est ajoutée que là où elle est nécessaire. Les informations essentielles restent ainsi disponibles sans exécution client supplémentaire, lisibles pour les moteurs de recherche et accessibles indépendamment des intégrations externes.
- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (hongrois / anglais)
- Calendly — prise de rendez-vous
- Google Analytics — statistiques
- Module de consentement — consentements
- Module de messagerie — envoi des formulaires
- Prestataire de paiement — préparé
- Image Docker (standalone)
- Registre privé
- GitHub Actions (CI/CD)
- Gestion des secrets
Éléments de preuve
Configuration centrale des offres
Image, type d'offre, caractéristiques, structure tarifaire, logique de réservation et autres propriétés techniques sont définis de façon centrale.
Une nouvelle offre nécessite pour l'essentiel une entrée de configuration et les contenus correspondants dans les deux langues ; les structures de page existantes restent inchangées.
Réservation, checkout et consentement
La gestion du consentement utilise le module réutilisable de Woop Technology. Catégories, services et valeurs de stockage déclarées sont définis de façon centrale ; les valeurs gérées par l'infrastructure de consentement doivent être enregistrées dans le registre.
Les services de rendez-vous et de statistiques soumis à consentement ne se chargent qu'après celui-ci. La fonction de consentement n'a besoin d'aucun prestataire CMP externe. Le checkout est préparé pour connecter plus tard un prestataire de paiement interchangeable, sans reconstruire la structure d'offre et de réservation. Sa structure de données sépare les données de contact et de facturation et tient compte des exigences locales de facturation ainsi que des montants en forints hongrois.
Hébergement, déploiement et suivi
L'application est livrée comme conteneur autonome et n'est liée ni à un constructeur de sites ni à un hébergeur particulier. Le setup comprend la livraison par conteneur, la gestion privée des paquets pour les modules communs, des vérifications de types et des builds automatiques, des releases versionnées ainsi que des déploiements contrôlés.
Les versions publiées sont reproductibles et peuvent au besoin être ramenées à un état antérieur.
Repérabilité technique
- titres et descriptions propres à chaque prestation et à chaque langue
- URL stables et lisibles avec préfixe de langue
- URL canoniques autoréférentes et liens hreflang
- sitemap, navigation et canoniques issus d'une source de chemins commune
- contenus principaux disponibles côté serveur
- diffusion d'images optimisée
- maillage interne structuré entre groupes, offres et conclusions
Une base centrale pour les offres, l'orientation et la réservation
La plateforme réunit six offres en un seul endroit et les relie à des parcours de réservation et d'achat adaptés. L'utilisation réelle et la repérabilité ne pourront être évaluées qu'après la mise en ligne.
- Six offres en trois groupes clairs.
- Des prix transparents et des forfaits comparables directement auprès de l'offre.
- Trois parcours adaptés : choix du forfait, premier entretien ou achat direct.
- Deux versions linguistiques : hongrois et anglais.
- Intégration respectueuse de la vie privée : les services soumis à consentement ne se chargent qu'après consentement.
- Structure évolutive : nouvelles offres et parcours de réservation sans refonte fondamentale.
Ils ont créé pour moi un site magnifique, clair et élégant. Leur travail me satisfait entièrement. Ils ont été patients et aimables tout au long du processus. Je leur adresse mes sincères remerciements.
Traduit de l'anglais — Afficher l'original
They created a beautiful, clean, and elegant website for me. I’m completely satisfied with their work. They were patient and kind throughout the entire process. I’m truly grateful.
- Webdesign & RefonteStructure des offres, Parcours utilisateur, Mise en page mobile
- Branding & Design UX/UIWireframe, Système de design, Vérification du contraste
- Développement web, plateformes & intégrationsConfiguration des offres, Parcours de réservation, Checkout
- SEO, GEO & PerformanceURL par langue, hreflang, Sitemap
- Hébergement, Maintenance & InfrastructureConteneur, Releases versionnées, Suivi technique
- Protection des données & gestion du consentementConsent, Analytics, Réservation après consentement
Avez-vous une offre qui ne rentre pas dans un modèle standard ?
Lors du premier entretien, nous clarifions en quoi consiste votre offre et comment en faire une structure qui évolue avec vous.