Sechs Angebote. Drei Wege. Eine klare Plattform.
Für Cintia Németh entwickeln wir eine zweisprachige Plattform, die ihre Trainings-, Beratungs- und Produktangebote an einem Ort zusammenführt. Interessentinnen können Leistungen vergleichen, Preise einsehen und den passenden Weg zur Buchung oder zum Kauf finden.
- Auftraggeberin
- Cintia Németh
- Branche
- Gesundheit & Fitness
- Sprachen
- Ungarisch, Englisch
- Status
- In Umsetzung
- Projektvolumen
- CHF 5'000–10'000
- Website
- ciklusfit.hu
- Strategie und Informationsarchitektur
- UX/UI Design und eigenes Designsystem
- Individuelle Webentwicklung
- Mehrsprachige Umsetzung
- Consent Management und Integrationen
- Hosting, Deployment und technische Betreuung
Die fachlichen Inhalte, Preise und Bildmaterialien stammen von der Auftraggeberin.
Budapest, Ungarn
Betreuung aus Alt St. Johann (CH‑SG), Projektstandort Budapest.
Ein gewachsenes Angebot brauchte eine zentrale digitale Struktur
Cintia Németh ist Personal Trainerin, Ernährungs- und Lebensstilberaterin sowie Ausbilderin für Zyklusbalance. Ihre Leistungen wurden bisher vor allem über Instagram und Facebook vorgestellt. Für die sechs unterschiedlichen Angebote fehlte jedoch eine zentrale, dauerhaft auffindbare Übersicht.
Preise, Leistungsumfang und Buchungsmöglichkeiten mussten Interessentinnen häufig direkt erfragen. Das verursachte wiederkehrenden manuellen Aufwand und erschwerte es, die Angebote miteinander zu vergleichen.
- 01Sechs Angebote übersichtlich darstellen
- 02Leistungen, Preise und Rahmenbedingungen vergleichbar machen
- 03Für jedes Angebot den passenden Buchungs- oder Kaufweg bereitstellen
- 04Zwei eigenständige Sprachversionen anbieten
- 05Persönliche Inhalte und fachliche Informationen integrieren
- 06Externe Dienste datenschutzbewusst einbinden
- 07Neue Angebote ohne grundlegenden Umbau ergänzen
Unterschiedliche Leistungen brauchen unterschiedliche Buchungswege
Die sechs Angebote unterscheiden sich in Umfang, Dauer, Preisstruktur und Buchungsablauf. Die Herausforderung bestand darin, eine gemeinsame Informationsstruktur mit individuellen Buchungswegen zu verbinden.
- Verschiedene Formate
- Präsenz- und Online-Training, Beratung, Zyklusprogramme und digitale Produkte erfordern unterschiedliche Informationen. Während bei Trainingsangeboten Pakete und Termine im Vordergrund stehen, beginnt eine Beratung häufig mit einem Erstgespräch.
- Drei Buchungs- und Kaufwege
- Je nach Angebot führt die Plattform zur Paketwahl, zum Erstgespräch oder zum Direktkauf. Jeder Weg ist auf die jeweilige Leistung abgestimmt.
- Mehrsprachigkeit und externe Dienste
- Ungarisch und Englisch erhalten eigene, indexierbare URLs. Zustimmungspflichtige Termin- und Statistikdienste werden erst nach der erforderlichen Einwilligung geladen.
Ein System für unterschiedliche Angebote und Prozesse
Die Plattform befindet sich noch in Umsetzung. Daten zu Auffindbarkeit, Anfragen und Buchungen können erst nach dem Livegang erhoben werden.
Eine gemeinsame Struktur für sechs unterschiedliche Angebote
Alle sechs Angebote folgen derselben Informationsstruktur: Angebot finden, Leistungen und Preise vergleichen, nächsten Schritt wählen. Inhalte und Buchungswege bleiben individuell.
- GruppeBewegung und TrainingAngebote: Präsenz- und Online-TrainingNächster SchrittPaketwahl
- GruppeBeratung und ZyklusbegleitungAngebote: Ernährungs- und Lebensstilberatung, ZyklusprogrammNächster SchrittErstgespräch
- GruppeDigitale ProdukteAngebote: E-Book, TrainingsvideoNächster SchrittDirektkauf
Nutzerweg
Interessentinnen gelangen über die Startseite, Suchmaschinen oder Social Media zum passenden Angebot.
Interesse
Einstieg über verschiedene Kanäle.
Angebote vergleichen
Leistungen, Preise und Rahmenbedingungen einsehen.
Nächsten Schritt wählen
Erstgespräch oder Paketwahl.
Buchung oder Checkout
Den passenden Prozess abschliessen.
Bestätigung
Eine Buchungsbestätigung oder Rückmeldung erhalten.
Zentrale Strukturentscheidungen
- Drei statt sechs gleichrangige Einstiege
- Die Gruppierung erleichtert die Orientierung und den Vergleich der einzelnen Angebote.
- Individuelle Buchungswege
- Je nach Leistung führt der nächste Schritt zur Paketwahl, zum Erstgespräch oder zum Direktkauf.
- Eigenständige Sprach-URLs
- Ungarisch und Englisch erhalten eigene, indexierbare URLs. Canonical und hreflang verbinden die Sprachversionen.
- Consent vor externer Terminbuchung
- Eine lokale Komponente informiert über die Integration. Erst nach der erforderlichen Einwilligung wird der externe Dienst geladen. Die übrige Website bleibt unabhängig davon nutzbar.
Vom Wireframe zum Designsystem
Das Wireframe definiert pro Angebot Einordnung, Bild, Merkmale, Preise und nächsten Schritt. Die Umsetzung übernimmt dieselben Bausteine mit Bildmaterial, Farbe und einem klaren Weg pro Paket.
Warme Grundflächen, Salbei- und Waldgrün schaffen eine ruhige Gestaltung. Farben, Abstände, Radien und Zustände werden als wiederverwendbare Designwerte geführt, damit neue Seiten konsistent und leicht erweiterbar bleiben.
- #FDFBF8#FDFBF8GrundflächeSilk White
- #F3F7F3#F3F7F3Getönte FlächeVery Light Lichen
- #71877A#71877AMarkenfarbeMain Brand Sage
- #55685D#55685DHero-FlächeHero Sage
- #2D3932#2D3932ÜberschriftenDark Forest Sage
- #26211D#26211DFliesstextDeep Charcoal
- #544D46#544D46SekundärtextWarm Grey
- #E8E4DB#E8E4DBTrennlinienSilk Border
Gesunder Körper, gesunder Geist
Playfair Display · Überschriften
AaBbCc 0123456789 ÁÉÍÓŐÚŰ áéíóőúű
Inter · Fliesstext und Beschriftungen
Jede Textfarbe ist gegen ihren Grund gemessen: Weisser Text auf dem Hero-Ton erreicht 5,96:1 und liegt damit über der WCAG-AA-Schwelle von 4,5:1 für Fliesstext.
Designsystem im Detail
- 2.5rem
- 2rem
- 1.5rem
- Grundfläche
- Getönte Fläche
Fokus-Ring: 2px Main Brand Sage
Weisser Text auf dem Hero-Ton
5,96:1Weisser Text auf Markenfarbe
3,85:1Der Hero-Ton erreicht mit weissem Text 5,96:1 und überschreitet damit die WCAG-AA-Anforderung von 4,5:1 für Fliesstext. Der hellere Markenton erreicht 3,85:1 und wird deshalb nur für grosse Schrift, Flächen, Rahmen und Symbole eingesetzt.
Angebote, persönliche Inhalte und Buchung auf einer Plattform
Die Plattform verbindet sechs Angebote mit fachlichen und persönlichen Inhalten. Alle Angebote folgen derselben Informationsstruktur, behalten aber eigene Preise, Rahmenbedingungen und Buchungswege. Neue Leistungen lassen sich ohne grundlegenden Umbau ergänzen.
Eine Über-mich-Seite, Kundenstimmen und eine Ergebnisgalerie ermöglichen Einblicke in die Person hinter dem Angebot.
Preise und Pakete stehen direkt beim Angebot. Je nach Leistung folgen Paketwahl, Erstgespräch, Terminbuchung oder später der Direktkauf.
Auf Mobilgeräten werden Anordnung, Bildausschnitte und Bedienung angepasst. Die Informationsstruktur bleibt erhalten.
Der Checkout ist auf die vorgesehenen Buchungswege und den ungarischen Markt abgestimmt.
Eine technische Grundlage, die mit dem Angebot wächst
Die individuelle Umsetzung basiert auf Next.js, React, TypeScript und Tailwind. Angebote, Inhalte und Integrationen sind so strukturiert, dass neue Leistungen ohne neues Seitenkonzept ergänzt werden können. Hauptinhalte liegen im ausgelieferten HTML; Interaktivität wird nur dort ergänzt, wo sie nötig ist. So bleiben wesentliche Informationen ohne zusätzliche Client-Ausführung verfügbar, für Suchmaschinen lesbar und unabhängig von externen Integrationen zugänglich.
- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (Ungarisch / Englisch)
- Calendly — Terminbuchung
- Google Analytics — Statistik
- Consent-Baustein — Einwilligungen
- Messaging-Baustein — Formularversand
- Zahlungsanbieter — vorbereitet
- Docker-Image (standalone)
- Private Registry
- GitHub Actions (CI/CD)
- Secrets Management
Nachweise
Zentrale Angebotskonfiguration
Bild, Angebotsart, Merkmale, Preisstruktur, Buchungslogik und weitere technische Eigenschaften werden zentral definiert.
Ein neues Angebot benötigt im Wesentlichen einen Konfigurationseintrag und die zugehörigen Inhalte in beiden Sprachen; bestehende Seitenstrukturen bleiben unverändert.
Buchung, Checkout und Consent
Das Consent Management nutzt den wiederverwendbaren Baustein von Woop Technology. Kategorien, Services und deklarierte Speicherwerte werden zentral definiert; durch die Consent-Infrastruktur verwaltete Speicherwerte müssen in der Registry registriert sein.
Zustimmungspflichtige Termin- und Statistikdienste laden erst nach Einwilligung. Die Consent-Funktion benötigt keinen externen CMP‑Anbieter. Der Checkout ist für die spätere Anbindung eines austauschbaren Zahlungsanbieters vorbereitet, ohne die Angebots- und Buchungsstruktur neu aufzubauen. Seine Datenstruktur trennt Kontakt- und Rechnungsdaten und berücksichtigt lokale Rechnungsanforderungen sowie Beträge in ungarischen Forint.
Hosting, Deployment und Betreuung
Die Anwendung wird als eigenständiger Container ausgeliefert und ist weder an einen Website-Baukasten noch an einen bestimmten Hosting-Anbieter gebunden. Das Setup umfasst containerbasierte Bereitstellung, private Paketverwaltung für gemeinsame Bausteine, automatische Type-Prüfungen und Builds, versionierte Releases sowie kontrollierte Deployments.
Veröffentlichte Versionen sind reproduzierbar und können bei Bedarf auf einen früheren Stand zurückgesetzt werden.
Technische Auffindbarkeit
- individuelle Seitentitel und Beschreibungen pro Leistung und Sprache
- stabile, lesbare URLs mit Sprachpräfix
- selbstreferenzierende Canonical-URLs und hreflang-Verknüpfungen
- Sitemap, Navigation und Canonicals aus einer gemeinsamen Pfadquelle
- serverseitig verfügbare Hauptinhalte
- optimierte Bildauslieferung
- strukturierte interne Verlinkung zwischen Gruppen, Angeboten und Abschlüssen
Eine zentrale Grundlage für Angebote, Orientierung und Buchung
Die Plattform führt sechs Angebote an einem Ort zusammen und verbindet sie mit passenden Buchungs- und Kaufwegen. Die tatsächliche Nutzung und Auffindbarkeit können erst nach dem Livegang bewertet werden.
- Sechs Angebote in drei übersichtlichen Gruppen.
- Transparente Preise und vergleichbare Pakete direkt beim Angebot.
- Drei passende Wege: Paketwahl, Erstgespräch oder Direktkauf.
- Zwei Sprachversionen: Ungarisch und Englisch.
- Datenschutzbewusste Integration: Zustimmungspflichtige Dienste werden erst nach Einwilligung geladen.
- Erweiterbare Struktur: Neue Angebote und Buchungswege ohne grundlegenden Umbau.
Sie haben eine wunderschöne, übersichtliche und elegante Website für mich erstellt. Ich bin mit ihrer Arbeit rundum zufrieden. Sie waren während des gesamten Prozesses geduldig und freundlich. Ich bin wirklich dankbar.
Übersetzt aus dem Englischen — Original anzeigen
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 & RelaunchAngebotsstruktur, Nutzerweg, Mobile Anordnung
- Branding & UX/UI DesignWireframe, Designsystem, Kontrastnachweis
- Webentwicklung, Plattformen & IntegrationenAngebotskonfiguration, Buchungswege, Checkout
- SEO, GEO & PerformanceSprach-URLs, hreflang, Sitemap
- Hosting, Wartung & InfrastrukturContainer, Versionierte Releases, Betreuung
- Datenschutz & Consent ManagementConsent, Analytics, Terminbuchung nach Einwilligung
Haben Sie ein Angebot, das sich nicht in eine Standardvorlage pressen lässt?
Im Erstgespräch klären wir, woraus Ihr Angebot besteht und wie daraus eine Struktur wird, die mitwächst.