De Voorhoede

front-end developers

De uitdaging: één front-end voor allen

HotelSpecials en BungalowSpecials bieden deals voor meer dan 8000 hotels en 700 bungalowparken. Dit doen ze via 10 verschillende Europese websites, waaronder Nederland, Duitsland en België. HotelSpecials en BungalowSpecials vroegen ons om een nieuwe front-end te ontwikkelen voor deze 10 websites.

  • Honden toegestaan? Het boeken van een hotel kent veel overeenkomsten met het boeken van een bungalow. Zowel bij het boeken van een hotel als een bungalow kies je een bestemming, periode en een reisgezelschap. Toch zijn er ook verschillen. Zo is bij bungalows meestal het reisgezelschap groter, kun je een huisdier meenemen en kiezen voor een eindschoonmaak.
  • Cash of creditcard? Er zijn niet alleen verschillen tussen bungalows en hotels, maar ook tussen de verschillende landen. Voorbeelden van landspecifieke verschillen zijn het verrekenen van toeristenbelasting, adresinvoer en betalingsmethoden, zoals iDEAL en creditcard.

Aan ons de uitdaging om op een slimme manier met de overeenkomsten en verschillen om te gaan in de front-end.

De oplossing: configureerbare componenten en vormgeving

Tijdens de eerste fase van het herontwerp gingen we aan de slag met het boekingsformulier. Op de oude websites waren er veel stappen om een boeking te maken, waardoor gebruikers een boeking soms niet afronden. Het doel van het herontwerp was om in minder stappen en op elk apparaat eenvoudig een hotel of bungalow te boeken.

  • Basisversie boekingformulier: we ontwikkelden eerst een basisversie van het boekingsformulier voor beide “labels”: HotelSpecials en BungalowSpecials. Deze rolden we uit in een aantal kleine landen met generieke functionaliteiten. Het nieuwe formulier werd in een paar maanden tijd, land voor land, verder ontwikkeld met specifieke functionaliteiten en live gezet. Tijdens het hele traject analyseerden we het bezoekersgedrag. Door de iteratieve werkwijze konden we deze feedback binnen een paar dagen in het boekingsformulier verwerken.
Header van basisboekingsformulier op smartphones
Header van basisboekingsformulier op smartphones
  • Componenten: een oplossing om met overeenkomsten en verschillen tussen beide labels om te gaan, is om het boekingsformulier te verdelen in componenten. Een voorbeeld van een component is de keuze of een huisdier meegaat. De componenten in het formulier zijn per label of land in- of uit te schakelen. Deze aanpak zorgt voor consistentie tussen de verschillende websites. Ook vergroot het de herkenbaarheid en het gebruikersgemak.
Hotelspecials.nl (links) en hotelspecials.be (rechts)
Hotelspecials.nl (links) en hotelspecials.be (rechts)
  • Vormgeving en vertalingen: de front-end moet ook omgaan met de verschillen in vormgeving tussen HotelSpecials en BungalowSpecials. We maakten gebruik van een thema-bestand per label met verwijzingen naar het logo en de kleurencodes. Dit maakt het eenvoudig om de vormgeving van een label te wijzigen of om in de toekomst een nieuw label toe te voegen. Ook is er per land één bestand met alle teksten voor de gebruikersinterface van beiden labels. Een contentmanager kan de vertalingen gemakkelijk live aanpassen.

Het nieuwe boekingsfomulier is inmiddels live voor alle labels en landen. Ga naar hotelspecials.nl of bungalowspecials.nl en navigeer verder in het boekingsproces om het formulier te bekijken.

En verder

Op dit moment zijn we bezig om samen met HotelSpecials en BungalowSpecials de rest van de website te vernieuwen: de zoekfunctie en alle pagina's met hotel- en bungalowinformatie. De vernieuwing van de rest van de website zal in de loop van 2016 beschikbaar komen voor gebruikers.

Het resultaat

  • Live binnen 8 weken in meerdere landen, later landspecifieke functionaliteit toegevoegd
  • Significant hogere conversie, doordat het boeken sneller en eenvoudiger is vanaf elk apparaat
  • Een schaalbare front-end oplossing waarmee je eenvoudig nieuwe landen/labels kunt toevoegen