Refonte du site MooiWeer

MooiWeer — Plateforme de réservation d’activités à Terschelling

Rôle : Conception et développement de l’ensemble de l’application | Type : Application web sur mesure | Version : Refonte V3

À propos du projet

MooiWeer est la plateforme de réservation en ligne d’activités de plein air sur Terschelling, une île néerlandaise de la mer des Wadden. Les visiteurs peuvent parcourir, comparer et réserver directement sur le site des activités telles que le kayak, la randonnée, le VTT, le golf et le paintball. La plateforme propose aussi une boutique, des formules de cohésion d’équipe pour les entreprises et un portail de réservation réservé aux agences de voyages et aux partenaires.

La V3 est une refonte complète de la plateforme. L’objectif était de moderniser l’identité visuelle, d’améliorer la conversion grâce à une organisation plus claire de l’information et de créer un système de design réutilisable pour de futurs projets, tout en préservant le moteur de réservation, les intégrations de paiement et les procédures des agences dont dépend l’activité.

Design

Principes de design

Une géométrie angulaire. L’interface ne comporte aucun angle arrondi. Chaque élément — carte, bouton, champ et image — adopte des angles droits à 90 degrés. Ce choix donne au site un caractère affirmé, tourné vers le plein air, qui évoque les cartes de randonnée et le matériel de terrain plutôt que les formes douces des applications grand public.
Des majuscules pour structurer l’information. Les titres, libellés, boutons et éléments de navigation sont en majuscules avec un espacement accru entre les lettres. Ce choix crée une hiérarchie visuelle claire et renforce le ton actif et énergique de la marque.
Une couleur d’accent comme fil conducteur. Un vert de marque unique (#7cbe33) traverse toute l’interface : bordure de 3 px en bas de l’en-tête, soulignement de la navigation active, bordures supérieures des cartes, boutons d’action, fonds des icônes et états des liens. Modifier cette seule valeur dans le système de design suffit à changer la couleur de tout le site.
Une alternance de sections sombres et claires. Les sections alternent entre un bleu marine sombre (#1a2e3a), un blanc cassé (#f5f4f0) et un fond blanc. Cela crée un rythme et laisse respirer chaque bloc de contenu sans décoration graphique supplémentaire.

Palette de couleurs

Vert principal : #7cbe33
Bleu secondaire : #038ea9
Bleu marine sombre : #1a2e3a
Blanc cassé : #f5f4f0
Texte courant : #2e2e2e

Typographie

Le site utilise SupriaSans, une police géométrique sans empattement, en quatre graisses : 300, 400, 700 et 900. Les titres sont en majuscules, avec des graisses de 700 à 900 et un espacement ouvert entre les lettres. Le texte courant est défini à 16 px avec un interligne de 1,7 pour une lecture confortable sur mobile comme sur ordinateur.

Système de mise en page

Un système CSS sur mesure fournit des conteneurs, des grilles de colonnes flexibles et des types de sections nommés. Les bannières principales utilisent une hauteur de 52 à 62 vh et un dégradé sombre superposé, pour que les photographies d’activités restent lisibles derrière le texte blanc. Les blocs de parcours répartissent l’espace à 60/40 entre image et contenu, en inversant leur position une ligne sur deux pour créer un rythme naturel sur les pages longues. Les grilles de cartes utilisent des propriétés personnalisées CSS pour les espacements et le nombre de colonnes : trois sur ordinateur, deux sur tablette et une sur mobile.

Développement

Technologies

Backend : PHP avec un framework sur mesure de type MVC. Les contrôleurs de pages héritent d’une classe de base partagée, MooiWeerWebpage, qui assure le routage, la gestion des sessions, la sélection de la langue et le rendu des gabarits.
Frontend : HTML5 sémantique, SCSS compilé en CSS minifié, jQuery et quelques bibliothèques spécialisées : Swiper pour les diaporamas principaux et OwlCarousel pour les carrousels d’activités.
Base de données : MySQL/MariaDB, avec une couche de modèles Active Record pour les réservations, les objets à louer, les agences, les grilles tarifaires et les stocks de la boutique.
Paiements : passerelle Ogone/Ingenico prenant en charge iDeal, Mastercard et PayPal. Un gestionnaire dédié traite les notifications de paiement asynchrones et actualise l’état des réservations en temps réel.

Routage des URL

Un contrôleur frontal unique, index.php, analyse jusqu’à six segments d’URL et oriente la requête vers la classe de page appropriée. Il produit des URL claires et lisibles pour les activités (/activiteiten/kayak-terschelling), les étapes de réservation et les produits de la boutique, sans dépendre de règles complexes de réécriture du serveur web.

Prise en charge de plusieurs langues

La plateforme propose ses contenus en néerlandais, anglais, allemand et français. La langue choisie est conservée dans la session et peut être modifiée à tout moment sans perdre le contenu du panier ni l’avancement d’une réservation.

Portail des agences et partenaires

Les agences de voyages et les partenaires de réservation de groupes disposent d’un portail distinct qui affiche les disponibilités en temps réel, applique les grilles tarifaires négociées et génère des confirmations de réservation téléchargeables. Ce canal représente une part importante des réservations de groupes en haute saison.

Interface d’administration

Une interface de gestion protégée par mot de passe permet au personnel de gérer les disponibilités des activités, de traiter les réservations, d’actualiser les stocks, de produire des rapports et de configurer les tarifs, sans modifier le code.

Architecture du système de design

Le système de design V3 repose entièrement sur des propriétés personnalisées CSS déclarées dans un bloc :root unique. L’identité visuelle — couleurs, échelle d’espacement, tailles de texte et styles de bordure — peut ainsi être adaptée à un nouveau client en modifiant un seul fichier, sans changer le balisage des composants ni la logique de mise en page. Un cahier de design réutilisable accompagne le code pour faciliter son application à de futurs projets.

Une stratégie de refonte sécurisée

Le moteur de réservation et de paiement étant essentiel à l’activité, la nouvelle interface V3 a été développée avec une architecture de test A/B. Un paramètre de requête ou un cookie fait basculer la classe de l’élément body entre ab-variant-a et ab-variant-b ; les nouvelles feuilles de style ne sont chargées que pour la variante de test. Le nouveau design a ainsi pu être testé en production avec un trafic réel avant la bascule complète, sans risque pour le parcours de réservation.

Fonctions principales

Disponibilités des activités en temps réel, en calendrier ou en liste
Réservation en ligne avec paiement intégré par iDeal, Mastercard ou PayPal
Boutique avec panier et commande
Formules de cohésion d’équipe et d’événements pour les entreprises
Portail des agences de voyages avec tarifs à jour et confirmations
Interface en quatre langues : NL, EN, DE et FR
Design adaptatif conçu d’abord pour le mobile
Panneau d’administration donnant au personnel la maîtrise de toutes les opérations
Système de design CSS réutilisable avec bibliothèque de composants documentée

Résultat

La refonte V3 a modernisé une plateforme qui traitait des milliers de réservations par saison tout en préservant les intégrations et procédures existantes. Le nouveau système de design a réduit les incohérences de l’interface et nettement raccourci le temps nécessaire à la création de nouveaux types de pages. Son architecture de variables de design étant indépendante de la marque, elle a depuis servi de point de départ à d’autres projets.