Website redesignen? Dit zijn de 5 learnings van HotelSpecials

2017 was het jaar dat gebruikers voor het eerst vaker via hun smartphone dan een desktop computer online gingen. Dit fenomeen zag HotelSpecials in de cijfers terug. Dit zijn de learnings van de website-redesign van het bedrijf, dat één van de mobielvriendelijkste reissites maakte. “Het herbouwen van een site moet met het ontwikkelen van een brandingstrategie beginnen.”

In 2016 was het aandeel sessies via een smartphone 31 procent en in 2017 was dit 42 procent. Tegelijkertijd daalden de sessies via desktop naar 35 procent. In het eerste kwartaal van 2018 zijn de mobiele sessies nog verder gegroeid naar 45 procent.

De boodschap: het is van essentieel belang dat je platform geoptimaliseerd is voor mobiel gebruik. HotelSpecials koos er al vroeg voor om een mobiele versie van de website aan te bieden, met goed resultaat. Uit de laatste cijfers van Google blijkt dat de Nederlandse site in de top-3 is geëindigd van meest gebruiksvriendelijke mobiele websites in de reisbranche.

Voor een duurzame en toekomstgerichte platform vonden wij dit echter niet genoeg. Daarom hebben wij al in een eerder stadium besloten om onze website te herbouwen en responsive te maken. Dit bleek een langer en ingewikkelder proces dan voorzien.

Responsive website – waarom eigenlijk?

Het belangrijkste verschil tussen surfen op een desktopcomputer of laptop en op een mobiel of tablet is de schermgrootte. Als je een 100 procent voor desktop ontwikkelde website op jouw smartphone bekijkt, schalen afbeeldingen en buttons naar piepkleine afmetingen en teksten zijn alleen nog maar met een vergrootglas leesbaar. Mobiel surfen wordt dus lastig en de kans, dat jouw bezoekers de website meteen verlaten (bouncen), is vrij hoog.

De bounce rate van een website en pagina’s heeft daarnaast invloed op de waarde die Google aan je website geeft. Als bezoekers je website snel weer verlaten zonder door te klikken, geeft dit een negatief signaal aan Google, want de website kan de bezoeker blijkbaar niet geven waar hij naar op zoek was. Anders bekeken: Google beloont websites die op alle toestellen makkelijk te navigeren zijn met betere rankings.

Voor de websites van HotelSpecials hebben we daarom al vroeg een aparte mobiele website ontwikkeld. Ondanks de waardering voor de gebruiksvriendelijkheid zagen we dat de conversie achterbleef in vergelijking met de desktop versie. De mobiele versie is niet geoptimaliseerd voor alle mobiele apparaten op de markt. Kijk je naar sessies in een gemiddelde week op onze Nederlandse mobiele site, dan zie je dat gebruikers via meer dan duizend verschillende apparaten bij ons binnenkomen. Dit klinkt ongelofelijk veel, maar als je bedenkt dat alleen alle verschillende Samsung apparaten (inclusief tablets) bij elkaar al bijna driehonderd modellen zijn, dan wordt dit getal al meteen verklaarbaar. In Google Analytics verkrijg je ook data over hoeveel verschillende scherm resoluties deze apparaten hebben. Ook al maken de drie populairste scherm resoluties zeventig procent van de sessies uit, kom je in totaal ook hier op bijna driehonderd verschillende resoluties. Om alle gebruikers een honderd procent bevredigende ervaring op onze website te kunnen bieden, is één mobiele versie van ons platform dus niet genoeg.

Verder was het bijhouden van twee aparte websites niet schaalbaar. Een goed voorbeeld hiervoor is de tijdsinvestering vanuit onze contentteams; elke banner, die op de website vernieuwd moet worden, moet twee keer gemaakt en geüpload worden. Als je de content van jouw website constant aan het zoekgedrag van de bezoekers wilt aanpassen en veel tijdelijke acties wilt tonen, kost dit veel tijd.

De oplossing: een volledig nieuw responsive design. We wilden tot een duurzame platform komen waarmee we nog geruime tijd vooruit konden. 

1. Denk mobile first, maar niet mobile only

Het grootste voordeel van een responsive design is tegelijkertijd ook de grootste uitdaging als het om de ontwikkeling ervan gaat. We wilden de overall conversie op de lange termijn verhogen. Daarom moesten wij tijdens het ontwerp- en ontwikkelingsproces met alle toestellen rekening houden.

Aangezien het aantal sessies per jaar via mobile op onze websites continu is gestegen en wij de focus op het verbeteren van de mobiele ervaring wilden leggen, hebben wij voor een mobile first-strategie gekozen.

Het concept mobile first werd al in 2009 door Luke Wroblewski, sinds 2014 Product Director bij Google, geïntroduceerd en betekent dat het mobiele scherm de kern van jouw design is, waardoor de user experience op smartphones begunstigd wordt. Jij ontwerpt je website dus allereerst voor een smartphone en bouwt hierop op voor tablets en desktopschermen. 

Maar mobile first betekent nooit mobile only. Ook al wordt het belang van mobiele telefoons steeds groter, desktopcomputers zijn nog lang niet verdwenen. Denk aan al jouw klanten, die tijdens hun lunchpauze op hun grote desktopscherm door jouw aanbiedingen scrollen. Een voorbeeld: In 2017 kwamen 35 procent van alle sessies op ons Nederlandse platform nog via een desktop.

Bij responsive design gaat het niet alleen om schermgrootte en designverschillen op smartphones, tablets en desktopcomputers, maar vooral om verschillende customer journeys. We zien bijvoorbeeld dat het aantal last minute boekingen veel groter is via mobiel dan desktop en tablet. 47 procent van alle boekingen op mobiel hebben een lead time (tijd tussen boeking en aankomst) van zeven dagen. 28 procent van alle boekingen op mobiel gebeurt op dezelfde dag. Op een desktop is dit slechts tien procent. Verder blijkt uit onderzoek dat bezoekers die via een mobiel apparaat een website bekijken een veel kortere tijd op dezelfde website blijven. Om deze “ongeduldige” last minute-zoekers vast te houden moet de website vooral één ding hebben: een uitstekende navigatie.

“Less is more op mobiele apparaten. Een goed voorbeeld hiervoor zijn listerpages met zoekresultaten. Je kunt hier bijvoorbeeld navigatie-elementen zoals filters achter een knopje verbergen of minder content bij de producten zelf tonen. Hier een voorbeeld van onze Duitse website:

Naast dingen weghalen of verbergen moeten sommige dingen ook meer naar voren komen, zoals bijvoorbeeld de hotelreviews. Beoordelingen door andere gasten zijn één van de belangrijkste redenen om een accommodatie te boeken. Daarom hebben wij ervoor gezorgd dat deze op mobiel meer opvallen.

Zorg ervoor dat het hele bedrijf mobile first denkt

Aangezien het grote aandeel van mobiel gebruik van onze klanten, moet het mobiele denken ook binnen onze eigen organisatie verankerd worden. Bij ons werkte iedereen vanaf een desktop computer en bleek dat de website uitsluitend op die schermgrootte werd bekeken. Het resultaat was dat content grotendeels voor dit formaat uitgedacht werd, met zo nu en dan ongewenste vertoningen op het mobiele scherm.

Zorg er dus voor dat het belang van mobiel in de hele organisatie bekend is en geleefd wordt. Leg iedereen uit hoe zij op een desktop computer in de browser de tablet of mobiele weergave op kunnen roepen. Je hebt hiervoor bijvoorbeeld de “Toggle device toolbar” in de developer tools van Chrome of de iOS Simulator waarmee jij alle Apple devices kunt simuleren. Deze zijn makkelijk te gebruiken en jij kunt alle content direct op jouw desktop toetsen.

2. Vernieuw in kleine stappen: Maak het project niet te groot

Als jij je website wil vernieuwen om deze met een responsive design aan het gebruik van jouw klanten aan te passen, zijn er verschillende strategieën. Welke het best bij jou past, hangt van budget, tijd en personele resources af.

 Je kunt er onder andere voor kiezen om de bestaande website beetje bij beetje om te bouwen. Je kunt met de belangrijkste pagina’s of onderdelen beginnen en iteratief de hele website ombouwen. Voordeel is dat je ook met een beperkt budget aan de slag kunt en al gauw resultaten in de KPI’s terug ziet komen. Verder kun jij bij deze aanpak gaandeweg leren – de lessen uit de eerste “hap” kun jij bij de volgende verwerken. Nadelen kunnen zijn dat het traject oneindig wordt en het bestaan van responsieve en niet responsieve pagina’s naast elkaar een negatieve impact op de klantenervaring heeft.

Een andere strategie is om de website helemaal te herbouwen, dus met een nieuwe code-base bij nul te beginnen. Voordeel hiervan is onder anderen dat jij niet gebonden bent aan de code erfenis van jouw oude website. Een groot nadeel van deze aanpak is dat je op de lange termijn tijd en geld moet investeren zonder hiervan op de korte termijn te kunnen profiteren.

Wij hebben gekozen om ons platform volledig te herbouwen en met een nieuwe codebase te beginnen. Ons voornaamste doel was om een snelle, duurzame en toekomstbestendige website te bouwen en de oude code was hier niet voor geschikt. Alleen de boekingsfunnel besloten wij los te koppelen van de rest. Deze is als eerst voor alle websites vernieuwd om de conversie omhoog te trekken.

Al vroeg zagen wij dat vernieuwingen aan de achterkant net zo belangrijk voor de toekomstbestendigheid van het platform als geheel waren als de veranderingen aan de voorkant. Daarom namen we de beslissing om zowel front-end als back-end te vernieuwen. Dit zorgde ervoor dat de vernieuwingen aan de voorkant parallel moesten lopen met de vernieuwingen aan de achterkant. Hoewel belangrijk voor de toekomstbestendigheid van het platform als geheel, maakte dit dat we aan de voorkant niet snel konden vernieuwen, waardoor we ook niet gaandeweg konden leren en optimaliseren. We werkten toe naar een alles-of-niets lancering, wat leidde tot hoge druk bij het team.

Om onze vernieuwing voor iedereen tastbaar te maken, besloten wij daarom op een gegeven moment dat het tijd was om met een eerste minimum viable product online te gaan. Als bedrijf dat in meerdere landen opereert, hadden wij keus waar we onze eerste versie wilden lanceren. We besloten te starten met onze kleinste label, Oostenrijk.

De lancering van deze versie liet zien, hoe ver ons minimum viable product nog afstond van waar wij eigenlijk naartoe wilden. We realiseerden ons dat de manier waarop wij tot nu toe hadden gewerkt niet efficiënt genoeg was. Dit was een harde les voor het hele team – om frustratie en verlies te voorkomen, besloten we daarom onze werkwijze zo snel mogelijk aan te passen.

De alles-of-niets aanpak hebben wij naar een meer iteratieve methode omgezet. Per label keken wij naar de minimale functionele eisen die we stelden aan de respectievelijke websites en we hebben de ontwikkeling stapsgewijs opgebouwd van ons kleinste label naar de grootste. Zo blijft het risico klein en krijgen wij meer tijd om naar elke release het platform verder te ontwikkelen. Dit geeft ons ook de mogelijkheid om gaandeweg met hulp van klantenonderzoek aanpassingen te doen.

Wij gebruiken onder andere tools zoals HotJar om met behulp van heatmaps en directe klantenfeedback lessen uit de huidige versie te trekken en ons product continue aan de wensen van onze klanten aan te passen. Dit zorgt ervoor dat wij voor de lancering van onze grootste labels al zeer veel ervaring hebben opgebouwd en daardoor een stevig fundament hebben.Op dit moment zijn Oostenrijk, Duitsland, Denemarken, Noorwegen en sinds begin maart ook Zweden online en moeten onze Nederlandstalige labels nog gelanceerd worden.

3. Maak er geen IT-feestje van – betrek alle medewerkers bij de redesign

Omdat wij een compleet nieuw product wilden creëren, hebben wij ervoor gekozen om het redesignproject met een apart team te starten, dat los van de rest van onze IT-afdeling stond en daarom ook fysiek op een andere kantoor zat. Het voordeel hiervan was dat de developers samen met de designers van Hike One de creatieve ruimte hadden, om buiten de kaders van ons oude platform te treden en zich volop op de creatie van een honderd procent nieuw platform konden concentreren.

Het nadeel van deze fysieke en inhoudelijke loskoppeling was dat het project en de nieuwe website voor veel medewerkers zeer abstract was. Het werk van het redesignteam had geen verbintenis met het dagelijkse werk van de rest. De betrokkenheid bij het nieuwe product was dus niet zo groot buiten de IT-afdeling. We probeerden dit op te lossen door iedere twee weken een sprintdemo aan het hele bedrijf te geven. Maar de tijd tussen de presentaties en het moment dat iedereen het als functioneel product in handen had, bleek te groot.

Ook zorgde het uitgangspunt van een ‘fresh start’ voor het nieuwe platform ervoor dat kennis uit andere afdelingen over het hoofd werd gezien en het ontwerp niet altijd overeenkwam met de benodigdheden.

Om zulke mismatches in de communicatie en werkzaamheden te voorkomen is het daarom belangrijk om het hele team al vanaf het begin bij een redesign te betrekken en de stakeholders uit andere afdelingen constant input en feedback te laten geven op het werk van het project team. Hierbij heeft de product owner een sleutelrol, omdat hij of zij als schakel in het communicatienetwerk tussen teams en stakeholders ageert.

Om de de interne samenwerking als geheel te verbeteren, hebben wij bovendien voor de introductie van de OKR (Objectives and Key Results) methode gekozen. Bij deze managementmethologie worden kwartaaldoelstellingen (Objectives) op bedrijfvsniveau, teamniveau en persoonlijk niveau gedefinieerd en aan meetbare resultaten gekoppeld.

De introductie van OKR’s heeft tot een aantal verbeteringen in onze werkzaamheden geleid. De gezamenlijke doelstelling maakt dat de focus en betrokkenheid bij het team groter zijn en veel meer cross-department samengewerkt wordt. Vroeger werkten wij alleen met persoonlijke targets en doelstellingen op afdelingsniveau. Medewerkers van verschillende teams werkten wel samen in cross-department projecten, maar er was geen uniforme richtlijn die ervoor zorgde dat wij met zijn allen dezelfde kant opgingen. Nu heeft iedereen het grote plaatje beter in beeld en ziet ook duidelijk welke bijdrage hij of zij aan het behalen van de bedrijfsdoelstellingen levert. Hierdoor versterken initiatieven elkaar vaker en de kans op mismatches in de werkzaamheden wordt klein. Wij willen onszelf elk kwartaal met onze doelstellingen uitdagen en proberen ze daarom zo ambitieus en smart mogelijk te stellen. We streven ervoor om elk kwartaal gemiddeld zeventig procent te halen (waarom het niet honderd procent is, lees je hier). Dit lukt nog niet altijd, wat wederom een goede indicatie geeft in hoeverre wij onze werkwijze nog kunnen optimaliseren.

4. Benader redesign ook vanuit een SEO-strategie

Het herbouwen van een website geeft meteen de gelegenheid om hem ook kritisch vanuit een SEO-perspectief te bekijken. Moderne SEO legt de focus op positieve ervaringen  van de gebruiker – hoe kan deze zo snel en makkelijk mogelijk precies dat vinden, wat hij zoekt?   Neem jouw redesign dus als kans om ook de ingangsmogelijkheden naar jouw website te vergroten.

Wij hebben in verband met onze redesign daarom onze URL-structuur rechtgetrokken en kritisch gekeken naar de filters op onze website. Hiervoor hebben wij een diepgaande keyword analyse uitgevoerd. Uit de analyse konden we opmaken welke thema’s veel zoekvolume hadden en nog niet in onze bestaande filters terugkwamen. Een goed voorbeeld hiervoor is het thema Oud&Nieuw, waar wij een aparte filtertemplate op basis van een vaste datum voor gecreëerd hebben. Deze wordt automatisch gecombineerd met alle op onze website beschikbare bestemmingen en geeft ons zo de mogelijkheid om de binnenkomst van onze klant op onze website één op één aan te laten sluiten op zijn zoekopdracht. Dit versimpelt en verkort de customer journey en levert meer verkeer op.

Dit hebben wij in het laatste kwartaal van 2017 in de praktijk kunnen zien op onze Duitse website. Het aantal bezoekers die via zoekopdrachten rond het thema Oud&Nieuw binnenkwamen was in vergelijking met 2016 bijna verdubbeld.

De uitdaging bij een goede navigatie is om de binnengekomen klant vast te houden en de bounce rate daarmee zo laag mogelijk te houden, zoals aan het begin al uitgelegd.  Niet alleen de reis naar een bepaalde landingspagina moet soepel verlopen, maar ook de verdere afhandeling en navigatie binnen de website. Zorg ervoor dat jij de juiste content hebt staan, het navigeren met behulp van filters en breadcrumbs zo makkelijk mogelijk is en de weg naar de funnel zo kort mogelijk maakt. Hierbij is het controleren en evalueren van navigeer gedrag met behulp van A/B tests en tools als bijvoorbeeld HotJar, CrazyEgg en Mixpanel essentieel.

Vanuit SEO-perspectief moet jij ook zeker de snelheid van jouw website niet vergeten. Lange laadtijden zorgen ervoor dat gebruikers snel afhaken. Dit geeft een negatief signaal aan Google. Of anders gezegd: hoe sneller de laadtijden, hoe groter de kans op goede posities in de zoekresultaten.

5. Zie redesign als kans om het eigen merk (nog) beter te positioneren

Tijdens het herbouwen liepen wij er tegenaan dat we onze visie nog niet duidelijk voor ogen hadden. We hadden klantenonderzoek gedaan om een gevoel voor onze doelgroepen te krijgen, maar ondertussen hadden wij het gevoel dat wij nog niet duidelijk genoeg in beeld hadden wie wij zijn en wat onze Unique Selling Point ten opzichte van onze concurrenten is.

Parallel met ons redesign zijn wij begonnen onze visie uit te werken om hieruit op de lange termijn een strategie en een handleiding voor ons dagelijks handelen te ontwikkelen en het fundament te creëren voor een toekomstbestendig platform. De ontwikkeling van de visie en missie was voor ons de inleiding van een alles omvattend brandingtraject.

Een sterk merk bouw jij van binnen uit door te zorgen dat jouw bedrijfscultuur jouw brand promise helemaal ondersteunt. Je merk moet tot leven komen door de dagelijkse acties van de medewerkers. Onze eerste stap was dus om intern ons merk zo sterk mogelijk neer te zetten. Hiervoor hebben wij een set van core values ontwikkeld, die het fundament van onze identiteit is. Wij wilden deze kernwaarden op de werkvloer tot leven brengen en hebben ter ondersteuning binnen ons team brand ambassadors gekozen. Enerzijds dienen de brand ambassadors als vraagbaak voor collega’s. Anderzijds geven zij constructieve feedback op beslissingen en acties vanuit een branding perspectief. Daarnaast gaven zij ook een reeks branding-workshops voor alle medewerkers.

Het idee achter het interne traject was om ervoor de zorgen dat ons merk in alle lagen duidelijk neergezet wordt, zodat iedereen naar één doel toewerkt. Vervolgens konden wij de communicatie naar de klant oppakken. Dit gebeurt natuurlijk grotendeels op ons platform. We hebben een communicatie-guideline gecreëerd waar vastgelegd is hoe wij met onze klanten communiceren en wat wij op onze website willen tonen. Ook bij het ontwikkelen van nieuwe elementen stellen wij ons nu altijd de vraag: Komt dit overeen met wie wij als merk willen zijn?

De grootste learning, die wij hieruit hebben getrokken, is dat het herbouwen van onze sites met het ontwikkelen van een brandingstrategie had moeten beginnen.

Hoe wij verder gaan

Aan het begin van ons redesigntraject was ons hoofddoel om de conversie op mobiele apparaten te verhogen. Onze focus lag dus alleen op één stukje van de customer lifetime cycle – de boeking. Tijdens het herbouwen van ons platform hebben ook wij ons ontwikkeld en hier ook belangrijke lessen voor de relatie met onze klanten uit getrokken. Nu kijken wij niet meer alleen naar conversies en boekingen, maar vragen ons vanuit een branding perspectief af wat wij voor de klant kunnen betekenen – tijdens de gehele customer lifetime cycle. Ons hoofddoel is nu het verhogen van de klantretentie en het opbouwen van een loyaal klantenbestand. Wij staan pas aan het begin van dit traject en zijn onder andere andere bezig met het optimaliseren van onze e-mail flow en het herkennen van loyale klanten. Wij verwachten ook hier flink wat uitdagingen en net zoveel nieuwe learnings. De volgende grote stap op onze reis is in ieder geval de lancering van onze vernieuwde Nederlandse website en het Belgische label deze zomer.