Aller au contenu principal
Woop Technology
Carte de l'Europe en trame de points : la Hongrie mise en évidence, avec Budapest, le siège du clientBudapest
Toutes les références
Aperçu de projet · Santé & fitness féminin

Six offres.Trois parcours de réservation.Une plateforme claire.

Pour Cintia Németh, coach de fitness et conseillère en santé féminine, nous développons une plateforme qui ordonne ses prestations de façon compréhensible et achemine les demandes issues des réseaux sociaux vers des processus de réservation et d'achat adaptés.

Envoyer une demande
Données du projet
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
Notre rôle
  • 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.

Page d'accueil de Ciklusfit sur un ordinateur portable
Ciklusfit sur un smartphone
L'ampleur du projet en un coup d'œil

Un système pour des offres et des processus différents

6

offres

3

groupes d'offres

2

langues

3

processus de réservation et d'achat

1

structure d'information commune

La plateforme est en cours de réalisation. Les données sur la visibilité, les demandes et les réservations seront relevées après la mise en ligne.

01Situation de départ

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. Ses prestations étaient présentées surtout via Instagram et Facebook. Pour six formats différents, il manquait toutefois une vue d'ensemble durablement repérable et comparable.

Les prix, les différences et les possibilités de réservation devaient souvent être demandés par message privé. Cela générait un travail manuel récurrent, tandis que les informations importantes restaient peu repérables dans les fils des réseaux sociaux.

Avant
  • DM Instagram
  • WhatsApp
  • E-mail
  • Demande directe
  • À l'oral
Après
  • Site central
  • Offres claires
  • Système de réservation
  • Checkout préparé
  • Bilingue

Exigences envers la nouvelle plateforme

  • structurer six formats de façon compréhensible
  • présenter les prix et les conditions de manière transparente
  • rendre les différences visibles et les offres comparables
  • fournir deux versions linguistiques équivalentes
  • couvrir la réservation, le premier entretien et l'achat direct
  • intégrer les services externes dans le respect des données
  • ajouter de nouvelles offres sans refonte fondamentale
02Défi

Des prestations différentes exigent des parcours de décision différents

Les offres diffèrent par le contenu, le lieu, la durée, la structure tarifaire et l'étape suivante pertinente. Une présentation standard aurait estompé ces différences.

Formats différents

Entraînement en présentiel et en ligne, conseil en nutrition et mode de vie, un programme de cycle en plusieurs parties ainsi que des contenus numériques. Certaines prestations se choisissent directement, d'autres commencent utilement par un entretien personnel.

Trois processus

Les entraînements mènent aux cartes multiples, les conseils au premier entretien et les produits numériques directement à l'achat. Le site doit orienter de façon commune et mener malgré tout à la conclusion appropriée.

Multilinguisme et services externes

Le hongrois est la langue par défaut, l'anglais est proposé à équivalence. Les deux versions ont besoin d'URL indexables propres. Les services de rendez-vous et de statistiques ne peuvent se charger qu'après le consentement requis.

03Stratégie & design

Une logique d'information commune pour six offres différentes

Au lieu d'un modèle identique, un ordre commun a été développé : trouver le groupe d'offres, comprendre l'étendue des prestations, comparer conditions et prix, choisir l'étape suivante. Contenus, prix, conditions et parcours de réservation restent propres à chaque offre.

Trois groupes d'offres et leurs conclusions

Le regroupement réduit le choix au premier niveau sans uniformiser les prestations individuelles.

Parcours de réservation
  • GroupeMouvement et entraînementOffres: Entraînement en présentiel dans le studio privé pour femmes, entraînement en direct par visioconférence
    Étape suivante: Page de l'offre et choix du forfait
    ObjectifCarte multiple
  • GroupeConseil et accompagnement du cycleOffres: Conseil en nutrition et mode de vie, programme de cycle en plusieurs parties
    Étape suivante: Prise de rendez-vous
    ObjectifPremier entretien
  • GroupeProduits numériquesOffres: E-book, vidéo d'entraînement
    Étape suivante: Checkout
    ObjectifAchat direct

Parcours utilisateur

Qui connaît l'offre adaptée entre directement ; qui cherche encore une orientation peut d'abord choisir un entretien personnel.

  1. Intérêt

    Entrée via la page d'accueil, un moteur de recherche ou les réseaux sociaux.

  2. Comparer les offres

    Trois groupes donnent l'orientation ; étendue des prestations, conditions et prix sont présentés de façon transparente.

  3. Premier entretien ou choix du forfait

    Selon la prestation, le détail de l'offre mène à l'entretien personnel ou directement au forfait.

  4. Réservation ou checkout

    Les prestations liées à un rendez-vous passent à la réservation, celles achetables directement au checkout.

  5. Confirmation

    Après la conclusion, la cliente reçoit la confirmation ou la réponse correspondante.

Décisions structurelles centrales

Trois entrées au lieu de six équivalentes

Les groupes répondent d'abord à la question de savoir si l'on cherche un entraînement, un conseil ou un produit numérique, et facilitent ensuite le choix concret.

Plusieurs parcours de conversion au lieu d'un seul

Les clientes déjà en entraînement peuvent choisir un forfait directement ; pour un conseil étendu, un premier entretien clarifie d'abord le besoin.

URL de langue autonomes

Des chemins comme /hu/szolgaltatasok et /en/services peuvent être ouverts, partagés, liés et indexés séparément. Canonical et hreflang relient les versions ; le multilinguisme fait ainsi partie de l'architecture de l'information et n'est pas un simple changement de texte.

Consentement avant la prise de rendez-vous externe

Un composant local informe d'abord sur l'intégration. Le service externe n'est chargé qu'après la décision requise ; 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.

Wireframe de la page des services avec des espaces réservés pour l’image, le texte et la rangée de forfaits
Avant – le wireframe fixe l’ordre et les blocs de chaque offre, sans couleur ni visuels.
Page des services réalisée avec la première offre et trois forfaits
Après – les mêmes blocs en production : catégorie, caractéristiques, prix et un chemin 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. Indications de cadre, caractéristiques et paliers de prix figurent directement auprès de l'offre concernée.

Détail d'une offre avec caractéristiques et paliers de prix
Conditions générales, caractéristiques concrètes et paliers de prix figurent directement auprès de l'offre concernée.
Valeurs chromatiques
HexUtilisation
  • #FDFBF8
    Surface de baseSilk White
  • #F3F7F3
    Surface teintéeVery Light Lichen
  • #71877A
    Couleur de marqueMain Brand Sage
  • #55685D
    Surface heroHero Sage
  • #2D3932
    TitresDark Forest Sage
  • #26211D
    Texte courantDeep Charcoal
  • #544D46
    Texte secondaireWarm Grey
  • #E8E4DB
    Filets de séparationSilk Border
Typographie

Ép Testben Ép Lélek

Playfair Display · Titres

AaBbCc 0123456789 · ÁÉÍÓŐÚŰ áéíóőúű

Inter · Texte courant et libellés

Composants
Bouton primaire999px
Standard
Survol
Focus
Désactivé
Bouton secondaire14px
Standard
Survol
Focus
Désactivé
Badge (durée)999px
Standard
Survol
Focus
Désactivé
Champ de saisie14px
Standard
Survol
Focus
Désactivé

Anneau de focus: 2px Main Brand Sage

Rayons et surfaces
  •  2.5rem
  •  2rem
  •  1.5rem
  • Surface de baseSilk White
  • Surface teintéeVery Light Lichen
Vérification du contraste

Texte blanc sur le ton hero

5,96:1
#FFFFFF · #55685DWCAG AA · texte courant

Texte blanc sur la couleur de marque

3,85:1
#FFFFFF · #71877AGrands caractères uniquement

Avec 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.

04La solution

Structure de l'offre, confiance et réservation dans un seul système

La plateforme relie six offres structurées à des contenus spécialisés et personnels ainsi qu'aux étapes suivantes appropriées. Chaque offre suit la même logique d'information tout en gardant ses propres contenus, prix, conditions et logique de réservation. De nouvelles prestations peuvent ainsi s'ajouter sans développer une structure de page entièrement nouvelle.

Une page « à propos » détaillée, des contenus personnels, des témoignages ainsi qu'une galerie de résultats et d'évolution complètent les prestations. La séparation entre structure de l'offre et niveau personnel permet à la fois la comparaison factuelle et un aperçu de la personne derrière l'offre.

Les prix, les tailles de forfait et les conditions centrales 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 d'un produit numérique.

Mobile et desktop utilisent la même architecture d'information, mais pas nécessairement la même disposition. Pour les écrans étroits, l'ordre, les cadrages d'images et les espacements horizontaux sont adaptés et les interactions optimisées pour le tactile.

Le checkout est aligné sur les parcours de réservation prévus et sur le marché hongrois.

Checkout avec données de contact et de facturation
De l'offre choisie jusqu'à la conclusion – avec une vue d'ensemble compréhensible des forfaits et des prix.
Prise de rendez-vous avant le consentement
Avant le consentement, le service externe ne se charge pas ; un composant local informe sur l'intégration.
La même page en hongrois et en anglais
Deux langues, deux adresses autonomes – reliées par canonical et hreflang.
La même structure, une disposition propre – pas le bureau rétréci.
05Technique & exploitation

Construit pour que les extensions ne demandent pas chaque fois une nouvelle logique de page

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.

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.

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.

InterfaceVisible
Le site visible en deux langues
  • Next.js 16 (App Router)
  • React Server Components
  • Tailwind CSS v4
  • next-intl (hongrois / anglais)
Réponse vers le hautAppel vers le bas
ServicesServices tiers
Fonctions et intégrations propres au projet
  • Calendly — prise de rendez-vous
  • Google Analytics — statistiques
  • Module de consentement — consentements
  • Module de messagerie — envoi des formulaires
  • Prestataire de paiement — préparé
Mise à disposition vers le hautUtilisation vers le bas
ExploitationInfrastructure
Base technique
  • Image Docker (standalone)
  • Registre privé
  • GitHub Actions (CI/CD)
  • Gestion des secrets

Le site visible reste séparé des services dépendant du consentement : si une prise de rendez-vous externe n'est pas autorisée, par exemple, les autres contenus restent disponibles.

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
06Résultat

Une base centrale pour la repérabilité, l'orientation et la réservation

Mesurable après la mise en ligne

La plateforme est en cours de réalisation. Les points ci-dessous décrivent l'état attendu après la mise en ligne.

  • Six offres en trois groupes logiques – mouvement et entraînement, conseil et accompagnement du cycle, produits numériques – sans surcharge.
  • Des prix transparents et des forfaits comparables abaissent le seuil de la première réservation.
  • Trois parcours de réservation selon la maturité de la décision : choix du forfait, premier entretien ou achat direct.
  • Bilinguisme complet (hongrois / anglais) sans effort de traduction au quotidien.
  • Les services soumis à consentement ne se chargent qu'après son obtention, pas au premier affichage.
  • La structure permet d'ajouter plus tard des offres et des parcours de réservation sans nouveau concept de page.
Portfolio

Autres projets

  • Web designDéveloppementInfrastructure

    Woop Art

    Un espace d'art numérique qui met les œuvres en valeur et guide les visiteurs sans effort à travers la galerie.

    Voir l'étude de cas
    Woop Art
    Woop Art
  • Service propreProtection des donnéesArchitecture
    Module technique

    Gestion du consentement

    Notre propre moteur de consentement. Il gère les consentements, débloque les services soumis à autorisation et nettoie les cookies en cas de retrait – tandis que données, langues et design restent librement configurables par projet.

    Voir l'étude de cas
    Interface
    Bandeau et réglages dans le design du projet
    Moteur de consentement
    État, versionnage, registre, filtrage
    Source de données
    JSON, API ou CMS – interchangeable
Voir toutes les références
Votre projet

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.

Envoyer une demande