Google Ads
Meta Ads
E-mailmarketing
Lightspeed eCom Toolkit
Shopify Toolkit#SEM × De KoffiebaronDesign by #SEM AI Agent
Je productpagina,
opnieuw ontworpen.
Een nieuw ontwerp voor de productpagina van dekoffiebaron.nl: Segafredo Intermezzo koffiebonen 1 kg. Hieronder zie je elk scherm voor en na, en wat we verbeterd hebben.
- 14 voor-en-na's
- 17 verbeteringen
- dekoffiebaron.nl
Voor en na
Elk scherm, vergeleken.
Kies een scherm en schuif over de screenshot. Links zie je de huidige pagina van dekoffiebaron.nl, rechts het nieuwe ontwerp.
Productpagina.
De koffie krijgt de volle breedte, met de score direct bij de naam.
- 01Nieuwe verpakking eerstEerst zag je de oude verpakking, met ‘Oude verpakking’ erin. Nu zie je meteen het pak dat je thuis krijgt.
- 02Titel zonder verwarrende prijsDe titel zei ‘vanaf € 12,97’ terwijl er 14,10 stond. Nu is de titel alleen de koffie, en staat de prijs bij de keuze.
- 034,6 en 9,6 bij de naamKleine sterren zonder cijfer. Nu staan de 4,6 uit 11 reviews en de 9,6 van WebwinkelKeur direct onder de titel.
Kiezen en kopen.
Hoe meer pakken, hoe lager de prijs: met één klik.
- 01Staffel om aan te klikkenDe staffelregels leken knoppen maar deden niets. Nu kies je 1, 4, 6 pakken of een hele doos met één klik.
- 02Je ziet wat je bespaartDe totaalprijs en ‘Je bespaart €…’ rekenen mee met je keuze. Zo voelt een doos als een slimme keuze.
- 03Knop direct onder de prijsDe knop stond pas na de staffelregels. Nu staan prijs, aantal en ‘In winkelwagen’ op één regel.
Rond de knop.
Wanneer je koffie er is, en waar je op kunt rekenen.
- 01Morgen in huis, met datum‘Op voorraad in ons magazijn’ stond klein. Nu zie je hoe lang je nog hebt om te bestellen en op welke dag hij er is.
- 02Eerlijk over verzendkostenDe verzendkosten en de houdbaarheid staan bij de knop, zodat er bij het afrekenen niets tegenvalt.
- 03Betaallogo’s bij de knopiDEAL, Bancontact en American Express stonden alleen in de footer. Nu zie je ze direct onder de knop.
Reviews.
De 4,6 van je klanten, nu op de plek waar je twijfelt.
- 01Uit het tabbladDe 11 reviews zaten achter een tabblad. Nu staan ze direct onder de koopbox, met de verdeling per ster.
- 02Echte ervaringenVier reviews staan open, de rest achter één klik. Zo lees je wat andere koffiedrinkers ervan vinden.
- 039,6 van WebwinkelKeurOnder de productreviews staat de winkelscore van WebwinkelKeur, met een link naar alle reviews.
Over de koffie.
Wat je wilt weten, kort en overzichtelijk.
- 01Geschikt voor in labels‘Geschikt voor een Cappuccino’ stond in een lange tabel. Nu zie je in één blik waar deze koffie het best bij past.
- 02Kortere specificatiesAlleen de gegevens die tellen, netjes onder elkaar, met een vinkje voor half- en volautomaat.
- 03Doos en korting erbijOnder de tekst staat dat een hele doos 8 pakken is en 8% korting geeft. Zo nodigt de pagina uit tot meer.
Proefpakketten en meer Segafredo.
Een logische volgende stap, met één klik erbij.
- 01Rustige rij met productenDe gerelateerde producten liepen over twee rijen. Nu staan ze netjes naast elkaar, met een duidelijke knop.
- 02Proefpakketten vooraanWie nog wil proeven, ziet de proefpakketten eerst. Zo is er voor elke twijfelaar een volgende stap.
- 03Gelijke kaartjesFoto, naam, prijs en knop staan in elk kaartje op dezelfde plek, zodat vergelijken makkelijk is.
Tijdens het scrollen.
De knop blijft binnen bereik terwijl je leest.
- 01Vaste koopbalkTijdens het lezen stond er geen knop in beeld. Nu staat onderin altijd de koffie, de prijs en ‘In winkelwagen’.
- 02Levering in de balk‘Op voorraad’ en de dag waarop je koffie er is, blijven zichtbaar terwijl je leest.
- 03Zonder de tekst te bedekkenDe balk is smal en wit, zodat de reviews en de specificaties gewoon leesbaar blijven.
Productpagina.
Op mobiel de naam, score en foto direct in beeld.
- 01Nieuwe verpakking eerstEerst zag je de oude verpakking. Nu zie je meteen het pak dat je thuis krijgt.
- 02Titel zonder verwarrende prijs‘Vanaf € 12,97’ stond in de titel, terwijl je 14,10 betaalt. Nu noemt de titel alleen de koffie zelf.
- 03Altijd een knop onderinDe balk onderin toonde alleen ‘(0) | €0,00’. Nu staan daar de prijs, de 9,6 en een knop.
Kiezen en kopen.
Staffel, prijs en knop samen in beeld.
- 01Staffel om aan te tikkenGrote grijze regels die niets deden. Nu tik je 1, 4 of 6 pakken of een hele doos aan, met de korting erbij.
- 02Prijs per pakBij elke keuze zie je de prijs per pak, zodat je direct ziet wat 4, 6 of 8 pakken je opleveren.
- 03Morgen in huisOnder de knop zie je hoe lang je nog hebt en op welke dag je koffie er is.
Smaak en advies.
Van een lange tabel naar wat je wilt weten.
- 01Smaak in één oogopslagSterkte, cafeïne en melange stonden in een lange tabel. Nu staan ze in een kort blok met het bonen-icoon.
- 02Persoonlijk adviesWie twijfelt, appt met één tik via WhatsApp, het kanaal dat jullie al gebruiken.
- 03Betaallogo’s bij de knopiDEAL, Bancontact en American Express staan direct bij het kopen, niet alleen in de footer.
Reviews.
De 4,6 van je klanten, hoog op de pagina.
- 01Uit het tabbladDe reviews zaten onderaan, achter een tabblad. Nu staan ze direct na de koopbox, waar je twijfelt.
- 02Verdeling per sterJe ziet in één blik dat 7 van de 11 reviews vijf sterren geven.
- 03Twee open, de rest achter een tikZo blijft de pagina kort, en lees je alle 11 reviews als je wilt.
Over de koffie.
Kort te lezen, ook op een klein scherm.
- 01Geschikt voor in labelsEspresso, café crème, cappuccino en latte staan nu als labels, niet in een lange tabel.
- 02Doos en korting erbijOnder de tekst lees je dat een hele doos 8 pakken is en 8% korting geeft.
- 03Kortere tekstDe omschrijving begint met de smaak, zodat je snel weet of deze koffie bij jouw kopje past.
Meer Segafredo.
Vegen door proefpakketten en andere bonen.
- 01Vegen in plaats van scrollenDe producten stonden onder elkaar in twee kolommen. Nu veeg je in één rij door alle bonen.
- 02Proefpakketten vooraanWie nog wil proeven, ziet de proefpakketten eerst, met een duidelijke knop.
- 03Gelijke kaartjesFoto, naam, prijs en knop staan in elk kaartje op dezelfde plek.
Bestellen.
Na het toevoegen een duidelijke volgende stap.
- 01Bevestiging met je keuzeNa het toevoegen zie je meteen welke koffie en welk aantal er in je winkelwagen zit.
- 02Tip om te besparen‘Neem er 3 pakken bij en betaal 13,54 per pak’ met één tik. Zo voelt meer kopen logisch.
- 03Bestellen of verder winkelenTwee duidelijke knoppen, zodat je zelf kiest hoe je verdergaat.
Klik zelf door het nieuwe ontwerp.
Het ontwerp werkt als een echte pagina, op desktop en op je telefoon. Bestellen kan er nog niet mee.
Hoe het verder gaat
Van ontwerp naar meer orders.
Zo brengen we het nieuwe ontwerp live, en meten we wat het oplevert.
- 01Alleen de paginaHeader, menu, USP-balk en footer blijven precies zoals ze nu zijn. We veranderen alleen de inhoud van de productpagina.
- 02Eerst testen, dan liveWe zetten het nieuwe ontwerp in een A/B-test naast de huidige pagina en meten de bestellingen per bezoeker.
- 03Je eigen sterke puntenJe eigen foto's, beelden, reviews en tone of voice: alles kwam al van jullie, alleen op een betere plek.
Design by #SEM AI Agent
Dit ontwerp live
Dit ontwerp live
op jouw webshop?
Met de AI Design Agent zetten we dit ontwerp op je bestaande webshop, en verbeteren we daarna elke maand verder op het gebied van CRO. Gebouwd door onze specialisten. Zonder dat je er duizenden euro's per maand aan kwijt bent.
- Geen herbouw, geen migratie
- Je backoffice blijft zoals je gewend bent
- Pas live na jouw akkoord
- 01Doorontwikkeling voor een vast maandbedragGeen losse offertes per aanpassing. Zien wij een kans of heb jij een idee, dan bouwen wij het.
- 02CRO-verbeteringen direct doorgevoerdWij analyseren je webshop en voeren verbeteringen door in dagen in plaats van maanden.
- 03Veilig, en je ziet wat er verandertWe bouwen en testen alles eerst in een preview. Pas na jouw akkoord gaat het live, en elke versie blijft bewaard.