WebdesignEntwicklungInfrastruktur
Woop Art
Ein digitaler Kunstraum, der Kunstwerke eindrucksvoll präsentiert und Besucher einfach durch die Galerie führt.
Alle Referenzen
Projektvorschau · Gesundheit & Frauenfitness
Sechs Angebote.Drei Buchungswege.Eine klare Plattform.
Für Cintia Németh, Fitness-Coach und Beraterin für Frauengesundheit, entsteht eine Plattform, die Leistungen verständlich ordnet und Social-Media-Anfragen in passende Buchungs- und Kaufprozesse überführt.
Projektfakten
- Auftraggeberin
- Cintia Németh
- Branche
- Gesundheit & Fitness
- Sprachen
- Ungarisch, Englisch
- Status
- In Umsetzung
- Projektvolumen
- CHF 5'000–10'000
- Website
- ciklusfit.hu
Unsere Rolle
- 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.
Projektumfang auf einen Blick
Ein System für unterschiedliche Angebote und Prozesse
6
Angebote
3
Angebotsgruppen
2
Sprachen
3
Buchungs- und Kaufprozesse
1
gemeinsame Informationsstruktur
Die Plattform befindet sich in Umsetzung. Daten zu Auffindbarkeit, Anfragen und Buchungen werden nach dem Livegang erhoben.
01Ausgangslage
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 vor allem über Instagram und Facebook vorgestellt. Für sechs unterschiedliche Formate fehlte jedoch eine dauerhaft auffindbare und vergleichbare Übersicht.
Preise, Unterschiede und Buchungsmöglichkeiten mussten Interessentinnen häufig per Direktnachricht erfragen. Dadurch entstand wiederkehrender manueller Aufwand, während wichtige Informationen in Social-Media-Feeds nur begrenzt auffindbar blieben.
Vorher
- Instagram DMs
- Direktanfrage
- Mündlich
Nachher
- Zentrale Website
- Klare Angebote
- Buchungssystem
- Checkout vorbereitet
- Zweisprachig
Anforderungen an die neue Plattform
- sechs Formate verständlich gliedern
- Preise und Rahmenbedingungen transparent darstellen
- Unterschiede sichtbar und Angebote vergleichbar machen
- zwei gleichwertige Sprachversionen bereitstellen
- Buchung, Erstgespräch und Direktkauf abbilden
- externe Dienste datenschutzbewusst integrieren
- neue Angebote ohne grundlegenden Umbau ergänzen
02Herausforderung
Unterschiedliche Leistungen brauchen unterschiedliche Entscheidungswege
Die Angebote unterscheiden sich in Inhalt, Ort, Dauer, Preisstruktur und sinnvollem nächsten Schritt. Eine Standarddarstellung hätte diese Unterschiede verwischt.
Verschiedene Formate
Präsenz- und Online-Training, Ernährungs- und Lebensstilberatung, ein mehrteiliges Zyklusprogramm sowie digitale Inhalte. Einige Leistungen sind direkt wählbar, andere beginnen sinnvollerweise mit einem persönlichen Gespräch.
Drei Prozesse
Trainingsangebote führen zu Mehrfachkarten, Beratungen zum Erstgespräch und digitale Produkte direkt zum Kauf. Die Website muss gemeinsam orientieren und dennoch zum passenden Abschluss führen.
Mehrsprachigkeit und externe Dienste
Ungarisch ist Standardsprache, Englisch wird gleichwertig angeboten. Beide Versionen benötigen eigene indexierbare URLs. Termin- und Statistikdienste dürfen erst nach erforderlicher Einwilligung laden.
03Strategie & Design
Eine gemeinsame Informationslogik für sechs unterschiedliche Angebote
Statt einer identischen Vorlage wurde eine gemeinsame Reihenfolge entwickelt: Angebotsgruppe finden, Leistungsumfang verstehen, Rahmenbedingungen und Preise vergleichen, nächsten Schritt wählen. Inhalte, Preise, Rahmenbedingungen und Buchungswege bleiben je Angebot individuell.
Drei Angebotsgruppen und Abschlusswege
Die Gruppierung reduziert die Auswahl auf der ersten Ebene, ohne einzelne Leistungen zu vereinheitlichen.
Buchungswege
- GruppeBewegung und TrainingAngebote: Präsenztraining im privaten Frauenstudio, Live-Training per VideocallNächster Schritt: Angebotsseite und PaketwahlZielMehrfachkarte
- GruppeBeratung und ZyklusbegleitungAngebote: Ernährungs- und Lebensstilberatung, mehrteiliges ZyklusprogrammNächster Schritt: TerminbuchungZielErstgespräch
- GruppeDigitale ProdukteAngebote: E-Book, TrainingsvideoNächster Schritt: CheckoutZielDirektkauf
Nutzerweg
Wer das passende Angebot kennt, steigt direkt ein; wer noch Orientierung braucht, kann zuerst ein persönliches Gespräch wählen.
Interesse
Einstieg über Startseite, Suchmaschine oder Social Media.
Angebote vergleichen
Drei Gruppen geben Orientierung; Leistungsumfang, Rahmenbedingungen und Preise werden transparent dargestellt.
Erstgespräch oder Paketwahl
Das Angebotsdetail führt je nach Leistung zum persönlichen Gespräch oder direkt zum Paket.
Buchung oder Checkout
Terminbezogene Leistungen wechseln in die Buchung, direkt kaufbare in den Checkout.
Bestätigung
Nach Abschluss erhält die Kundin die entsprechende Bestätigung oder Rückmeldung.
Zentrale Strukturentscheidungen
Drei statt sechs gleichrangige Einstiege
Die Gruppen beantworten zuerst, ob Training, Beratung oder ein digitales Produkt gesucht wird, und erleichtern danach die konkrete Auswahl.
Mehrere statt eines Conversion-Pfads
Bestehende Trainingskundinnen können direkt ein Paket wählen; bei umfangreicher Beratung klärt ein Erstgespräch zuerst den Bedarf.
Eigenständige Sprach-URLs
Pfade wie /hu/szolgaltatasok und /en/services lassen sich separat aufrufen, teilen, verlinken und indexieren. Canonical und hreflang verbinden die Versionen; Mehrsprachigkeit ist damit Teil der Informationsarchitektur, nicht nur ein Textwechsel.
Consent vor externer Terminbuchung
Eine lokale Komponente informiert zunächst über die Integration. Erst nach der erforderlichen Entscheidung 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. Rahmenangaben, Merkmale und Preisstaffeln stehen direkt beim jeweiligen Angebot.
Farbwerte
HexVerwendung
- #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
Schrift
Ép Testben Ép Lélek
Playfair Display · Überschriften
AaBbCc 0123456789 · ÁÉÍÓŐÚŰ áéíóőúű
Inter · Fliesstext und Beschriftungen
Bausteine
Primär-Button999px
Standard
Hover
Fokus
Deaktiviert
Sekundär-Button14px
Standard
Hover
Fokus
Deaktiviert
Badge (Dauer)999px
Standard
Hover
Fokus
Deaktiviert
Input-Feld14px
Standard
Hover
Fokus
Deaktiviert
Primär-Button999px
Sekundär-Button14px
Badge (Dauer)999px
Input-Feld14px
Standard
Hover
Fokus
Deaktiviert
Fokus-Ring: 2px Main Brand Sage
Radien und Fläche
- 2.5rem
- 2rem
- 1.5rem
- GrundflächeSilk White
- Getönte FlächeVery Light Lichen
Kontrastnachweis
Weisser Text auf dem Hero-Ton
5,96:1#FFFFFF · #55685DWCAG AA · Fliesstext
Weisser Text auf Markenfarbe
3,85:1#FFFFFF · #71877ANur grosse Schrift
Der 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.
04Die Lösung
Angebotsstruktur, Vertrauen und Buchung in einem System
Die Plattform verbindet sechs strukturierte Angebote mit fachlichen und persönlichen Inhalten sowie passenden nächsten Schritten. Jedes Angebot folgt derselben Informationslogik, behält aber eigene Inhalte, Preise, Rahmenbedingungen und Buchungslogik. Neue Leistungen lassen sich dadurch ergänzen, ohne eine vollständig neue Seitenstruktur zu entwickeln.
Eine ausführliche Über-mich-Seite, persönliche Inhalte, Kundenstimmen sowie eine Ergebnis- und Entwicklungsgalerie ergänzen die Leistungen. Die Trennung von Angebotsstruktur und persönlicher Ebene ermöglicht sowohl den sachlichen Vergleich als auch Einblicke in die Person hinter dem Angebot.
Preise, Paketgrössen und zentrale Rahmenbedingungen stehen direkt beim Angebot. Je nach Leistung folgt Paketwahl, Erstgespräch, Terminbuchung oder später der Direktkauf eines digitalen Produkts.
Mobile und Desktop nutzen dieselbe Informationsarchitektur, aber nicht zwingend dieselbe Anordnung. Für schmale Displays werden Reihenfolge, Bildausschnitte und horizontale Abstände angepasst sowie Interaktionen für Touch optimiert.
Der Checkout ist auf die vorgesehenen Buchungswege und den ungarischen Markt abgestimmt.
05Technik & Betrieb
Gebaut, damit Erweiterungen nicht jedes Mal eine neue Seitenlogik benötigen
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.
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.
OberflächeSichtbar
Die sichtbare Website in zwei Sprachen- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (Ungarisch / Englisch)
Antwort nach obenAufruf nach unten
DiensteFremddienste
Projektabhängige Funktionen und Integrationen- Calendly — Terminbuchung
- Google Analytics — Statistik
- Consent-Baustein — Einwilligungen
- Messaging-Baustein — Formularversand
- Zahlungsanbieter — vorbereitet
Bereitstellung nach obenNutzung nach unten
BetriebInfrastruktur
Technische Grundlage- Docker-Image (standalone)
- Private Registry
- GitHub Actions (CI/CD)
- Secrets Management
Die sichtbare Website bleibt dabei von zustimmungsabhängigen Diensten getrennt: Wird beispielsweise eine externe Terminbuchung nicht freigegeben, bleiben die übrigen Inhalte weiterhin verfügbar.
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
06Ergebnis
Eine zentrale Grundlage für Auffindbarkeit, Orientierung und Buchung
Messbar nach LivegangDie Plattform befindet sich in der Umsetzung. Die nachfolgenden Punkte beschreiben den erwarteten Stand nach dem Livegang.
- Sechs Angebote in drei logischen Gruppen – Bewegung und Training, Beratung und Zyklusbegleitung, digitale Produkte – ohne Überforderung.
- Transparente Preise und vergleichbare Pakete senken die Schwelle zur ersten Buchung.
- Drei Buchungswege je nach Entscheidungsreife: Paketwahl, Erstgespräch oder Direktkauf.
- Vollständige Zweisprachigkeit (Ungarisch / Englisch) ohne Übersetzungsaufwand im Tagesbetrieb.
- Zustimmungspflichtige Dienste werden erst nach der Einwilligung geladen, nicht beim ersten Seitenaufruf.
- Die Struktur erlaubt spätere Erweiterungen um neue Angebote und Buchungswege, ohne ein neues Seitenkonzept.
Portfolio
Weitere Projekte
- Eigener DienstDatenschutzArchitekturTechnischer Baustein
Consent Management
Unsere eigene Consent-Engine. Sie verwaltet Einwilligungen, schaltet zustimmungsabhängige Dienste frei und bereinigt Cookies beim Widerruf – während Daten, Sprachen und Gestaltung pro Projekt frei bestimmbar bleiben.
OberflächeBanner und Einstellungen im Design des ProjektsConsent-EngineZustand, Versionierung, Registry, GatingDatenquelleJSON, API oder CMS – austauschbar
Ihr Projekt
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.