MooiWeer website redesign

Role: Full-stack design & development  |  Type: Custom web application  |  Version: V3 redesign

About the Project

MooiWeer is the online booking platform for outdoor activities on Terschelling, a Dutch Wadden Sea island. Visitors can browse, compare, and book activities such as kayaking, hiking, mountain biking, golf, and paintball directly through the website. The platform also supports merchandise sales, team-building packages for businesses, and a dedicated booking portal for travel agents and partners.

V3 is a ground-up redesign of the platform. The goal was to modernise the visual identity, improve conversion through clearer information architecture, and build a reusable design system that could serve as a template for future projects — all without disrupting the existing booking engine, payment integrations, or agent workflows that the business depends on.

Design

Design Principles

• Sharp geometry. No rounded corners anywhere on the interface. Every element — cards, buttons, inputs, images — uses a hard 90-degree edge. This gives the site a confident, outdoorsy character that references trail maps and field equipment rather than soft consumer apps.
• Uppercase typography as structure. Headings, labels, buttons, and navigation items use uppercase with tracked letter-spacing. This creates a clear visual hierarchy and reinforces the active, energetic tone of the brand.
• Accent colour as the spine. A single brand green (#7cbe33) runs through the entire interface: the 3px border at the bottom of the header, active navigation underlines, card top borders, CTA buttons, icon backgrounds, and link states. Swapping this one value in the design system recolours the entire site.
• Dark/light section alternation. Page sections alternate between a dark navy (#1a2e3a), an off-white (#f5f4f0), and white backgrounds. This creates rhythm and lets each content block breathe without relying on additional graphic decoration.

Colour Palette

• Green (primary): #7cbe33
• Blue (secondary): #038ea9
• Dark navy: #1a2e3a
• Off-white: #f5f4f0
• Body text: #2e2e2e

Typography

The site uses SupriaSans, a geometric sans-serif, in four weights (300, 400, 700, 900). Headings are set in uppercase at weights 700–900 with open letter-spacing. Body copy is set at 16px with a 1.7 line-height for comfortable reading on mobile and desktop alike.

Layout System

A custom CSS layout system provides containers, flexible column grids, and a set of named section types. Hero banners use a viewport-height unit (52–62 vh) with a dark gradient overlay so activity photography always reads clearly behind white text. Route blocks use a 60/40 image-to-content split that reverses on alternating rows, creating a natural reading rhythm down long pages. Card grids use CSS custom properties for gutters and column counts, collapsing from three columns on desktop to two on tablet and one on mobile.

Development

Stack

• Backend: PHP with a custom MVC-style framework. Page controllers extend a shared base class (MooiWeerWebpage) that handles routing, session management, language negotiation, and template rendering.
• Frontend: Semantic HTML5, SCSS compiled to minified CSS, jQuery, and a small set of purpose-specific libraries (Swiper for hero sliders, OwlCarousel for activity carousels).
• Database: MySQL/MariaDB with an active-record model layer for bookings, rental objects, agents, pricing tables, and shop inventory.
• Payments: Ogone/Ingenico payment gateway with iDeal, Mastercard, and PayPal support. A dedicated notification handler processes asynchronous payment callbacks and updates booking status in real time.

URL Routing

A single front controller (index.php) parses up to six URL segments and dispatches to the appropriate page class. This produces clean, readable URLs for activities (/activiteiten/kayak-terschelling), booking steps, and shop products without any dependency on web-server rewrite complexity.

Multilingual Support

The platform serves content in Dutch, English, German, and French. Language preference is stored in the session and can be switched at any point without losing cart or booking state.

Agent & Partner Portal

Travel agents and group booking partners log in through a separate portal that surfaces availability in real time, applies negotiated pricing tiers, and generates downloadable booking confirmations. This channel represents a significant share of group bookings during peak season.

Admin Backend

A password-protected management interface allows staff to manage activity availability, process bookings, update shop inventory, generate reports, and configure pricing — all without touching the codebase.

Design System Architecture

The V3 design system is built entirely on CSS custom properties declared in a single :root block. This means the visual identity — colours, spacing scale, typography sizes, border styles — can be adapted for a new client by editing one file, while all component markup and layout logic remains unchanged. The system was documented as a reusable design brief alongside the code, making it straightforward to apply to future projects.

Safe Redesign Strategy

Because the booking and payment engine is business-critical, the V3 frontend was developed using an A/B testing architecture. A query parameter or cookie switches the body class between ab-variant-a and ab-variant-b, loading the new design CSS only for the test variant. This allowed the new design to be tested in production with real traffic before a full cutover, with zero risk to the booking flow.

Key Features

• Real-time activity availability with calendar and list views
• Online booking with integrated payment processing (iDeal, Mastercard, PayPal)
• Merchandise shop with cart and checkout
• B2B team-building and event packages
• Travel agent portal with live pricing and confirmations
• Four-language interface (NL, EN, DE, FR)
• Mobile-first responsive design
• Staff admin panel for full operational control
• Reusable CSS design system with documented component library

Outcome

The V3 redesign modernised a platform that was serving thousands of bookings per season while keeping all existing integrations and workflows intact. The new design system reduced front-end inconsistencies across the site and cut the time needed to build new page types significantly. Because the design token architecture is brand-agnostic, the same system has since been applied as the starting point for other projects.