Campingfrankrijk.eu: een online campinggids met snel en gebruiksvriendelijk filter.

De website Campingfrankrijk.eu van Reiscompany is een online campinggids met camping adressen in Frankrijk. Het doel van de website is om kampeerders op een overzichtelijke wijze in contact te brengen met campings in Frankrijk. Gebruiksvriendelijk filteren is de kracht van Campingfrankrijk.eu. De website bevat een grote database met campings en speelt in op niches binnen het campingaanbod en de Franse gebieden. User Experience en snelheid zijn hierbij de twee belangrijkste factoren.

Naar website

Om aan de wensen van de gebruiker te blijven voldoen en om de online concurrentie voor te blijven was een nieuwe website nodig. Meer dan de helft van de bezoekers komt via mobiel binnen. De oude website voldeed niet meer aan de huidige eisen, zoals responsiveness en snelheid. De nieuwe responsive website die Level Level de afgelopen maanden heeft ontwikkeld, biedt de mogelijkheid om de informatie van een camping nog completer en visueler aan te bieden.

Optimale gebruikerservaring

Een mooie uitdaging binnen dit project is de balans om zowel de content managers als de eindgebruiker een optimale gebruikerservaring te bezorgen. We hebben veel tijd gestoken in de visuele transities aan de front-end. Het navigeren door de site en het filteren van zoekresultaten voelen daardoor zeer prettig en natuurgetrouw aan. Al zeggen we het zelf. Alle animaties zijn functioneel en verduidelijkend, zonder dat ze te veel afleiden. De campingdetailpagina is een mooi voorbeeld en een kunststukje op zich. Hierbij was het aan ons de taak om de enorme hoeveelheid informatie over een camping, op een heldere en overzichtelijke manier te presenteren voor alle mogelijke devices en schermgro

Marco Boekesteijn
Developer

Een mooie uitdaging binnen dit project is de balans om zowel de content managers als de eindgebruiker een optimale gebruikerservaring te bezorgen. We hebben veel aandacht gestoken in de visuele transities aan de front-end. De website moest aan de ene kant super flexibel zijn en aan de andere kant consistentie uitstralen. Ik denk dat we hierin een mooie balans in hebben gevonden.

Filteren

De filter is de belangrijkste functionaliteit van de website. Je vindt het filter dan ook overal terug. Met de overzichtelijke filterfunctie kies je makkelijk per regio, plaats, thema of  kenmerk van een camping. De ene kampeerder wil met de hond komen en de andere kampeerder wil weten of het zwembad omheind is voor de veiligheid van zijn/haar kids. Het filter verwerkt al deze specifieke eisen.

Onze grootste uitdaging bij de ontwikkeling van de filter was de snelheid van de zoekactie in de grote en steeds groeiende database met campings. Een langzame zoekactie is funest voor de gebruikerservaring. Om ervoor te zorgen dat de zoekacties niet te lang zouden duren hebben we het een en ander moeten optimaliseren.

Wanneer er een filter wordt geselecteerd wordt er een signaal naar de server gestuurd, dit signaal wordt opgepakt, de resultaten worden opgezocht en teruggestuurd naar het scherm van de bezoeker. Dit alles overigens zonder de pagina opnieuw te hoeven laden.

Standaard wil WordPress in dit geval alles wat hij heeft op de achtergrond laden. We hebben echter enkel de zoekresultaten nodig. Door bij dergelijke acties de te laden code te minimaliseren hebben we een enorme snelheidswinst weten te boeken. Combineer deze optimalisatie met een slim cache systeem (resultaten tijdelijk opslaan van eerder gedane zoekopdrachten) en we hebben een website met superveel content met uitgebreide zoekmogelijkheden die zonder problemen en snel resultaten weergeeft.

Wanneer het filter klaar is met het ophalen van de gewenste resultaten zorgen we er met ‘lazy-loading’ voor dat alle afbeeldingen pas ingeladen worden als ze echt nodig zijn. Hiermee beperken we het dataverkeer en genereren we extra snelheid. Door deze techniek te combineren met de op maat ingerichte server configuratie, is het een rete-snelle website geworden, maar is het toch een puur WordPress project gebleven.

Er zijn meerdere soorten filters te vinden, op de homepagina is een filter geïntegreerd waarbij regio en ligging van de camping in eerste instantie de resultaten bepalen. Later in de flow kan de bezoeker de zoekactie verder specificeren. Het aantal keuzevelden hebben we hier bewust beperkt gehouden zodat de gebruiker door de bomen het bos nog kan zien. Vanaf de homepagina kan er ook gebruik gemaakt worden van een klikbare kaart. Op deze manier kan de bezoeker, zonder de namen van alle regios te kennen, makkelijk aangeven waar hij of zij in Frankrijk op vakantie zou willen. Een extra stukje gebruiksvriendelijkheid.

Landingspagina’s

Met behulp van de flexibele templates kunnen er oneindig veel landingspagina’s gemaakt worden. Deze landingspagina’s zijn bedoeld om gelijk een ‘gepersonaliseerde’ pagina te krijgen waar de gebruiker naar op zoek is. Als voorbeeld kunnen we kijken naar de Ardeche en Aquitaine landingspagina’s, beide zijn gemaakt met hetzelfde template maar dankzij de eerder genoemde LEGO blokken kunnen deze pagina’s voorzien worden van een andere indeling. Deze indeling kan perfect afgestemd worden op de informatie die de beheerder wil delen. Naast dat deze landingspagina’s inspelen op de behoefte van de bezoeker zijn deze landingspagina’s ook geoptimaliseerd voor zoekmachines wat op zijn beurt voor meer bezoek kan zorgen.

Conversie

De website brengt kampeerders in contact met de campingeigenaren. Op de website Campingfrankrijk.eu is het voor campingeigenaren mogelijk hun camping onder de aandacht te brengen. Doorverwijzen naar campingwebsites is een belangrijk onderdeel van de website. De bezoekers worden verleid om door te klikken naar de website van de camping waar ze interesse in hebben. Dit hebben we met een aantal verschillende ‘call-to-actions’ gedaan.

Op de homepagina en landingspagina’s zijn de campingblokken verrijkt met sfeerbeelden om het aantrekkelijk te maken om verder te klikken. Bij de filterpagina is daarentegen weer de keuze gemaakt om de campings in een lijst weer te geven, zodat bezoekers (zeker op hun tablet en telefoon) er lekker doorheen kunnen scrollen.

LEGO blokken

In dit project hebben we gekozen voor flexibele templates. Deze templates bestaan uit blokken die op zichzelf verschillende soorten content kunnen bevatten.

Wij vergelijken deze blokken met LEGO. LEGO stenen zijn er in een hele hoop maten, vormen en kleuren. Iedereen kan ermee overweg, maar geef je 10 mensen exact dezelfde stenen dan is de kans groot dat geen enkele creatie gelijk is. In onze ogen moet een beheerder van een website op eenzelfde manier zijn pagina’s kunnen indelen, maar is een kader ook belangrijk om een consistente gebruikservaring te waarborgen. Voor CampingFrankrijk.eu hebben we verschillende blokken gecreëerd, waardoor de beheerder zijn pagina’s in kan delen naar zijn of haar wens. Benieuwd hoe dat in de praktijk in z’n werk gaat? Bekijk onderstaande video voor een demo.

En verder?

Is dit project met de oplevering nu klaar? Nee, integendeel. Campingfrankrijk.eu is een platform dat groeit en continue met de markt moet kunnen mee bewegen. Op dit moment zijn we bijvoorbeeld bezig met het verkennen van een module om de beschikbaarheid direct op de website te kunnen raadplegen.

Zoek je nog een vakantie adresje? Check it out! 

Het team dat aan Camping Frankrijk werkt

Michiel Mos

Creative Lead

Suzanne Quartel

Designer