Een reiswebsite voor Joker: van inspiratie tot conversie

Joker is een Belgische, onafhankelijke reisorganisatie en sinds haar ontstaan in 1981 pionier in duurzaam toerisme. Ze bieden een breed spectrum aan reiservaringen, voor alle leeftijden. Dat gaat van de verkoop van enkel vliegtickets tot reizen in kleine groep en individuele reizen op maat van gezinnen, koppels, vrienden… Wieni werd gecontacteerd om de volledige online ervaring te verbeteren, ontwerpen en ontwikkelen. 

Wat waren de belangrijkste aandachtspunten bij de reiswebsite van Joker?

  • De sfeer van een groepsreis zo goed mogelijk visualiseren
  • Interactieve routekaarten met Mapbox
  • Gebruikers kunnen groepsreizen automatisch “volgen” (update i.v.m. beschikbaarheden)
  • Online vs offline boeken van een reis
  • Koppeling met API’s en webservices van o.a. vluchttarieven en facturatiesoftware
  • Hoge bezoekerspieken opvangen tijdens de vroegboekacties

Wat typeert een reiswebsite

Inspiratie opdoen

Een reiswebsite moet natuurlijk de volledige “buying funnel” ondersteunen, maar een reis van duizend euro of meer koop je natuurlijk niet in 1 klik of met 1 bezoekje aan de website. Daarom namen we de volledige user journey onder de loep van inspiratie tot conversie.

De website heeft dus als primair uitgangspunt om bezoekers te inspireren, informeren en te prikkelen. Daarom werkten we aan een platform waar beleving sterk aanwezig is. Van de groepsreizen en individuele reizen wilden we online zo goed mogelijk de sfeer weergeven. Uiteraard bestaat dit uit veel fotomateriaal, interactieve kaartjes, testimonials van reizigers, zoveel mogelijk informatie over de bestemming, etc… Ook het uitwerken van de Joker-Reisblog, met zo’n 200 blogartikels gebaseerd op reiservaringen van Joker-medewerkers, hoort bij het luik inspiratie.

Anderzijds moeten alle producten bereikbaar zijn en bezoekers met verschillende intenties en in verschillende beslissingsfases capteren (inspiratie zoeken, producten bekijken, boeken…). 

Daarom ontwierpen we aparte continent- en landenpagina’s, maar zetten we vooral in op een krachtige facet-search (obv elastic search) om alle groepsreizen en individuele reizen te kunnen filteren op prijs, bestemming, periode, etc…

Joker - detail

Links: facet searchpagina - Rechts: reis detailpagina

Online & offline boeken

Joker - reiskantoor

Contactgegevens reiskantoor en afspraak-knop in de header

Joker investeert in 10 verkoopskantoren. Vooral voor vliegtickets en individuele reizen op maat heeft Joker als primaire filosofie dat je best offline boekt in één van de kantoren voor persoonlijke informatie en de laatste en laagste prijzen. We zetten dus voldoende call-to-actions naar je lokaal reiskantoor, maar ook benadrukken we prominent bovenaan het “nabije” karakter van een reiskantoor in je buurt, door de contactgegevens onmiddellijk beschikbaar te maken en een afspraak te boeken.  

Joker - Boeking

Boeking van een groepsreis

Maar natuurlijk kan je niet van iedereen verwachten dat ze een Joker-reiskantoor gaan bezoeken. Daarom moest de website ook het volledige boekingsproces van groepsreizen ondersteunen en het aanvragen van individuele reizen. Dan komen er een aantal cruciale zaken bij kijken zoals realtime beschikbaarheden, prijsberekening, online betalingen via Ingenico, koppeling met facturatiesoftware, etc…

Koppeling met Servico en andere externe services

Joker gebruikt het softwarepakket Swing.NET en SwingDynamic van Servico voor de volledige administratie van hun on- en offline boekingen. In dit systeem worden niet alleen de praktische data van elke (individuele of groeps-) reis bijgehouden maar ook de status van elke trip (zie verder) en de status van elke boeking op elke trip.

Tijdens het bouwen van de website hebben we hierdoor een aantal koppelingen gebouwd. Zo worden alle reizen en trips (de verschillende vertrekdata van een reis ) op de Joker site periodiek opgevraagd en aangepast. Zo krijgt de bezoeker van de website steeds accurate informatie over hoeveel plaatsen er nog beschikbaar zijn, wat een reis kost, en of de trip nog wel beschikbaar/boekbaar is.

Wanneer een bezoeker dan uiteindelijk een trip boekt, wordt tijdens het boekingsproces ook voortdurend gecommuniceerd met SwingTravel omtrent de beschikbaarheid van opties en plaatsen, en ook de uiteindelijke boeking wordt doorgestuurd zodat dit proces volledig geautomatiseerd kan verlopen.

Om deze koppelingen te kunnen bouwen hebben we ons moeten verdiepen in de uitgebreide technische documentatie van het Servico XML systeem.  

Interactieve routekaarten met Mapbox

Interactieve kaartjes met uitgestippelde routes mochten zeker niet ontbreken op de nieuwe joker.be-website. 

In het CMS kunnen de redacteurs een volledig reisprogramma samenstellen met:

  • De bezochte plaatsen (en bijbehorende coördinaten), met duidelijke begin- en eindplaats van de reis
  • Een chronologische volgorde: stop 1, stop 2...
  • Een kleine samenvatting bij elke stop
  • Duur in dagen 
  • De fysieke moeilijkheidsgraad aangeduid met de stappertjes
  • Type verplaatsing: ga je met de boot, de trein of het vliegtuig?
  • Optionele trips
Joker - kaart

Een visualisatie van een reis door Centraal-Azië ziet er zo uit

Op basis van deze data wordt er voor elke groeps- en individuele reis een kaartje gegenereerd dat de gevolgde route visualiseert. De grootste uitdaging hierbij was dat we rekening moesten houden met alle mogelijke type routes, horizontaal uitgestrekt van het westen tot het oosten, verticaal van het zuiden tot het noorden en alles ertussen. 

Joker - kaart

Programma en route van de Madagaskar groepsreis met een programma-switcher

Jaarlijks veranderen de routes van de reizen lichtjes, als uitbreiding hebben we de mogelijkheid toegevoegd om verschillende (jaar)programma's toe te voegen met de bijhorende kaartvisualisatie. De gebruiker kan zo switchen tussen 2 reisroutes. 

Switch van Google Maps naar Mapbox

De kaartjes werden in de eerste versie gerenderd a.d.h.v. de Google Maps API. joker.be en de bijhorende reispagina's trekken echter veel bezoekers met als gevolg dat er veel Google Maps API calls werden uitgevoerd. Door een aangepaste pricing bij Google werd er beslist om de switch van Google Maps naar Mapbox API te maken.

Mapbox vs Google Maps

Volg deze trip

Sommige deelnemers van groepsreizen beslissen meteen om te boeken, anderen nemen een vrijblijvende optie van een week. Om een derde groep aan Joker te binden, ontwikkelden we op latere datum de mogelijkheid om de status van een bepaalde trip (een reis met een bepaalde vertrekdatum) te kunnen opvolgen.

Je kan als bezoeker via automatische e-mails op de hoogte gehouden worden van de verschillende fases binnen het proces van een trip:

  • Wanneer een trip een prijs krijgt
  • Wanneer een trip meer dan vijf boekingen heeft
  • Wanneer een trip ‘gegarandeerd’ wordt m.a.w. wanneer de trip ook effectief zal plaatsvinden
  • Wanneer een trip bijna volgeboekt is
  • Wanneer een trip volgeboekt is
  • Wanneer een trip geannuleerd wordt
  • Wanneer het Vroegboekvoordeel gaat vervallen  
Joker - volg de trip overzicht

Lijst van volgers per trip binnen Campaign Monitor

Het bijhouden van de huidige status van elke trip gebeurt intern binnen de website. Voor het versturen van de e-mails zelf worden binnen Campaign Monitor lijsten bijgehouden per trip en worden er transactionele mails verzonden naar deze lijsten.

Joker - volg de trip overzicht

Overzicht status geabonneerde bezoekers per trip

Joker-redacteurs kunnen in de backend de status van elke trip en de geabonneerde bezoekers bekijken. De status van elke trip kan ook worden bijgesteld. Er kunnen ook manuele e-mails gestuurd worden als dit nodig is. 

Het proces

Er was een heel nauwe samenwerking tussen Joker en Wieni van bij de start van het proces. Wireframes werden in een grotere groep besproken met de mensen van Joker, maar vanaf development kwam de product owner van Joker elke dinsdagochtend langs voor overleg. Tijdens dit overleg werd er een status gegeven, werden bepaalde functionaliteiten nauwer in detail besproken of werd er een demo van een ontwikkelde functionaliteit gegeven. Dit alles werd bijgehouden in een gedeeld meeting notes document, iets waar we nog vaak naar teruggegrepen hebben.   

Websites maken met Wieni wordt nooit een duffe bedoening! De creatieve, gemoedelijke sfeer van hun team maakte van ons gezamenlijke traject een leuke boel, zonder in te boeten aan efficiëntie of kwaliteit. De toewijding van de project manager en onze wekelijkse meetings (in hun prachtig ingerichte kantoor!) gaven het project de juiste vaart. Wieni denkt altijd spontaan mee na, ook als het verder gaat dan website-materie. Hoera voor het werkplezier, hoera voor de opmerkelijke stijging in verkoopscijfers!

Marij Lambert, Communicatie & Marketing Joker

Het developmentproces werd opgesplitst in concrete sprints. Elke sprint omvatte een hoofdtopic of epic, bijvoorbeeld ‘groepsreizen’ of ‘vluchten’. Na oplevering van een sprint werd er een korte demo gegeven en een testpagina aangemaakt waarmee de klant zelf aan de slag kon.

Joker - Live gaan

De klant zet de website zelf live door de deploy-knop in te drukken op de laptop van onze developer

De klant kreeg toegang tot een wiki en issue tracking systeem (Gitlab) waar de concrete issues opgevolgd werden door zowel Wieni als de product owner en haar team. 

De dag van live gaan, kwam de Joker product owner zelf langs om de laatste zaken te finaliseren en de nieuwe joker.be live te zetten in het livecenter. 

Continue uitbreidingen

Na meer dan 2 jaar worden er nog continu uitbreidingen gedaan aan joker.be. Per sprint worden er een aantal issues of topics bepaald die aangepast zullen worden. Zodra deze aanpassingen klaar zijn en Wieni dit getest heeft, kan de klant dit testen op de staging omgeving. Indien ok, mag dit alles live gezet worden op het daarvoor afgesproken moment. Ook na deploy worden de aanpassingen op de live site bekeken vooraleer de tickets naar de klant gaan. De doorlooptijd van een sprint bedraagt gemiddeld 2 à 3 weken.