Vernieuwing van de MooiWeer-website

MooiWeer Activiteitsboekingsplatform voor Terschelling

Rol: Full-stack design en ontwikkeling. Type: Een aangepaste web-applicatie . Versie: V3-herontwerp

Over het project

MooiWeer is het online reserveringsplatform voor buitenactiviteiten op Terschelling, een Nederlandse Waddenzee-eiland. Bezoekers kunnen via de website direct activiteiten zoals kajak, wandelen, mountainbiken, golf en paintball bekijken, vergelijken en boeken. Het platform ondersteunt ook de verkoop van goederen, teambuildingpakketten voor bedrijven en een speciale reserveringsportaal voor reisagenten en partners.

Het doel was om de visuele identiteit te moderniseren, de conversie te verbeteren door middel van een duidelijker informatiearchitectuur en een herbruikbaar ontwerpsysteem te bouwen dat zou kunnen dienen als een sjabloon voor toekomstige projecten.

Ontwerp

Ontwerpbeginselen

Een scherpe geometrie. Geen afgeronde hoeken ergens op de interface. Elk element kaarten, knoppen, inputs, afbeeldingen gebruikt een harde 90 graden rand. Dit geeft de site een zelfverzekerde, outdoor karakter die verwijst naar trailmappen en veldapparatuur in plaats van zachte consumenten-apps.
Grote typografie als structuur. In de opschriften, labels, knoppen en navigatie-artikelen wordt een lettergreep gebruikt met een letterruimte. Dit creëert een duidelijke visuele hiërarchie en versterkt de actieve, energieke toon van het merk.
Accent als de wervelkolom. Een enkele merkgroen (#7cbe33) loopt door de gehele interface: de 3px grens aan de onderkant van de kop, actieve navigatie onderstrepen, kaart bovengrenzen, CTA-knoppen, icoon achtergronden en link staten.
Verwisseling van donker/licht sectie. Pagina's wisselen tussen een donkere navy (#1a2e3a), een off-white (#f5f4f0), en witte achtergronden. Dit creëert ritme en laat elke inhoud blokken ademen zonder te vertrouwen op extra grafische decoratie.

Kleurpalet

Groen (primêre): #7cbe33
Blauw (secundair): #038ea9
Donkere marine: 1a2e3a
Niet-wit: #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0
Lichaamstekst: #2e2e2e

Typografie

De site gebruikt SupriaSans, een geometrische sans-serif, in vier gewichten (300, 400, 700, 900). Titels zijn ingesteld in grootletters op gewichten 700900 met open letterruimte. Body copy is ingesteld op 16px met een 1,7 lijnhoogte voor comfortabel lezen op mobiel en desktop.

Layout systeem

Een aangepaste CSS-layout-systeem biedt containers, flexibele kolomgrids en een set van benoemde sectietypen. Hero-banners gebruiken een viewport-height-eenheid (5262 vh) met een donkere gradiëntoverlay, zodat de fotografie van de activiteit altijd duidelijk achter witte tekst leest. Routeblokken gebruiken een 60/40-afbeelding-tot-inhoudsplitsing die op afwisselende rijen wordt omgedraaid, waardoor een natuurlijk leesritme door lange pagina's wordt gecreëerd. Kaartgrids gebruiken CSS-gebruikte eigenschappen voor gatten en kolomtelling, waardoor ze van drie kolom op desktop naar twee op tablet en één op mobiel instorten.

Ontwikkeling

Stapel

Backend: PHP met een aangepaste framework in MVC-stijl. Page controllers uitbreiden een gedeelde basisklasse (MooiWeerWebpage) die routing, sessiebeheer, taalonderhandeling en sjabloon rendering behandelt.
Frontend: Semantische HTML5, SCSS samengesteld tot minified CSS, jQuery, en een kleine set van doel-specifieke bibliotheken (Swiper voor helden sliders, OwlCarousel voor activiteit carousels).
Database: MySQL/MariaDB met een modellaag met actief record voor boekingen, verhuurobjecten, agenten, prijstabel en winkelvoorraad.
Betalingen: Ogone/Ingenico betalingsgateway met ondersteuning voor iDeal, Mastercard en PayPal.

URL-routing

Een enkele front controller (index.php) analyseert maximaal zes URL-segmenten en stuurt ze naar de juiste pagina-klasse.

Meertalige ondersteuning

Het platform bedient inhoud in het Nederlands, het Engels, het Duits en het Frans.

Agent & Partner Portal

Reisebureaus en groepsboekingspartners loggen in via een apart portaal dat de beschikbaarheid in real-time weergeeft, onderhandelde prijsniveaus toepasseert en downloadable boekingsbevestigingen genereert. Dit kanaal vertegenwoordigt een aanzienlijk aandeel van groepsboekingen tijdens het piekseizoen.

Admin Backend

Een wachtwoordbeschermde beheerinterface stelt het personeel in staat om de beschikbaarheid van activiteiten te beheren, boekingen te verwerken, de inventaris van de winkel te updaten, rapporten te genereren en prijzen te configureren alles zonder aan de codebase te raken.

Ontwerpssysteemarchitectuur

Het V3-ontwerpsysteem is volledig gebouwd op CSS-aangepaste eigenschappen die in een enkel :root-blok worden gedeclareerd. Dit betekent dat de visuele identiteit kleuren, spacingschaal, typografie groottes, grensstijlen kan worden aangepast voor een nieuwe client door één bestand te bewerken, terwijl alle componentenmarkering en layout logica onveranderd blijven. Het systeem werd samen met de code gedocumenteerd als een herbruikbare ontwerpbrief, waardoor het eenvoudig kan worden toegepast op toekomstige projecten.

Veilige herontwerpstrategie

Omdat de boekings- en betalingsmachine bedrijfskritisch is, werd de V3-frontend ontwikkeld met behulp van een A/B-testarchitectuur. Een query-parameter of cookie schakelt de bodyclass tussen ab-variant-a en ab-variant-b, waardoor het nieuwe ontwerp CSS alleen voor de testvariant wordt geladen.

Belangrijkste kenmerken

Real-time activiteit beschikbaar met kalender- en lijstvoorziening
Online reservering met geïntegreerde betalingsverwerking (iDeal, Mastercard, PayPal)
Goederenwinkel met wagen en kassa
B2B-teambuilding- en evenementpakketten
Reisebureauportaal met live prijzen en bevestigingen
Viertalige interface (NL, EN, DE, FR)
Mobile-first responsive design
Personeel-administratiepaneel voor volledige operationele controle
Herbruikbaar CSS-ontwerpsysteem met gedocumenteerde componentenbibliotheek

Het resultaat

Het nieuwe design systeem verminderde front-end inconsistenties op de site en verkort de tijd die nodig is om nieuwe pagina types te bouwen aanzienlijk. Aangezien de design token architectuur merk-agnostisch is, is hetzelfde systeem sindsdien toegepast als uitgangspunt voor andere projecten.