Herontwerp van de MooiWeer-website

MooiWeer — Boekingsplatform voor activiteiten op Terschelling

Rol: Ontwerp & full-stackontwikkeling | Type: Webapplicatie op maat | Versie: Herontwerp V3

Over het project

MooiWeer is het online boekingsplatform voor buitenactiviteiten op het Nederlandse Waddeneiland Terschelling. Bezoekers kunnen activiteiten zoals kajakken, wandelen, mountainbiken, golf en paintball bekijken, vergelijken en direct via de website boeken. Het platform ondersteunt ook de verkoop van merchandise, teambuildingarrangementen voor bedrijven en een apart boekingsportaal voor reisagenten en partners.

V3 is een volledig herontwerp van het platform. Het doel was de visuele identiteit te moderniseren, de conversie te verbeteren met een duidelijkere informatiestructuur en een herbruikbaar ontwerpsysteem te bouwen als basis voor toekomstige projecten. Dit moest gebeuren zonder verstoring van de bestaande boekingssoftware, betaalkoppelingen en werkprocessen voor reisagenten waarop het bedrijf vertrouwt.

Ontwerp

Ontwerpprincipes

Strakke geometrie. De interface gebruikt nergens afgeronde hoeken. Elk onderdeel, van kaarten, knoppen en invoervelden tot afbeeldingen, heeft rechte hoeken van 90 graden. Dit geeft de website een uitgesproken karakter dat past bij buitenactiviteiten en verwijst naar routekaarten en outdooruitrusting, in plaats van naar zacht vormgegeven consumentenapps.
Hoofdletters als structuurelement. Koppen, labels, knoppen en navigatie-items staan in hoofdletters met extra letterspatiëring. Dat zorgt voor een duidelijke visuele hiërarchie en versterkt de actieve, energieke uitstraling van het merk.
De accentkleur als verbindend element. Eén merkgroen (#7cbe33) komt in de hele interface terug: de 3px-rand onder de header, onderstrepingen in de actieve navigatie, bovenranden van kaarten, actieknoppen, pictogramachtergronden en linkstatussen. Door deze ene waarde in het ontwerpsysteem te wijzigen, verandert de kleur door de hele website.
Afwisseling tussen donkere en lichte secties. Secties wisselen donkerblauw (#1a2e3a), gebroken wit (#f5f4f0) en wit af. Dat geeft ritme en ruimte aan ieder inhoudsblok, zonder extra grafische versiering.

Kleurenpalet

Groen (primair): #7cbe33
Blauw (secundair): #038ea9
Donkerblauw: #1a2e3a
Gebroken wit: #f5f4f0
Lopende tekst: #2e2e2e

Typografie

De website gebruikt SupriaSans, een geometrisch schreefloos lettertype, in vier gewichten: 300, 400, 700 en 900. Koppen staan in hoofdletters met gewicht 700–900 en ruime letterspatiëring. De lopende tekst is 16px met een regelhoogte van 1.7, voor prettig lezen op mobiel en desktop.

Lay-outsysteem

Een eigen CSS-lay-outsysteem biedt containers, flexibele kolomrasters en benoemde sectietypen. Grote introductiebanners gebruiken een hoogte van 52–62 vh en een donkere verlooplaag, zodat witte tekst duidelijk leesbaar blijft over activiteitenfoto’s. Routeblokken verdelen beeld en inhoud in een verhouding van 60/40, met de volgorde om en om omgedraaid voor een natuurlijk leesritme op lange pagina’s. Kaartrasters gebruiken CSS custom properties voor tussenruimtes en kolomaantallen en passen zich aan van drie kolommen op desktop naar twee op tablet en één op mobiel.

Ontwikkeling

Technologie

Backend: PHP met een eigen framework volgens het MVC-principe. Paginacontrollers bouwen voort op een gedeelde basisklasse (MooiWeerWebpage) die routing, sessiebeheer, taalkeuze en templaterendering afhandelt.
Frontend: Semantische HTML5, SCSS gecompileerd naar verkleinde CSS, jQuery en een beperkte selectie bibliotheken met een specifiek doel: Swiper voor grote beeldsliders en OwlCarousel voor activiteitencarrousels.
Database: MySQL/MariaDB met een Active Record-modellaag voor boekingen, verhuurobjecten, reisagenten, prijstabellen en winkelvoorraad.
Betalingen: De Ogone/Ingenico-betaalgateway met ondersteuning voor iDeal, Mastercard en PayPal. Een aparte meldingsverwerker handelt asynchrone betaalberichten af en werkt de boekingsstatus direct bij.

URL-routing

Eén frontcontroller (index.php) verwerkt maximaal zes URL-segmenten en stuurt het verzoek naar de juiste paginaklasse. Dit levert duidelijke, leesbare URL’s op voor activiteiten (/activiteiten/kayak-terschelling), boekingsstappen en winkelproducten, zonder ingewikkelde herschrijfregels op de webserver.

Meertaligheid

Het platform biedt inhoud in het Nederlands, Engels, Duits en Frans. De taalvoorkeur wordt in de sessie bewaard en kan op ieder moment worden gewijzigd zonder verlies van de winkelwagen of de voortgang van een boeking.

Portaal voor reisagenten & partners

Reisagenten en partners voor groepsboekingen loggen in via een apart portaal. Dit toont de actuele beschikbaarheid, past afgesproken prijsstaffels toe en maakt boekingsbevestigingen beschikbaar als download. Dit kanaal verzorgt in het hoogseizoen een aanzienlijk deel van de groepsboekingen.

Beheeromgeving

Via een met wachtwoord beveiligde beheeromgeving kunnen medewerkers de beschikbaarheid van activiteiten beheren, boekingen verwerken, de winkelvoorraad bijwerken, rapporten maken en prijzen instellen, zonder code aan te passen.

Architectuur van het ontwerpsysteem

Het ontwerpsysteem van V3 bestaat volledig uit CSS custom properties in één :root-blok. Daardoor kan de visuele identiteit, met kleuren, tussenruimtes, tekstgroottes en randstijlen, voor een andere klant worden aangepast door één bestand te wijzigen. De componentmarkup en lay-outlogica blijven gelijk. Het systeem is naast de code vastgelegd in een herbruikbare ontwerpbeschrijving, zodat het eenvoudig in toekomstige projecten kan worden toegepast.

Aanpak voor een veilig herontwerp

Omdat de boekings- en betaalsoftware bedrijfskritisch is, is de V3-frontend ontwikkeld met een architectuur voor A/B-tests. Een queryparameter of cookie wisselt de bodyklasse tussen ab-variant-a en ab-variant-b. Alleen de testvariant laadt de nieuwe ontwerp-CSS. Zo kon het nieuwe ontwerp vóór de volledige overstap in productie met echte bezoekers worden getest, zonder risico voor het boekingsproces.

Belangrijkste functies

Actuele beschikbaarheid van activiteiten in kalender- en lijstweergaven
Online boeken met geïntegreerde betaling via iDeal, Mastercard en PayPal
Merchandisewinkel met winkelwagen en afrekenen
Teambuilding- en evenementenarrangementen voor bedrijven
Reisagentenportaal met actuele prijzen en bevestigingen
Interface in vier talen: NL, EN, DE en FR
Responsief ontwerp met mobiel als uitgangspunt
Beheerpaneel waarmee medewerkers de volledige bedrijfsvoering kunnen beheren
Herbruikbaar CSS-ontwerpsysteem met gedocumenteerde componentenbibliotheek

Resultaat

Het V3-herontwerp moderniseerde een platform dat duizenden boekingen per seizoen verwerkte, terwijl alle bestaande koppelingen en werkprocessen bleven functioneren. Het nieuwe ontwerpsysteem verminderde inconsistenties in de frontend en verkortte de bouwtijd voor nieuwe paginatypen aanzienlijk. Omdat de ontwerpvariabelen niet aan één merk zijn gebonden, is hetzelfde systeem inmiddels ook als uitgangspunt voor andere projecten gebruikt.