Sokkies bedrukt sokken voor bedrijven, sportclubs en evenementen, en wilde een webshop voor bedrukte sokken waarin je wel bestelt maar niet afrekent.
Dat klinkt tegenstrijdig, tot je ziet hoe Sokkies verkoopt. Je kiest een soktype, een aantal en wat extra’s, uploadt je logo, en je aanvraag komt als order binnen bij hun team. Betalen gebeurt niet op de site, want elke order begint met een gratis proefontwerp dat eerst goedgekeurd moet worden. Een afrekenknop zou hier vooral een dure knop zijn waar nog niemand op mag drukken.
Wij hebben de site opnieuw ontworpen en gebouwd in WordPress, in vier talen, met de formulieren aangesloten op de Pipedrive-opzet waar Sokkies al op draaide. De 3D-configurator is voorbereid en gaat aan zodra hij klaar is.
Verkoop je iets dat eerst goedgekeurd moet worden voordat er betaald wordt? Vertel ons hoe jouw orders lopen.
De oude site leverde elke week aanvragen op. Dat maakte het lastiger. Een pagina die stilletjes zijn commerciële werk doet, sloop je niet omdat hij er mooier uit kan zien.
Het scherpste probleem zat in de vertalingen. Sokkies draaide zijn talen via Clonable, een proxy die de site onderweg vertaalt op een apart schaduwdomein. Links uit Google Ads en nieuwsbrieven stuurden bezoekers steeds naar nl.sokkies.com in plaats van naar de pagina waarop ze klikten, en Nederlandse bezoekers kregen soms het Engelse formulier te zien. Dat nog repareren op de oude site had uren gekost voor een site die nog een paar weken te leven had. Die uren hebben we liever in de nieuwe gestoken, en Sokkies was het daarmee eens.
Dan de homepage. Tien producttegels, terwijl er vier verkopen. Een USP-balk die herhaalde wat de hero net had gezegd. En een verdeling van het verkeer die eerst niet klopt: de meeste bezoekers komen binnen op mobiel, de meeste aanvragen worden verstuurd vanaf desktop. Wie een proefontwerp aanvraagt, moet een bedrijfslogo uploaden, en dat logo staat op een laptop.
Eén randvoorwaarde stond vanaf dag één vast. Elke aanvraag loopt van de website naar Pipedrive, waar Sokkies zijn verkoop in draait. Die keten wordt beheerd door hun eigen automatiseringspartner, en hij mocht niet breken, ook niet voor een dag.
De wireframes maakten we in Figma, zodat de klant er direct in kon reageren. Daarna ontwierpen we desktop en mobiel in Adobe XD. Drie feedbackrondes, en in elke ronde ging er iets van ons terug.
Het eerste was de hero. Wij hadden er één groot, rustig beeld neergezet. Sokkies wilde het raster met sokken terug, omdat de beelden het overtuigende werk doen: de een zoekt een bont patroon, de ander wil alleen een logo op effen katoen, en één foto spreekt er maar één van aan. Terecht, dus het raster kwam terug.
Het tweede ging de andere kant op. Sokkies wilde de kortingspercentages uit de prijscalculator halen, omdat een rij percentages naast de staffels vooral verwarring geeft. Wij vonden dat je daarmee de upsell weggooide. Het compromis is één nudge die met de schuif meeloopt en laat zien wat de volgende staffel je per paar scheelt, precies op het moment dat je aan het kiezen bent.
Daarna volgden veel kleinere besluiten. De prijzenpagina ging uit het menu, want elke productpagina toont de prijzen al. De knoppen voor bellen, WhatsApp en mail staan onder het offerteformulier in plaats van vast in beeld, een bewuste afweging tussen vindbaar en afleidend. Collectietegels tonen een tweede foto als je eroverheen beweegt. De partnerpagina laat op mobiel minder logo’s zien. En de H1 van de homepage is alleen “Sokken bedrukken”, omdat Sokkies precies daarop gevonden wil worden.
Sommige dingen bleven bewust weg. Juniper Bay, het handgeschreven lettertype uit de huisstijl, ging ten koste van de leesbaarheid op bijna elke plek waar we het probeerden, dus het is nu een klein accent en weinig meer. De huisstijl zelf is van raaqt, wij vertaalden hem naar het scherm. Inloggen en chat blijven verborgen tot het klantportaal er is, want een inlogknop die nergens heen leidt is erger dan geen knop.
Toen de ontwerpen bij de developers lagen, gingen latere wijzigingen direct in de HTML en CSS en niet eerst terug in XD. Twee versies van de waarheid is hoe een knop in twee tinten geel eindigt.
De eerste was de hero. Wij hadden er één groot beeld neergezet, rustig en modern. Sokkies wilde het raster met veel sokken terug. Hun argument: de overtuigingskracht zit in het beeldmateriaal, want de een zoekt een bonte sok en de ander wil alleen een logo op effen katoen. Kies je één beeld, dan schrik je de helft af. Dat argument won, en terecht.
De tweede ging over de logobalk. Sokkies wilde twintig klantlogo’s prominent in beeld. Wij vonden dat niemand twintig seconden wacht tot de carrousel is rondgedraaid. Het werd een statische rij van acht tot tien grote namen, hoger op de pagina, precies op de plek waar de dubbele USP balk stond.
De derde ging de andere kant op. Sokkies wilde de kortingspercentages uit de prijscalculator halen, omdat vijf percentages naast zes staffels vooral verwarring geven. Wij vonden dat je daarmee de upsell weggooit. Het compromis: geen percentagekolom, wel één nudge die meebeweegt met de schuif. Bij 500 paar betaal je vijftig cent per paar minder, en dat lees je op het moment dat het uitmaakt.
Verder hielden we ook dingen tegen. Acht knoppen naast de calculator voor elk soktype bijvoorbeeld, want een calculator die eruitziet als een dashboard rekent niemand uit. En Juniper Bay, het handgeschreven lettertype uit de huisstijl, bleek in de USP balk simpelweg slecht leesbaar. Dat is nu een klein speels accent bij de reviews en verder niets. De huisstijl zelf komt van raaqt. Wij vertalen hem naar het scherm.
De opvallendste beslissing was iets níet bouwen. Wij hadden de standaard WooCommerce accountpagina’s uitgewerkt: mijn account, bestellingen, adresboek. De klant zette er een streep door. Als het klantportaal er straks is, wil hij geen twee inlogomgevingen naast elkaar. Die pagina’s wachten dus op fase 2. Hetzelfde geldt voor de resellerpagina, die alleen op verzoek wordt toegestuurd en niet in het menu hoort.
De site draait op WordPress met een maatwerkthema en zonder pagebuilder. Pagina’s zijn opgebouwd uit één gedeelde set secties, zodat Sokkies zelf een campagnepagina in elkaar zet door secties te kiezen en te vullen, zonder developer.
Het shopdeel verdient uitleg, want daar gaat het in gesprekken meestal mis. Er is geen winkelwagen en geen betaalstap. Bezoekers bestellen via een offerteformulier of een sampleaanvraag: soktype, aantal, extra’s, logo, afleveradres. Het formulier komt als aanvraag in Pipedrive terecht, en het team van Sokkies gaat er verder mee met een proefontwerp. Het gedraagt zich als een webshop, tot het moment waarop je normaal je pas zou pakken.
De techniek op een rij:
De formulieren waren het precieze werk. Pipedrive wordt beheerd door de automatiseringspartner van Sokkies, dus we bouwden de formulieren op hun opzet, en pasten ze aan toen het nieuwe offerteformulier meer bleek te vragen dan het oude, zoals extra productopties en een landveld. Elke verzending gaat ook de dataLayer in, met het formulier en de pagina waar hij vandaan komt, zodat Rick hem vanuit Tag Manager doorzet naar Klaviyo of Google Ads. Dat gebeurt pas na toestemming.
Voor de talen ruilden we de proxy in voor TranslatePress, met Nederlands als bron en Engels, Duits en Frans automatisch vertaald. Alles blijft binnen WordPress, slugs en metadata incluis, en klantlogo’s stel je per taal in, zodat een Duitse bezoeker Duitse klanten ziet. De lettertypes komen uit het eigen Adobe-account van Sokkies en alleen in de gewichten die het ontwerp gebruikt. Dat houdt de pagina’s lichter, en Sokkies hangt niet aan ons account.
De technische SEO-migratie en de redirects vanaf de oude URL’s deden wij. De 3D-configurator, die Expivi bouwt, is voorbereid als JavaScript-koppeling binnen de site en niet als iframe, en gaat live zodra hij af is.
De wireframes werden op 11 juni goedgekeurd. Het desktopontwerp volgde op 26 juni en mobiel op 3 juli, met de definitieve versies rond half juli. Daarna kwamen HTML en CSS, en in augustus de bouw in WordPress.
Op 4 september kreeg Sokkies toegang tot het CMS, met een geschreven handleiding erbij, en op 8 september liepen we het samen met Rick en Mike door in een call. De vertalingen gingen op 16 september online. De livegang schoof een paar dagen op, omdat de nieuwe formulieren aanpassingen vroegen verderop in de keten naar Pipedrive, en die wilden we goed getest hebben voordat de oude site uit ging.
Waarmee Sokkies eind september live ging:
In de praktijk draait Sokkies zijn site nu zelf. Een prijswijziging doe je één keer en hij staat overal. Een nieuw soktype is een nieuw item, geen nieuwe ontwerpronde. En de site groeit door zonder ons: bij livegang stonden er 31 pagina’s en Rick en Mike vullen al aan. Na de demo zei Rick Vissers, online marketeer bij Sokkies, het zonder omhaal: “It’s looking very good and very logical for us to work with.”
De volgende stap is het klantportaal, waar terugkerende klanten ontwerpen goedkeuren, orders volgen en opnieuw bestellen. Alle schermen liggen als wireframe klaar voor desktop en mobiel, en de bouw volgt nu de website live staat.
Ja, en bij producten op maat past dat vaak beter. Bij Sokkies kiezen bezoekers hun sokken, voegen extra’s toe en uploaden een logo, waarna de order als aanvraag in Pipedrive binnenkomt. Betalen zit niet in de site, omdat elke order begint met een proefontwerp dat eerst goedgekeurd moet worden.
We beginnen bij de opzet die er al staat. Bij Sokkies beheert een automatiseringspartner Pipedrive, dus bouwden we de formulieren rond hun structuur en testten we de keten samen voor de livegang. Elke verzending komt ook in de dataLayer, zodat metingen niet van het CRM afhangen.
Een proxy zet je vertalingen op een apart domein buiten WordPress. Bij Sokkies kwamen links uit advertenties en mails op dat schaduwdomein uit, in plaats van op de pagina waarop mensen klikten. TranslatePress houdt alles binnen WordPress, met vertaalde slugs en metadata, en automatische vertalingen die je nog met de hand kunt bijstellen.
Ja. Prijzen stel je één keer in en ze staan overal, veelgestelde vragen zitten in categorieën die je per pagina kiest, en klantlogo’s zet je per taal aan. Nieuwe pagina’s bouw je uit secties die al bestaan, dus voor een campagnepagina heb je geen developer nodig.
Nee. De website gaat voor, want die haalt de orders binnen. Pas als de routes en datastromen daar vastliggen, is duidelijk wat het portaal moet doen. Bij Sokkies ligt het portaal als wireframe klaar en volgt de bouw na de livegang.
Dan hoort je site dat ook te doen. Stuur ons een bericht en vertel hoe een order bij jullie loopt, van de eerste klik tot het akkoord.
Contact
Niet iedereen schrijft graag. Liever eerst iemand spreken? Plan via Calendly een kennismaking van 30 tot 45 minuten. Gratis, en aan het eind weet je of een voorstel zin heeft.
Plan een call(opent in een nieuw tabblad)Vertel wat vastloopt, wat je wilt bouwen, of wat opgelost moet worden. We reageren doorgaans binnen 1-2 werkdagen.
