Case Study
DETAILS Slaaplekkerder
Specialistisch aanbod
Snelle levering en proefslapen
Internationale ambities
SOFTWARE
Shopify
Sublime
Adobe XD
LANCERING
Mei 2021
Shopify Webshop/
Slaaplekkerder
Mijn klant Slaaplekkerder.nl biedt een niche productgroep (subgroep) aan, bedoeld voor iets waar we allemaal mee te maken hebben: slapen. Het bedrijf verkoopt namelijk “verzwaringsdekens”, plus een aantal accessoires daarvoor. Een productgroep die steeds meer voet aan de grond krijgt, omdat er steeds meer onderzoek wordt gedaan naar ons slaapgedrag (vaak: slaaptekort).
Na te zijn begonnen met een meer standaardoplossing, raakte mijn klant overtuigd van de potentie ervan in de retailmarkt en paste een aantal dingen aan waarvan gebleken was dat die beter konden. Een maatwerk thema was onderdeel daarvan en hiervoor werd contact gezocht met Studio Wassink. De insteek van een nieuw thema was 2-voudig: 1) een uniek en professioneel design en 2) alles moet heel snel laden.
Omdat ik zowel Designer- als frontend-werkzaamheden aanneem, kon ik dat geheel voor hen oppakken. Ik vroeg hun team om mij te voorzien van een aantal stijl-voorbeelden die zij vonden passen bij hun merk en op die basis heb ik een unieke opzet gemaakt. Samen zijn we vervolgens al snel gekomen tot een definitieve opzet waarover iedereen enthousiast was. Die omarmt hun eigen stijl, die consistent doorgevoerd kon worden en niet afleidt van het logische doel, het verkopen via een e-commerce-kanaal (de conversie strategie).
Toen dat eenmaal stond ben ik alles gaan omzetten in de codering. Voor deze shop heb ik de blokken geprogrammeerd in HTML, CSS, Liquid, JavaScript en JQuery. Op de homepage is 90% van de content in ‘Sections’ opgezet, zodat dit te allen tijde in de WYZIWIG editor kan worden aangepast. Voor de andere pagina’s heb ik zoveel mogelijk gebruik gemaakt van Metafields, zodat ook hier veel van de content door de mensen van mijn klant zelf aangemaakt, aangepast of verwijderd kan worden, zonder daarvoor in de codering te moeten werken.
Het geheel is een consistente shop geworden, met een eigen stijl die behalve herkenbaar ook snel in te laden is. En dat is voor webshops extra belangrijk. De samenwerking verliep heel prettig, mede omdat mijn klant op mijn vragen snel reageerde en ik dus steeds direct weer verder kon. De pagespeed scores zijn zeer hoog, ondanks dat de shop flink gevuld is qua content! Dit komt voornamelijk door de modulaire opbouw en de schone basis. Lees hieronder meer over wat ik hiermee bedoel.
Meer afbeeldingen en informatie hieronder...
www.slaaplekkerder.nl
Technieken
e-commerce
Online verkoop van goederen in een webshop
shopify
Webshop ontwikkeld met het SaaS pakket van Shopify
design
Het design van de shop en de responsive acties
front-end dev
Het opzetten van de HTML, CSS, LIQUID en Javascript code
Rekenmodule
Op basis van een ontvangen formule met JS een rekenmodule met eigen navigatie
SPECIALITIES
Modulaire opbouw
Voor snelheid en nauwkeurig werken
Ik heb bij alle maatwerk-onderdelen die ik in de webshop heb opgezet, een op zichzelf staande opbouw gehanteerd. Ieder onderdeel is daarmee een onafhankelijk blok, dat zonder problemen aan- en uitgezet kan worden.
Dat houdt in dat alle onderdelen, zover ze uit elkaar gehouden kunnen worden, hun eigen stylesheet hebben en hun main content, scripts & section code voor de dynamische invulling binnen de WYZIWIG editor van Shopify zelf.
De totale constructie wordt dus niet verstoord als onderdelen wel of niet meedoen op de pagina. Ook het onderhoud is zo vele, vele malen nauwkeuriger en sneller uit te voeren.
Metafield koppelingen
Meer vrijheid per product
Omdat er per product een flink aantal specifieke gegevens ingevuld moesten worden, heb ik een uitgebreid Metafield plan gemaakt en opgezet in deze webshop. Dat maakt dat bij de individuele producten niet steeds dezelfde informatie hoeft te verschijnen, omdat je die naar wens per stuk kunt aanpassen. Dat geeft mijn klant dus veel vrijheid bij het aanprijzen van specifieke kenmerken. En als dat niet nodig is, kan het systeem vanzelf terugvallen op een aantal standaardwaarden.
Rekenmodule
Direct antwoord, klantvriendelijk en efficient
De verzwaringsdekens van Slaaplekkerder zijn er in heel wat gewicht-varianten. Dat is voornamelijk om rekening te kunnen houden met het gewicht van de gebruiker, om de juiste druk te leveren. Hoewel je als klant natuurlijk altijd zelf mag uitmaken wat je kiest, is het voor velen nog een open vraag wat voor hen waarschijnlijk het best zal werken.
Daarom had mijn klant de wens om dit de koper op een eenvoudige manier te kunnen laten uitrekenen. Dat biedt een betere service en leidt ook tot weer een vraag minder die de klantenservice veelvuldig moet beantwoorden.
Ik kreeg daarvoor een formule en heb daarmee met JavaScript een rekenmodule gemaakt, waarmee de koper direct ziet welk gewicht hem/haar wordt aangeraden. Om het extra gebruiksvriendelijk te maken staan daaronder meteen links naar de andere gewichten, zodat als je op bijv. op dat moment bij 7KG kijkt, maar 9KG wordt geadviseerd, je daar ook meteen naartoe kunt springen.
Gebouwd voor snelheid
Snelheid optimaliseren met toch veel content
Snelheid staat gelijk aan conversie (verkoop). Niet persé 1 op 1 natuurlijk, maar het is wel bewezen dat shops die snel inladen een betere conversie realiseren. Deze shop-opzet is goed gevuld met afbeeldingen, teksten, links en visuals en toch zijn de pagespeed scores zeer hoog.
Natuurlijk moet je nooit teveel apps installeren, die nemen per stuk weer snelheid weg, maar bij mijn tests was de shop heel snel en ook de interne Shopify score bleek 2x zo snel als vele andere webshops die ik heb ingezien.
