Refonte du site MooiWeer

MooiWeer Plateforme de réservation d'activités pour Terschelling

Rôle: La conception et le développement de la pile complète. Le type: Une application web personnalisée . La version suivante: Redesign V3

À propos du projet

MooiWeer est la plate-forme de réservation en ligne pour les activités en plein air sur Terschelling, une île néerlandaise de la mer du Wadden. Les visiteurs peuvent parcourir, comparer et réserver des activités telles que le kayak, la randonnée, le vélo de montagne, le golf et le paintball directement via le site Web. La plate-forme prend également en charge la vente de marchandises, les forfaits de création d'équipe pour les entreprises et un portail de réservation dédié pour les agents de voyages et les partenaires.

V3 est une refonte de la plateforme. L'objectif était de moderniser l'identité visuelle, d'améliorer la conversion grâce à une architecture d'information plus claire et de construire un système de conception réutilisable qui pourrait servir de modèle pour les projets futurs tout cela sans perturber le moteur de réservation existant, les intégrations de paiement ou les flux de travail d'agents dont l'entreprise dépend.

Conception

Principes de conception

La géométrie aiguisée. Aucun coin arrondi nulle part sur l'interface. Chaque élément cartes, boutons, entrées, images utilise un bord dur de 90 degrés. Cela donne au site un caractère plein air confiant qui fait référence à des cartes de piste et à des équipements de terrain plutôt qu'à des applications de consommation douces.
Typographie en majuscules en tant que structure. Les titres, les étiquettes, les boutons et les articles de navigation utilisent des majuscules avec un espacement de lettres suivi. Cela crée une hiérarchie visuelle claire et renforce le ton actif et énergique de la marque.
Une couleur accentuée comme la colonne vertébrale. Une seule marque verte (#7cbe33) traverse toute l'interface: la limite de 3px au bas de l'en-tête, les sous-titres de navigation active, les limites supérieures de la carte, les boutons CTA, les arrière-plans d'icônes et les états de lien.
Alternation de sections sombre/lumière. Les sections de page alternent entre une marine sombre (#1a2e3a), un blanc blanc (#f5f4f0), et des arrière-plans blancs. Cela crée du rythme et permet à chaque bloc de contenu de respirer sans compter sur une décoration graphique supplémentaire.

Palette de couleurs

Verte (primaire): #7cbe33
Bleu (secondaire): #038ea9
La marine noire: 1a2e3a
À l'extérieur: #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0 #f5f4f0
Le texte du corps: #e2e2e

Typographie

Le site utilise SupriaSans, un sans-serif géométrique, en quatre poids (300, 400, 700, 900).

Système de mise en page

Un système de mise en page CSS personnalisé fournit des conteneurs, des grilles de colonnes flexibles et un ensemble de types de sections nommées. Les bannières héros utilisent une unité de hauteur de vue (5262 vh) avec une superposition de gradient sombre afin que la photographie d'activité lise toujours clairement derrière le texte blanc. Les grilles de cartes utilisent des propriétés personnalisées CSS pour les trous et le comptage des colonnes, passant de trois colonnes sur ordinateur de bureau à deux sur tablette et une sur mobile.

Développement

La pile

Retour en arrière: PHP avec un framework de style MVC personnalisé. Les contrôleurs de page étendent une classe de base partagée (MooiWeerWebpage) qui gère le routage, la gestion de session, la négociation de langage et le rendu des modèles.
Front-end: HTML5 sémantique, SCSS compilé en CSS minifié, jQuery, et un petit ensemble de bibliothèques spécifiques à des fins (Swiper pour les curseurs héros, OwlCarousel pour les carousels d'activité).
Base de données: MySQL/MariaDB avec une couche de modèle d'enregistrement actif pour les réservations, les objets de location, les agents, les tables de prix et l'inventaire des magasins.
Les paiements: Une passerelle de paiement Ogone/Ingenico avec support iDeal, Mastercard et PayPal. Un gestionnaire de notification dédié traite les rappels de paiement asynchrones et met à jour l'état des réservations en temps réel.

Routage d' URL

Un seul contrôleur frontal (index.php) analyse jusqu'à six segments d'URL et les envoie à la classe de page appropriée. Cela produit des URL propres et lisibles pour les activités (/activiteiten/kayak-terschelling), les étapes de réservation et les produits de magasin sans dépendance à la complexité de réécriture du serveur Web.

Soutien multilingue

La plateforme propose des contenus en néerlandais, en anglais, en allemand et en français.

Portal des agents et partenaires

Les agents de voyages et les partenaires de réservation de groupe se connectent via un portail séparé qui affiche la disponibilité en temps réel, applique les niveaux de prix négociés et génère des confirmations de réservation téléchargeables.

Retour de l'administrateur

Une interface de gestion protégée par mot de passe permet au personnel de gérer la disponibilité des activités, de traiter les réservations, de mettre à jour l'inventaire des magasins, de générer des rapports et de configurer les prix tout cela sans toucher la base de code.

Architecture des systèmes de conception

Le système de conception V3 est entièrement construit sur des propriétés personnalisées CSS déclarées dans un seul bloc :root. Cela signifie que l'identité visuelle couleurs, échelle d'espacement, tailles de typographie, styles de bord peut être adaptée pour un nouveau client en éditant un fichier, tandis que toutes les composantes de marquage et la logique de mise en page restent inchangées. Le système a été documenté en tant que résumé de conception réutilisable à côté du code, ce qui facilite son application à de futurs projets.

Stratégie de redessinage sûre

Parce que le moteur de réservation et de paiement est critique pour l'entreprise, le frontend V3 a été développé en utilisant une architecture de test A / B. Un paramètre de requête ou cookie commute la classe de carrosserie entre ab-variant-a et ab-variant-b, chargant le nouveau design CSS uniquement pour la variante de test. Cela a permis de tester le nouveau design en production avec un trafic réel avant une coupure complète, sans risque pour le flux de réservation.

Caractéristiques clés

Disponibilité des activités en temps réel avec vue du calendrier et des listes
Réservation en ligne avec traitement intégré des paiements (iDeal, Mastercard, PayPal)
Boutique de marchandises avec panier et caisse
Packages de création d'équipe et d'événements B2B
Portail d'agents de voyages avec prix et confirmations en direct
Interface en quatre langues (NL, EN, DE, FR)
Conception réactive mobile-first
Panneau d'administration du personnel pour un contrôle opérationnel complet
Système de conception CSS réutilisable avec bibliothèque de composants documentée

Le résultat

La refonte V3 a modernisé une plateforme qui servait des milliers de réservations par saison tout en maintenant intactes toutes les intégrations et les flux de travail existants. Le nouveau système de conception a réduit les incohérences de front-end sur le site et a réduit considérablement le temps nécessaire à la construction de nouveaux types de pages. Parce que l'architecture des jetons de conception est agnostique de la marque, le même système a depuis été appliqué comme point de départ pour d'autres projets.