Neugestaltung der MooiWeer-Website

MooiWeer Aktivitätsbuchungsplattform für Terschelling

Rolle: Full-stack Design & Entwicklung Typ: Eine benutzerdefinierte Web-Anwendung . Version: Neugestaltung von V3

Über das Projekt

MooiWeer ist die Online-Buchungsplattform für Outdoor-Aktivitäten auf Terschelling, einer niederländischen Waddensee-Insel. Besucher können Aktivitäten wie Kajakfahren, Wandern, Mountainbiken, Golf und Paintball direkt über die Website durchsuchen, vergleichen und buchen. Die Plattform unterstützt auch Warenverkäufe, Team-Building-Pakete für Unternehmen und ein spezielles Buchungsportal für Reisebüros und Partner.

Das Ziel war es, die visuelle Identität zu modernisieren, die Konvertierung durch eine klarere Informationsarchitektur zu verbessern und ein wiederverwendbares Designsystem aufzubauen, das als Vorlage für zukünftige Projekte dienen könnte alles ohne die bestehende Buchungsmaschine, Zahlungsintegrationen oder Agent-Workflows zu stören, von denen das Unternehmen abhängt.

Entwurf

Konstruktionsprinzipien

Scharfe Geometrie. Keine runden Ecken irgendwo auf der Oberfläche. Jedes Element Karten, Tasten, Eingaben, Bilder verwendet eine harte 90-Grad-Kanten. Dies verleiht der Website einen selbstbewussten, outdoor-Charakter, der auf Pfadkarten und Feldgeräte bezieht sich, anstatt auf weiche Verbraucher-Apps.
Großbuchstaben-Typographie als Struktur. Überschriften, Etiketten, Tasten und Navigationsartikel verwenden Großbuchstaben mit verfolgtem Buchstabenraum. Dies schafft eine klare visuelle Hierarchie und stärkt den aktiven, energetischen Ton der Marke.
Akzentfarbe wie die Wirbelsäule. Eine einzelne Marke grün (#7cbe33) läuft durch die gesamte Schnittstelle: die 3px Grenze am Ende des Heads, aktive Navigationsunterstriche, Karten oberen Grenzen, CTA-Taste, Symbol Hintergründe und Link-Staaten.
Abwechslung zwischen dunklen und leichten Abschnitten. Seitenabschnitte wechseln zwischen einer dunklen Marine (# 1a2e3a), einem off-white (# f5f4f0) und weißen Hintergründen. Dies schafft Rhythmus und lässt jeden Inhaltsblock atmen, ohne sich auf zusätzliche grafische Dekoration zu verlassen.

Farbpalette

Grün (Primär): #7cbe33
Blau (Sekundär): #038ea9
Dunkle Marine: 1a2e3a
Off-White: #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0
Körpertext: #2e2e2e

Typographie

Die Website verwendet SupriaSans, ein geometrisches sans-serif, in vier Gewichten (300, 400, 700, 900). Überschriften sind in Großbuchstaben mit Gewichten 700900 mit offenem Buchstabenraum eingestellt.

Layout-System

Ein benutzerdefiniertes CSS-Layout-System bietet Container, flexible Spaltengrids und eine Reihe benannter Abschnitttypen. Hero-Banners verwenden eine Sichtstelle-Höhe-Einheit (5262 vh) mit einer dunklen Gradientenüberlagerung, so dass die Aktivitätsfotografie immer hinter weißem Text deutlich liest. Routenblöcke verwenden eine 60/40 Bild-zu-Inhalt-Spaltung, die sich abwechselnd auf Reihen umkehrt, wodurch ein natürliches Leserhythmus auf langen Seiten entlang entsteht. Kartengitter verwenden CSS-Anpassungseigenschaften für Gitter und Spaltenzählung, die von drei Spalten auf Desktop auf zwei auf Tablet und eine auf Mobiltelefon zusammenbrechen.

Entwicklung

Stack

Hintergrund: PHP mit einem benutzerdefinierten MVC-Stil-Framework. Page-Controller erweitern eine gemeinsame Basisklasse (MooiWeerWebpage), die Routing, Sitzungsmanagement, Sprachverhandlungen und Template-Rendering betreut.
Frontend: Semantische HTML5, SCSS zu minifizierten CSS, jQuery und einer kleinen Reihe von zweckspezifischen Bibliotheken (Swiper für Helden-Slider, OwlCarousel für Aktivitätskarusseln) zusammengestellt.
Datenbank: MySQL/MariaDB mit einer Active-Record-Modell-Schicht für Buchungen, Mietobjekte, Agenten, Preistabellen und Ladeninventar.
Zahlungen: Ogone/Ingenico ist ein Zahlungsgateway mit iDeal, Mastercard und PayPal-Unterstützung. Ein spezieller Benachrichtigungs-Handler verarbeitet asynchrone Zahlungsrückrufe und aktualisiert den Buchungsstatus in Echtzeit.

URL-Routing

Ein einzelner Frontcontroller (index.php) analysiert bis zu sechs URL-Segmente und verschickt sie in die entsprechende Seitenklasse. Dies erzeugt saubere, lesbare URLs für Aktivitäten (/activiteiten/kayak-terschelling), Buchungsschritte und Shop-Produkte ohne Abhängigkeit von der Komplexität des Webservers.

Mehrsprachige Unterstützung

Die Plattform bietet Inhalte in niederländischer, englischer, deutscher und französischer Sprache.

Agent- und Partnerportal

Reisebüros und Gruppenbuchungspartner melden sich über ein separates Portal an, das die Verfügbarkeit in Echtzeit aufzeigt, verhandelte Preisniveaus anwendet und herunterladbare Buchungsbestätigungen erzeugt. Dieser Kanal stellt einen erheblichen Anteil an Gruppenbuchungen in der Hochsaison dar.

Admin-Backend

Eine passwortgeschützte Management-Schnittstelle ermöglicht es Mitarbeitern, die Verfügbarkeit von Aktivitäten zu verwalten, Buchungen zu verarbeiten, den Shop-Inventar zu aktualisieren, Berichte zu erstellen und die Preisgestaltung zu konfigurieren alles ohne die Codebase zu berühren.

Konstruktionssystemarchitektur

Das V3-Design-System basiert ausschließlich auf CSS-Custom-Eigenschaften, die in einem einzigen :root-Block erklärt werden. Dies bedeutet, dass die visuelle Identität Farben, Abstandskala, Typografiegrößen, Grenzstile für einen neuen Client angepasst werden kann, indem eine Datei bearbeitet wird, während alle Komponentenmarkierung und Layout-Logik unverändert bleiben. Das System wurde zusammen mit dem Code als wiederverwendbares Konstruktionsbrief dokumentiert, sodass es für zukünftige Projekte einfach angewendet werden kann.

Eine sichere Neugestaltungstrategie

Da die Buchungs- und Zahlungsmaschine geschäftlich kritisch ist, wurde das V3-Frontend mit einer A/B-Testarchitektur entwickelt. Ein Abfrageparameter oder Cookie schaltet die Karosserie-Klasse zwischen ab-Variant-a und ab-Variant-b ein und lädt das neue Design CSS nur für die Testvariante auf. Dies ermöglichte es, das neue Design in der Produktion mit echtem Verkehr vor einem vollständigen Abbruch zu testen, ohne Risiko für den Buchungsfluss.

Schlüsselmerkmale

Verfügbarkeit von Aktivitäten in Echtzeit mit Kalender- und Listenansichten
Online-Buchungen mit integrierter Zahlungsabwicklung (iDeal, Mastercard, PayPal)
Warenladen mit Warenkorb und Kasse
B2B-Teambuilding- und Veranstaltungspakete
Reisebüro-Portal mit Live-Preisen und Bestätigungen
Viersprachige Schnittstelle (NL, EN, DE, FR)
Mobile-First-Responsive-Design
Personal-Admin-Panel zur vollständigen Betriebssteuerung
Wiederverwendbares CSS-Designsystem mit dokumentierter Komponentenbibliothek

Das Ergebnis

Das Neugestaltungssystem V3 modernisierte eine Plattform, die Tausende von Buchungen pro Saison bediente und gleichzeitig alle bestehenden Integrationen und Workflows intakt hält. Da die Design-Token-Architektur markenunabhängig ist, wurde das gleiche System seitdem als Ausgangspunkt für andere Projekte angewendet.