‘Verandering is de enige constante’. Deze uitspraak is ontzettend toepasselijk in de IT-wereld. De verwachtingen van gebruikers stijgen terwijl nieuwe kanalen en media je om de oren vliegen. Stress niet, want ook de frameworks en technologie blijven zich gelukkig mee ontwikkelen.

Een perfect voorbeeld van ‘meegaan met verandering’ is het adopteren van een headless omgeving. Met een headless e-commerce kun je je klanten precies aanbieden wat jij wilt: vooruitgang, schaalbaarheid en bereikbaarheid. Hoe je dat doet, leggen we je hieronder uit.

Headless e-commerce is een platform waarbij de backend en frontend niet direct geïntegreerd zijn. De backend verstuurt verzoeken naar de application programming interfaces (API’s) en deze stuurt het weer door naar de presentatielaag. Doordat je deze API’s zelf kan uitkiezen en/of bouwen, geeft het de developer veel vrijheid om de interface te personaliseren en uniek te maken. De interface in dit voorbeeld is een app, website of ander digitaal interface.

Je klanten gaan geen verschil merken op technisch vlak, want alle betalingen en data verlopen nog via de backend. Maar de customer experience kan heel anders zijn omdat de interface veel persoonlijker en unieker gemaakt wordt. Er is veel meer mogelijk omdat je niet beperkt wordt in je frontend en je ook nog eens sneller kan inspelen op trends en ontwikkelingen.

Om te begrijpen waarom er nu zo’n behoefte is aan een headless omgeving, moeten we eerst teruggaan. Als we kijken naar de geschiedenis van het internet en het gebruik van een cms wordt dit een stuk duidelijker.

In de jaren 90 was het internet het wilde westen. Mensen waren nog aan het ontdekken wat er mogelijk was, wat er te verbeteren was en keken wat gebruikers fijn vonden om te gebruiken. Een mooi voorbeeld hiervan is het Document Object Model (DOM). In 1997 werd dit uitgebracht en DOM is een application programming interface (API) voor HTML- en XML-documenten. Voorheen moest je alle elementen in een document tegelijk aanpassen. Met een DOM werden ze opgedeeld in een boomstructuur, waardoor individuele stukken aangepast konden worden. Stel: je maakt een tabel met een DOM, voegt vervolgens een aantal rijen toe en daarna geef je aan welke tekst er in de tabel komt te staan. Dit gaf developers veel meer mogelijkheden met de inhoud van HTML- en XML-documenten.

Toen kwam natuurlijk de overgang naar Web 2.0. Hierin zag je duidelijk dat het internet ook voor sociale doeleinden werd gebruikt. Vooral blogs waren in opkomst. Web 2.0 betekende een toename in zelfgemaakte content omdat het steeds makkelijker werd om websites te bouwen. Sites werden niet meer gebouwd door grote bedrijven die er veel tijd in hadden gestoken. Programmeurs konden vanaf hun zolderkamertje zelf een website ontwikkelen om mee te experimenteren. Je kon opeens veel makkelijker mensen van over de hele wereld bereiken. Sindsdien kwam er veel meer content online.

Webpagina’s zagen er niet langer uit als een statische brochure, maar stonden vol met afbeeldingen, video’s en lange teksten. Daardoor ontstond de behoefte voor één systeem voor meerdere beheerders om content in op te slaan en aan te passen. Zo ontstonden de contentmanagementsystemen (cms). De centrale database van een cms zorgt ervoor dat alle gegevens op één plek worden opgeslagen en dus veel makkelijker toegankelijk zijn. Daarnaast kan je via de administratiemodule moeiteloos teksten en afbeeldingen invoeren, verwijderen en aanpassen. Tenslotte, zorgt een presentatiemodule ervoor dat al het design van de teksten en interfaces op de site hetzelfde zijn.

Met iedere ontwikkeling werd het developen en updaten van een site steeds laagdrempeliger. Het oog wil ook wat en daarom stopten makers extra tijd in het opmaken van hun platform. En grote bedrijven konden natuurlijk niet achterblijven. Wilde je jezelf op de kaart zetten (en nog steeds), dan heb je een mooie, representatieve website nodig.

Weer een paar jaar later gingen we over op Web 3.0: het tijdperk van de mobiele gebruikers. Een leuke vooruitgang voor de meeste mensen, maar een uitdagende innovatie voor websitebouwers. Hun sites en cms’en waren namelijk helemaal niet ingesteld op die kleine schermen en nieuwe functionaliteiten. Dankzij API’s konden programmeurs toch hun sites aan mobiele gebruikers tonen. Meegaan in deze trend was noodzakelijk, want in 2014 oversteeg het aantal mobiele gebruikers in Amerika het aantal desktopgebruikers.

Dit resulteerde in developers die meerdere versies van hun sites maakten: een desktop versie én een mobiele. In 2010 kwam hier ook nog eens het welbekende ‘responsive design’ bij. Mobiele sites werden hierdoor veel wendbaarder en aantrekkelijk om te gebruiken. Niet alleen de gebruikers profiteerden van deze vooruitgang, ook de bedrijven. Als je op meer platformen te vinden bent, kun je ook meer gebruikers aantrekken. Klanten meer gemak, bedrijven meer bezoekers. Win-win.

Dat leidt ons tot het heden: tegenwoordig zijn er veel meer opties om te verbinden met het internet. Dit leidt tot een grote vraag naar een omnichannelstrategieën. Smartwatches, smart home apparaten en gameconsoles. De headless architecture voldoet precies aan deze behoefte: één bron van data, met een makkelijke manier om dit te presenteren over meerdere kanalen. Dubbel werken is zo niet meer nodig, want alles kan vanuit één database ontwikkeld worden: desktop, mobiele site, applicatie, smart watch, etc! In dit artikel leggen we je precies uit welke voordelen developers en bedrijven hieruit kunnen halen en hoe je headless commerce inzet om te innoveren in jouw vakgebied.

Headless commerce verschilt van traditionele commerce, maar wat zijn de specifieke veranderingen voor makers? We lichten de 5 belangrijkste uit.

1. De ontwikkelsnelheid

De ontwikkelsnelheid is bij een traditioneel e-commerce pakket vaak sneller dan bij een headless omgeving. Dit zit in het feit dat er veel standaarden zijn gedefinieerd in de frontend. Door dicht bij de standaard te blijven, hoeft er veel minder development plaats te vinden.

Dit betekent niet dat een headless oplossing altijd een langere ontwikkeltijd heeft. Een belangrijk element van een headless aanpak is een helder gedefinieerde strategie over de modellen voor data-uitwisseling tussen front- en backend. Omdat deze niet langer strikt met elkaar verbonden zijn, moeten hierover duidelijke afspraken staan. Wanneer met een minimaal product wordt gestart, is het mogelijk om na zes weken een werkende omgeving live te zetten. De beschikbare features bepalen of een headless omgeving meer of minder ontwikkeltijd nodig heeft.

2. Vrijheid in het ontwikkelen van een frontend

Een aanpassing bij traditionele bouw is niet zomaar gedaan: de code, database en frontend moeten bij iedere verandering bewerkt worden. Echt precisiewerk. Terwijl frontend developers van een headless systeem alleen de API hoeven aan te roepen bij verandering, blijft de backend lekker zoals het is.

Het enige nadeel hiervan is wel dat landingspagina’s en productpagina’s helemaal zelf ontwikkeld moeten worden. En er komt nogal veel kijken bij een goed ingerichte e-commercewebsite.

3. Een headless cms

Doordat in normale cms’en de front- en backend aan elkaar vastzitten, heb je voor een headless systeem een nieuw cms nodig. Een headless e-commerce cms zorgt voor het beheren van de content, maar stuurt niets naar de presentatielaag. Het creëert alleen de data en laat de opmaak achterwege. Alle inhoud wordt alleen gereed gezet en doorgegeven aan de API’s.

Contentful is een voorbeeld van zo'n headless cms. Je haalt het meeste voordeel uit zo’n systeem wanneer je de content op meerdere kanalen weergeeft (hier komen we later nog op terug). In dit cms zet je de data die altijd hetzelfde blijft, bijvoorbeeld prijs, kledingmaten, merken, artikelen. Hoe deze op verschillende kanalen vervolgens worden weergegeven, bepaal je zelf via de API.

4. Uitgebreide personalisatie

Een geweldige naadloze customer experience en personalisatie is uiteindelijk de ambitie van veel bedrijven. Met een headless architecture word je gedwongen om goed na te denken over de manier waarop je zaken, zoals personalisatie, zal aanpakken. Omdat je alle vrijheid hebt, moet je goed nadenken over de opzet en de te maken keuzes. Het is namelijk niet standaard voorgedefinieerd.

Een voorbeeld van zo’n personalisatie is het inzetten van persona’s. Je ziet tegenwoordig vaak dat je producten in advertenties krijgt aangeboden door middel van retargeting. Incentro zet deze marketing analytics ook in door het te combineren met machine learning. Als je net een fiets hebt gekocht, wil je niet nóg een advertentie zien over fietsen. Advertenties voor bijvoorbeeld fietsbellen, een bandenplakset of zadelhoesjes zijn wel welkom. Nou, datzelfde idee kun je inzetten op je platform met persona’s.

Maak persona’s aan en als een bezoeker binnen die persona valt, krijgt hij of zij specifieke content te zien. Weer even terug naar die fietsen: stel je hebt een webshop voor fietsen. Op de homepage heb je een carrousel staan vol met omafietsen, maar een bezoeker klikt op de categorie herenfietsen met versnellingen. Vervolgens gaat ‘ie weer terug naar de homepage en is de inhoud van de carrousel verandert in herenfietsen met versnellingen. Dat is pas een slimme manier om personalisatie in te zetten. Als je een persona hebt waar deze specifieke bezoeker in valt, kun je content tonen die hij/zij écht interessant vindt.

5. Eigen functionaliteiten door microservices

De markt voor e-commerce verandert continu. De mate waarin je in staat bent om te anticiperen op deze veranderingen bepaalt of je wel of niet koploper bent in je markt. Met een headless omgeving is de architectuur beter ingericht om een microservice te bouwen en daarmee bijvoorbeeld te experimenteren met een nieuw businessmodel.

Met behulp van een zelfgebouwde microservicearchitectuur is het mogelijk om een model te testen door een functie toe te voegen in een bestaand platform. De microservice staat buiten het platform omdat deze via een API wordt aangeroepen. Op deze manier ontwikkel je geen oneindig lange code waardoor een update in de toekomst minder arbeids- en tijdsintensief wordt.

Stel, je leest in een artikel dat online shoppers 30% meer tijd spenderen op een site wanneer bezorging gratis is. Dan is het interessant om met behulp van een microservice architectuur een kleine functionaliteit te bouwen om dat te testen. Test bijvoorbeeld een functionaliteit die visualiseert hoeveel geld bezoekers nog moeten uitgeven om gratis verzending te ontvangen. Door middel van een a/b test, ontdek je vervolgens wat het effect is als mensen direct zien hoeveel ze nog moeten spenderen voordat ze gratis bezorging ontvangen. Op deze manier speel je snel in op ontwikkelingen, waarbij je met slimme, kleine microservices hét verschil maakt tegenover je concurrenten.

Een paar voordelen van headless commerce hebben we al tussen neus en lippen door hierboven besproken, maar er zijn er veel meer dan dat. Hier volgen een paar onderdelen die ervoor zorgen dat jouw merk met kop en schouders boven de concurrentie uitsteken.

Een onderzoek van Harvard laat zelfs zien dat dat de bedrijven die een omnichannelstrategie met volledige overgave adopteren, significant succesvoller zijn en dat klanten een hogere waarde vertegenwoordigen bij een succesvolle omnichannelstrategie.

Omnichannel stimuleren met multichannelstrategie. On- en offline geïntegreerd in één systeem, dát is de ultieme droom. Met een headless architecture is dat juist goed mogelijk, doordat de backend gekoppeld kan worden aan meerdere shoppingkanalen. Uiteindelijk is het daardoor eenvoudiger om on- en offline beter op elkaar af te stemmen. Bijkomend voordeel is dat door een slim kassasysteem aan te sluiten op je commerceomgeving de data weer terug de e-commerce-omgeving instroomt. Analyse en visualisatie van on- en offline data is daarmee eenvoudiger en van hogere kwaliteit.

De snelheid van een website bepaalt voor een groot deel je succes. Data van Google onderbouwt deze stelling:

  • Een stijging van 1 naar 3 seconden laadtijd resulteert in een stijging van 32% in het bouncepercentage.

  • Als een pageload stijgt van 1 naar 5 seconden, stijgt het bouncepercentage zelfs met 90%!

  • Een disproportioneel percentage van 57% van de bezoekers zal een pagina verlaten als de laadtijd langer is dan 3 seconden.

Het commerciële effect van een snellere website spreekt voor zich. Afhankelijk van de techniek die de frontend kiest, maakt een headless architecture de website sneller.

Als e-commerce manager is het tegenwoordig niet meer dan normaal om meer dan één online afzetkanaal te onderhouden. (Potentiële) klanten willen overal, op ieder device, dezelfde mogelijkheden en ervaring hebben. Het is daarom niet meer voldoende om bestellingen enkel via een webshop te laten verlopen. Denk ook aan andere kanalen, zoals social media; Instagram en Facebook bijvoorbeeld. Maar ook marketplaces, zoals Bol.com en Amazon.

Door de losgekoppelde architectuur is het mogelijk om vanuit één backend deze kanalen te bedienen. Headless e-commerce is dus ontzettend schaalbaar. Je kan hier bijvoorbeeld ook een app toevoegen of makkelijk een dropshipmentwebsite opzetten in een nieuw continent.

Nieuwe kanalen worden op deze manier binnen handbereik gebracht. Een mooi voorbeeld hiervan zijn bezorgers van de Albert Heijn, die naast een mobiele pin ook een app op hun telefoon hebben. Met die app kunnen ze in het commercesysteem, via hun mobiel, transacties bij klanten tot stand brengen. De toekomst voorspellen gaat helaas (nog) niet, maar er op voorbereid zijn is noodzakelijk en mogelijk!

Gelukkig hoef je je eigen headless omgeving niet vanuit nul zelf op te bouwen. Er staat een headless cms voor je klaar die bij jouw wensen past. Hier zijn een paar van de systemen die nu op de markt zijn:

Wij geloven dat wanneer je koploper wilt worden dat je mee moet in de experience driven economie waarin we tegenwoordig leven. Heb je de volgende punten in huis? Dan zou het zonde zijn als je niet overstapt op een headless architecture:

  • Inhouse-medewerkers of een externe partij die genoeg kennis en interesse in dit vakgebied hebben. Zij zorgen voor je vertaalslag van headless naar een webshop vol innovaties en impact. Hiermee maak je grote stappen ten opzichte van je concurrenten.

  • Je bent nergens zonder een goed uitgestippeld plan. Hoe zorg jij ervoor dat een headless omgeving een geweldige customer experience geeft? Met alleen een gescheiden front- en backend kom je er niet.

Ben je nog steeds niet helemaal overtuigd? Dit zijn de resultaten en veranderingen die wij hebben gezien bij bedrijven die een headless e-commerce hebben omarmt:

  • Met je nieuwe flexibele platform focus je echt op de toekomst. Blijven innoveren en zorgen voor een schaalbaar medium.

  • Ontwikkelingen in de tech-wereld komen en gaan snel. Met jouw wendbare headless architecture spring je hier snel op in.

  • Doordat je als early adopter inspringt op de laatste trends met jouw e-commerce platform, sta je vooraan als het om innovatie gaat.

  • Blijf connected door de open omgeving van een headless architecture in te zetten. Gebruik API’s van derde partijen, zet nieuwe technologieën in, etc.

Als jij ook flexibeler wilt worden in je online omgeving, dan helpen we je daar graag bij. Neem contact met ons op om te zien hoe headless e-commerce jou kan helpen om top notch en relevant te blijven.