De overstap naar een nieuw platform kan heel spannend zijn voor een bedrijf. HelloTV was met haar webshop groot geworden op CMS-platform osCommerce, maar de grenzen van het systeem kwamen in zicht - waren vaak al opgerekt. Om door te stoten naar de toekomst was een verhuizing naar Magento de meest logische stap. Maar hoe doe je dat zorgvuldig, met behoud van identiteit en met maximaal gebruik van de kansen die zo’n migratie biedt? Daarover gaat deze casus.
HelloTV gaat 50 jaar terug als speciaalzaak op het gebied van audiovisuele elektronica, waarvan de laatste 13 jaar met een webshop. Het bedrijf heeft ook 11 fysieke winkels, prachtige showrooms waar beleving, expertise en persoonlijk contact de sfeer bepalen. De organisatie gelooft sterk in de combinatie tussen online en offline. Veel klanten oriënteren zich in de webshop, waar in veel gevallen al een persoonlijk lijntje wordt gelegd. De uiteindelijke keuze wordt vaak gemaakt in de winkel: televisies wil je eerst graag zien, die dikke soundbar moet je even live hebben horen pompen. HelloTV snapt als weinig anderen hoe haar markt reilt en zeilt en behoort tot de top 3 in Nederland.
Dertien jaar geleden lanceerde HelloTV haar webshop. De shop werd gebouwd in osCommerce en HelloTV is het type retailer wat niet achteroverleunt. Met voortdurende ambitie en groot gevoel voor marketing werd continue getweakt en bijgebouwd. Zelden werden de mogelijkheden van osCommerce beter benut dan door HelloTV, maar ook osCommerce heeft haar grenzen en meer en meer begon het besef door te dringen dat de situatie niet futureproof was.
Voor de bouw van de nieuwe shop klopt HelloTV aan bij gerenommeerd Magento bouwer Emico. Met de primaire design & CX uitdaging komt de directie bij Yellowgrape uit. HelloTV heeft in dit traject bewust gekozen voor twee gespecialiseerde bureau's. De jarenlange samenwerking tussen Yellowgrape en Emico is daarbij heel belangrijk geweest.
Een overstap naar Magento ligt voor de hand, maar de vraag is ook spannend. HelloTV heeft een online imperium gebouwd, met een unieke identiteit en veel traffic. Niet iets om zomaar even overhoop te gooien - een kindje ook, de shop is met liefde grootgebracht. De voorzichtigheid is terecht: vernieuwing moet altijd plaatsvinden binnen de bandbreedtes van historie en identiteit.
De migratie naar Magento is geen kopieerwerk. Het is een uitgelezen kans om te kijken naar zowel de functionele indeling als het design van de shop. Magento is bovendien een platform met veel meer mogelijkheden dan osCommerce.
Feitelijk ga je aan de slag met eindeloos veel keuzes en knoppen. Dat moet je niet op goed gevoel willen aanvliegen, wat ook nog wel eens gebeurt. Yellowgrape zit precies aan de andere kant van het spectrum: wij vallen fundamenteel terug op een planmatige aanpak, waarbij data en testprotocollen zoveel mogelijk leidend zijn. Dingen krijgen pas een plek als we hard kunnen maken dat ze maximaal bijdragen aan de prestaties van de shop.
Samen met HelloTV besluiten we tot een heel gecontroleerde en planmatige fasering:
1. Optuigen van het wireframe
2. Design
3. Livegang met splittesten
Hieronder beschrijven we de drie fasen en lichten we een aantal spraakmakende nieuwe functies uit. Voor een efficiënt proces en nieuwe functies, is het van belang dat design en techniek naadloos op elkaar aansluiten. Tijdens het proces hebben developers van Emico en designers van Yellowgrape dan ook continu de samenwerking gezocht.
"Design thinking is de brandstof die je redesign nodig heeft om van goed naar geweldig te gaan. Het is het geheime ingrediënt dat je ontwerpen kan transformeren.”
Fase 1: Wireframe
In deze fase ontwerpen we de nieuwe shop op puur functioneel niveau. Het is feitelijk de bouwtekening van de ultieme customer journey. Een klant komt op een site en dan? Hoe verlopen de stappen? Hoe koopt iemand iets? We werken hierbij heel nauw samen met de opdrachtgever. Er is tenslotte niemand die beter weet hoe mensen televisies kopen dan de experts van HelloTV. HelloTV heeft bovendien een unieke stijl en aanpak in het verkopen van haar producten. Dat moet ook terugkomen in de opbouw van de nieuwe shop.
In de wireframe fase komen dus de core functionaliteiten van de shop tot stand. Dit is meteen een uitgelezen kans om deze te testen. We leggen prototypes voor aan user panels, samen met onze partner UsesSense. Ook houden we bij het testen Emico in de loop. Samen valideren we welke functionele keuzes wel, niet en als beste werken. Handig te weten voor je het frame optuigt met een design laag.
Fullspeed ahead met een loeisnelle PWA: do believe the hype!
Op aanraden van Emico heeft HelloTV gekozen voor een Progressive Web App op basis van Magento 2. Je kan een PWA zien als een website die zich gedraagt als een app. Belangrijk voordeel is de performance, omdat bij eerste bezoek meteen alles op de achtergrond wordt ingeladen. Dat klikt lekker snel door – goed voor de conversie – en bij Google heb je met een PWA meteen een flinke streep voor. Daarnaast bieden PWA’s allerlei unieke creatieve en interactieve opties. Bij Yellowgrape zijn we inmiddels goed in thuis in PWA’s en we kunnen zeggen: DO believe the hype!
Fase 2: Design
Het wireframe is als een shop zonder kleurtjes, stijltjes en andere triggers. Die laag vul je pas in met het design. Ook hierbij was zorgvuldigheid geboden. De bestaande shop van HelloTV was eigenwijs, en bekend terrein voor menig trouwe klant. We hebben tot in detail geanalyseerd wat de unieke en sterke punten waren. Dit vormde het uitgangspunt voor nieuwe designkeuzes. Uiteraard voeren we ook qua design niks door zonder het te testen met user panels. Idealiter staat de CRO al verdomd scherp voor we überhaupt lanceren.
Beter aansluiting met de showrooms
Een belangrijk aspect bij zowel wireframe als design was de aansluiting met de 11 showrooms van HelloTV. Binnen de oude webshop kwam de bijzondere ambiance van de showrooms niet goed naar voren. We hebben de nieuwe shop veel meer in lijn gebracht met de stijl van de showrooms. Ook is er nu een veel betere koppeling met de winkels. Actuele voorraden, de mogelijkheden tot het maken van een afspraak, een blik in de winkel zelf – de webshop nodigt op tal van plekken uit tot een gang naar de showroom.
Fase 3: Splittesten
Wireframe en design mogen dan uit den treure zijn getest en met de grootst mogelijke zorgvuldigheid tot stand zijn gekomen: dan nog blijft livegang spannend, zeker bij een complete migratie. Yellowgrape zweert bij splittesten. Dit houdt in dat je na lancering eerst slechts 10 procent van de traffic naar het nieuwe platform stuurt en dat stapsgewijs verhoogt. In het proces kijk je of alles goed gaat en meet je alles door.
Bijkomend voordeel is dat je meteen ziet hoe het nieuwe platform presteert ten opzichte van het oude. Hierin zit uiteindelijk de ultieme geruststelling voor de opdrachtgever: wanneer je ziet dat al bij lancering de conversie veel hoger uitpakt, zijn zorgen doorgaans snel gevlogen. In het geval van HelloTV was de winst meteen fors en tastbaar. We hadden het niet anders willen zien.
Met de verhuizing van osCommerce naar Magento ontstond veel ruimte voor nieuwe features. We lichten er graag een paar uit.
Feature: digitale vergelijk module
Een van de belangrijkste functies van de shop is oriëntatie. Om dit proces zo goed mogelijk te faciliteren, bieden we op elk punt in de journey de mogelijkheid geselecteerde producten met elkaar te vergelijken. Je krijgt dan een overzichtelijke matrix met alle eigenschappen. Als kers op de taart hebben we de mogelijkheid ingebouwd dat je met een klik alleen de verschillen ziet.
Feature: sticky cart op de PDP
Ook in het kader oriëntatie, is een snelle inzage in de specs van groot belang. Bij het testen van het wireframe zagen we de beste performance bij een tweekoloms lay-out op de productpagina. Per product staan de belangrijkste eigenschappen en de koopknop in een handig overzicht die sticky mee scrollen. Zo houd je altijd het overzicht en ligt de keuze tot kopen meteen onder je hand.
Feature: conversie maximalisatie in de checkout
Het zijn vaak kleine zaken die groot verschil maken in conversie en nergens vind je op dit vlak meer kansen – en bedreigingen – dan in de checkout. Natuurlijk nemen we onze ervaring mee, maar geen shop is gelijk en we laten niks aan het toeval over. De checkout in die nieuwe shop van HelloTV is tot op detailniveau getest en getweakt. Bovendien hebben we de checkout voorzien van alle mogelijke elementen die bijdragen aan maximale conversie, zoals het automatisch invullen van gegevens, slimme bezorgopties, bevestigingen en een heel logische flow. In het proces zagen we de conversie telkens een beetje toenemen. Tel het allemaal op en de winst is formidabel.
Flinke casus, zeker, en dan kunnen we er nog veel meer over vertellen. Belangrijkste take-away: het is spannend om een bestaande, goedlopende shop te migreren en in een toekomstbestendige nieuwe jas te steken. Dat vraagt zorgvuldigheid. Dat vraagt om een aanpak die zich kenmerkt door gecontroleerde stappen en rücksichtslos testen. Dat vraagt ook om goede gesprekken over historie, identiteit - het verbinden van wortels met nieuwe loten.
Daar zijn we met deze casus prachtig in geslaagd. En natuurlijk is die substantiële conversieboost ook wat waard. Je moet ons tenslotte wel terugverdienen en graag een beetje snel ook. Tof dat je de moeite nam helemaal tot het einde te lezen, jij bent een echte pro! Vragen, opmerkingen? We horen graag van je.
