Je productpagina,
opnieuw ontworpen.
Een nieuw ontwerp voor de productpagina van vivadonna.nl: Divaderme Brow Extender Ash Blond (wenkbrauwpoeder met vezels, 9 ml). Hieronder zie je elk scherm voor en na, en wat we verbeterd hebben.
- 13 voor-en-na's
- 18 verbeteringen
- vivadonna.nl
Elk scherm, vergeleken.
Kies een scherm en schuif over de screenshot. Links zie je de huidige pagina van vivadonna.nl, rechts het nieuwe ontwerp.
Productpagina.
Kleur, score en knop in één blik, boven de vouw.
- 01Alle kleuren met adviesHier stond alleen Ash Blond. Nu kies je uit alle vijf kleuren, met bij elke kleur voor welk haar hij past. Zo kies je minder vaak de verkeerde kleur.
- 02Score direct bij de naamEr stonden vijf sterren en ‘10 Beoordeling’. Nu zie je de 5,0 van de reviews en de Trustpilot-score 4,8 meteen naast de titel.
- 03Prijs, aantal en knop op één rijTussen prijs en knop stonden levertijd en verzendkosten. Nu staan prijs, aantal en ‘In winkelwagen’ samen, met de levering eronder.
De foto’s.
Alle beelden in zicht, met de belofte van het product erbij.
- 01Alle foto’s in één rijOnder de foto pasten vier kleine beelden, de rest zat achter pijltjes. Nu staan alle zes beelden in een rij onder een grotere foto.
- 02De voordelen als beeldTussen de foto’s staat nu een beeld met ‘100% natuurlijk’, ‘Waterbestendig’ en ‘Getest door oogartsen’, waar je toch al kijkt.
- 03Inzoomen op de vezelsBeweeg je over de foto, dan zoomt hij in. Zo zie je de kleur en het flesje van dichtbij, net als in de winkel.
Reviews.
Tien keer vijf sterren, overzichtelijk bij elkaar.
- 01De score in één oogopslagLosse reviews met grote witte gaten en drie pagina’s. Nu zie je eerst de 5,0 met de verdeling per ster.
- 02Leesbare kaartjesDe reviews staan in gelijke kaartjes met naam en datum. De rest opent met één klik, zonder te bladeren.
- 03Trustpilot erbijOnder de productreviews staat de Trustpilot-score van jullie winkel: 4,8 uit 974 reviews.
Over het product.
Wat je wilt weten, zonder op ‘Lees meer’ te klikken.
- 01Tekst niet meer half verborgenDe omschrijving vervaagde na een paar regels. Nu staat de kern in twee korte alinea’s, zonder ‘Lees meer’.
- 02Sandra’s ervaring in beeldHaar eigen ervaring stond diep in de tekst. Nu staat hij als quote met haar foto: persoonlijk advies, zichtbaar.
- 03Voordelen en stappen als lijst‘100% natuurlijk’, ‘waterbestendig’ en de drie stappen om aan te brengen lees je nu in twee rustige blokken.
Veelgestelde vragen.
Antwoord op de vragen die jullie het vaakst krijgen.
- 01Veelgestelde vragen op de paginaDe vragen stonden in een blog, via een link in de verborgen tekst. Nu lees je de antwoorden direct onder het product.
- 02Chat met SandraNaast de vragen staat Sandra, met een knop naar de chat die jullie al gebruiken, en het telefoonnummer.
- 03Eén vraag open, de rest dichtDe eerste vraag staat open, zodat je ziet hoe het werkt. De rest opent met één klik en de pagina blijft kort.
Tijdens het scrollen.
De knop blijft binnen bereik terwijl je leest.
- 01Vaste koopbalkTijdens het lezen stond er geen knop in beeld. Nu staan onderin altijd de foto, de kleur, de prijs en de knop.
- 02Verzenddag in de balkWanneer je bestelling verstuurd wordt, blijft zichtbaar terwijl je de reviews en de uitleg leest.
- 03Chat in de balkDe chatknop en de Club-knop zweefden over de tekst. Zodra de balk er is, zit de chat erin en blijft alles leesbaar.
Na het toevoegen.
Een duidelijke volgende stap, en een reden om iets toe te voegen.
- 01Bevestiging met je kleurNa het toevoegen zie je meteen welke kleur en hoeveel er in je winkelwagen zit, zonder de pagina te verlaten.
- 02Nog €12,05 tot gratis verzendingMet 37,95 mis je net de grens van €50. De balk laat zien hoeveel er nog ontbreekt.
- 03De Lash Extender met één klikVoeg je hem toe, dan wordt je bestelling gratis verzonden. Zo is meer kopen een logische stap.
Productpagina.
Op mobiel alles wat je nodig hebt in het eerste scherm.
- 01Altijd een knop onderinIn het eerste scherm stond geen knop. Nu staat onderin altijd de prijs, ‘In winkelwagen’ en de chat.
- 02Alle foto’s als kleine beeldenEr pasten twee kleine beelden tussen de pijltjes. Nu zie je alle zes foto’s in één rij, ook ‘100% natuurlijk’.
- 03Waar je bent‘Terug naar divaderme kortingscode’ wordt ‘Home › Make-up › Divaderme’, zodat je makkelijk verder kijkt.
Kleur en kopen.
Kies je kleur op je haarkleur, en zie wanneer hij komt.
- 01Welke kleur past bij mij?De andere kleuren stonden pas onderaan. Nu kies je uit alle vijf, met bij elke kleur voor welk haar hij past.
- 02Verzenddag bij de knop‘Vóór 8:00 besteld, vandaag verzonden’ stond los in een lijst. Nu staat de verzenddag met datum direct onder de knop.
- 03Gratis verzending in zichtEen balk laat zien hoeveel er nog ontbreekt tot €50. Dat nodigt uit om er iets bij te nemen.
Reviews.
De 5,0 van je klanten, direct na de koopbox.
- 01Hoger op de paginaDe reviews kwamen pas na de productomschrijving. Nu staan ze direct onder de koopbox, waar je twijfelt.
- 02Score met verdelingEerst de 5,0 met de verdeling per ster, daarna de kaartjes. Geen grote witte gaten meer tussen de reviews.
- 03Trustpilot erbijDe Trustpilot-score 4,8 uit 974 reviews staat bij de productreviews, met het logo van het platform.
Over het product.
Kort te lezen, ook op een klein scherm.
- 01Niet meer half verborgenDe tekst vervaagde na een paar regels, met ‘Lees meer’. Nu lees je de kern in twee korte alinea’s.
- 02Sandra’s ervaringHaar persoonlijke ervaring met het product staat als quote met haar foto. Advies van een schoonheidsspecialiste.
- 03Zo breng je het aanDe drie stappen en de voordelen staan in korte blokken, makkelijk te scannen op je telefoon.
Maak je look compleet.
Wat erbij past, in één oogopslag.
- 01Vier producten in beeldJe zag anderhalf product en moest vegen. Nu staan vier kaartjes in twee rijen, allemaal in één scherm.
- 02Lash Extender vooraanDe Lash Extender van Divaderme staat eerst, met ‘Goed te combineren’: de logische aanvulling op je wenkbrauwen.
- 03Direct toevoegenElk kaartje heeft een knop, zodat je iets toevoegt zonder de pagina te verlaten.
Bestellen.
Na het toevoegen een duidelijke volgende stap.
- 01Bevestiging met je kleurNa het toevoegen zie je direct welke kleur en welk aantal je in je winkelwagen hebt gelegd.
- 02Naar winkelwagen of verderTwee duidelijke knoppen: je kiest zelf of je meteen afrekent of nog even verder kijkt.
- 03Maak je look compleetDe Lash Extender staat eronder, met één tik toe te voegen.
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.
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.
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.