MooiWeer: Neugestaltung der Buchungsplattform

MooiWeer — Buchungsplattform für Aktivitäten auf Terschelling

Rolle: Full-Stack-Design und -Entwicklung | Typ: individuelle Webanwendung | Version: Neugestaltung V3

Über das Projekt

MooiWeer ist die Online-Buchungsplattform für Outdoor-Aktivitäten auf der niederländischen Watteninsel Terschelling. Besucher können Angebote wie Kajakfahren, Wandern, Mountainbiking, Golf und Paintball direkt auf der Website entdecken, vergleichen und buchen. Die Plattform unterstützt außerdem den Verkauf von Merchandise, Teambuilding-Pakete für Unternehmen und ein eigenes Buchungsportal für Reisevermittler und Partner.

V3 ist eine grundlegende Neugestaltung der Plattform. Ziel war, den visuellen Auftritt zu modernisieren, durch eine klarere Informationsarchitektur mehr Buchungen zu erreichen und ein wiederverwendbares Designsystem als Vorlage für weitere Projekte aufzubauen. Die bestehende Buchungslogik, Zahlungsanbindungen und Vermittlerabläufe, von denen das Unternehmen abhängt, sollten dabei ungestört weiterlaufen.

Design

Gestaltungsprinzipien

Kantige Geometrie. Die Oberfläche verwendet durchgängig rechte Winkel statt abgerundeter Ecken. Karten, Schaltflächen, Eingabefelder und Bilder erhalten klare 90-Grad-Kanten. Das verleiht der Website einen markanten Outdoor-Charakter, der eher an Wanderkarten und Ausrüstung erinnert als an weich gestaltete Alltags-Apps.
Großbuchstaben als Strukturmittel. Überschriften, Beschriftungen, Schaltflächen und Navigation verwenden Großbuchstaben mit erweiterter Laufweite. So entsteht eine klare visuelle Hierarchie, die den aktiven, energiegeladenen Markenauftritt unterstützt.
Eine Akzentfarbe als verbindendes Element. Ein einziges Markengrün (#7cbe33) zieht sich durch die gesamte Oberfläche: die 3px-Linie unter dem Kopfbereich, Unterstreichungen aktiver Navigationseinträge, obere Kartenränder, Handlungsbuttons, Symbolhintergründe und Linkzustände. Wird dieser Wert im Designsystem geändert, ändert sich die Farbgestaltung der gesamten Website.
Abwechselnd dunkle und helle Abschnitte. Seitenbereiche wechseln zwischen Dunkelblau (#1a2e3a), gebrochenem Weiß (#f5f4f0) und Weiß. Das schafft einen Rhythmus und gibt den Inhalten Raum, ohne zusätzliche grafische Dekoration zu benötigen.

Farbpalette

Grün (Primärfarbe): #7cbe33
Blau (Sekundärfarbe): #038ea9
Dunkelblau: #1a2e3a
Gebrochenes Weiß: #f5f4f0
Fließtext: #2e2e2e

Typografie

Die Website verwendet SupriaSans, eine geometrische serifenlose Schrift, in vier Strichstärken (300, 400, 700, 900). Überschriften erscheinen in Großbuchstaben mit den Stärken 700–900 und erweiterter Laufweite. Fließtext ist mit 16px und einer Zeilenhöhe von 1,7 gesetzt, damit er auf Mobilgeräten und Desktopbildschirmen angenehm lesbar bleibt.

Layoutsystem

Ein eigenes CSS-Layoutsystem stellt Container, flexible Spaltenraster und benannte Abschnittstypen bereit. Große Einstiegsbanner nutzen 52–62 vh und einen dunklen Farbverlauf über dem Bild, sodass weiße Schrift vor den Aktivitätsfotos lesbar bleibt. Routenabschnitte teilen Bild und Inhalt im Verhältnis 60/40 auf und wechseln deren Seiten zeilenweise. Das führt angenehm durch längere Seiten. Kartenraster verwenden CSS Custom Properties für Spaltenabstände und -zahlen; sie wechseln von drei Spalten auf dem Desktop zu zwei auf Tablets und einer auf Mobilgeräten.

Entwicklung

Technologien

Backend: PHP mit einem eigenen Framework nach MVC-Vorbild. Seitencontroller erweitern die gemeinsame Basisklasse MooiWeerWebpage, die Routing, Sitzungsverwaltung, Sprachwahl und Template-Ausgabe übernimmt.
Frontend: semantisches HTML5, zu minimiertem CSS kompiliertes SCSS, jQuery und wenige spezialisierte Bibliotheken: Swiper für große Bildslider und OwlCarousel für Aktivitätskarussells.
Datenbank: MySQL/MariaDB mit einer Active-Record-Modellschicht für Buchungen, Mietobjekte, Vermittler, Preistabellen und Shopbestände.
Zahlungen: Ogone-/Ingenico-Zahlungsanbindung mit Unterstützung für iDeal, Mastercard und PayPal. Eine eigene Benachrichtigungsverarbeitung nimmt asynchrone Zahlungsrückmeldungen entgegen und aktualisiert den Buchungsstatus in Echtzeit.

URL-Routing

Ein zentraler Frontcontroller (index.php) wertet bis zu sechs URL-Segmente aus und leitet an die passende Seitenklasse weiter. So entstehen klare, lesbare URLs für Aktivitäten (/activiteiten/kayak-terschelling), Buchungsschritte und Shopprodukte, ohne auf komplexe Rewrite-Regeln des Webservers angewiesen zu sein.

Mehrsprachigkeit

Die Plattform bietet Inhalte auf Niederländisch, Englisch, Deutsch und Französisch. Die Sprachwahl wird in der Sitzung gespeichert und lässt sich jederzeit ändern, ohne den Warenkorb oder Buchungsstand zu verlieren.

Portal für Vermittler und Partner

Reisevermittler und Partner für Gruppenbuchungen melden sich über ein separates Portal an. Es zeigt verfügbare Plätze in Echtzeit, wendet vereinbarte Preisstaffeln an und erstellt herunterladbare Buchungsbestätigungen. In der Hauptsaison macht dieser Kanal einen erheblichen Teil der Gruppenbuchungen aus.

Verwaltungsbereich

Eine passwortgeschützte Verwaltungsoberfläche ermöglicht Mitarbeitern, Aktivitätsverfügbarkeiten zu pflegen, Buchungen zu bearbeiten, Shopbestände zu aktualisieren, Berichte zu erstellen und Preise festzulegen — ohne Änderungen am Code.

Architektur des Designsystems

Das V3-Designsystem basiert vollständig auf CSS Custom Properties in einem einzigen :root-Block. Farben, Abstände, Schriftgrößen und Rahmenstile lassen sich deshalb für einen neuen Kunden durch Änderung einer Datei anpassen. Komponenten-Markup und Layoutlogik bleiben dabei erhalten. Zusätzlich zum Code wurde das System als wiederverwendbares Designbriefing dokumentiert, damit es sich leicht auf weitere Projekte übertragen lässt.

Eine sichere Strategie für die Neugestaltung

Da Buchung und Zahlungsabwicklung geschäftskritisch sind, wurde das V3-Frontend mit einer A/B-Testarchitektur entwickelt. Ein Abfrageparameter oder Cookie schaltet die Body-Klasse zwischen ab-variant-a und ab-variant-b um und lädt das neue Design-CSS nur für die Testvariante. So konnte die neue Gestaltung vor der vollständigen Umstellung mit echtem Besucherverkehr im Produktivbetrieb geprüft werden, ohne den Buchungsablauf zu gefährden.

Zentrale Funktionen

Aktivitätsverfügbarkeit in Echtzeit mit Kalender- und Listenansicht
Onlinebuchung mit integrierter Zahlung per iDeal, Mastercard und PayPal
Merchandise-Shop mit Warenkorb und Kasse
Teambuilding- und Veranstaltungspakete für Unternehmen
Reisevermittlerportal mit aktuellen Preisen und Bestätigungen
Oberfläche in vier Sprachen (NL, EN, DE, FR)
Responsives Design mit Schwerpunkt auf Mobilgeräten
Administrationsbereich für die vollständige betriebliche Steuerung
Wiederverwendbares CSS-Designsystem mit dokumentierter Komponentenbibliothek

Das Ergebnis

Die V3-Neugestaltung modernisierte eine Plattform mit Tausenden Buchungen pro Saison und erhielt gleichzeitig sämtliche bestehenden Anbindungen und Arbeitsabläufe. Das neue Designsystem reduzierte gestalterische Unstimmigkeiten auf der Website und verkürzte die Entwicklung neuer Seitentypen deutlich. Da die Architektur der Designtokens nicht an eine einzelne Marke gebunden ist, dient dasselbe System inzwischen auch als Ausgangspunkt für weitere Projekte.