Je bent hier omdat je webshop druk aanvoelt, je bezoekers druk aanvoelen en je winkelwagen verlegen is. Dit ecommerce redesign laat zien hoe een rommelige categorie en een landingspagina vol betaald verkeer werden aangepakt zodat de volgende stap voor bezoekers vanzelf spreekt. Korte versie, alleen ontwerpen, alleen desktop, gebouwd in Adobe XD voor Act Bold Media Group en hun klant AMG Air Marketing Group LLC.
AMG Air verkoopt technische producten die gewone mensen niet elke dag kopen. Bezoekers komen met vragen, niet met vertrouwen. De bestaande categoriepagina strooide specs in kleine letters rond, filters voelden als een toets en de landingspagina was meer catalogus dan gids. Betaald verkeer landde op pagina’s die geen vertrouwen verdienden voordat ze probeerden te verkopen. Mensen hadden een snelle manier nodig om vier dingen te achterhalen: wat is dit merk eigenlijk, welk model past in mijn ruimte, waarom kopen bij AMG Air en wat heb ik verder nog nodig.
Op de categoriepagina liep alles in elkaar over en was het scanpad grillig. Voltage, ampère en verwarmingstype stonden weggestopt in de kleine letters. Reviews waren aanwezig maar niet overtuigend. Upsells zoals hoezen, roosters, snoeren en filters verdwenen in het accessoire-woud. Dat schaadt de bijverkoop en levert supporttickets op als ‘welk snoer heb ik nodig’. Op de landingspagina ontbrak een helder verhaal: begin met vertrouwen, leg het assortiment uit, laat mensen kopen, vergelijken en om hulp vragen.
De beperkingen telden mee. Deze sprint was alleen desktop. De content was ruw. De doorlooptijd was krap. Implementatie zou worden verzorgd door Act Bold Media, dus de overdracht moest glashelder zijn. We hielden één resultaat voor ogen: de route van de volgende koper vanzelfsprekend maken.
We hielden het plan simpel: vertrouwen verdienen, uitleggen, helpen kiezen, dan handelen. Zie de pagina als een goede winkelmedewerker. Eerst een begroeting en een reden om te blijven. Dan een korte uitleg in gewone taal. Dan een nette plank met producten op maat en vermogen. Dan een vriendelijke hint over accessoires. En ten slotte een echt mens om mee te praten.
Dit is de structuurkaart die we gebruikten.
Daarbij leverden we een copydeck, afbeeldingsprompts voor lifestyle- en vrijstaande accessoires en schemabegeleiding, zodat zoekmachines schone signalen krijgen zonder dat een developer op schatzoektocht hoeft.
De landingspagina is waar betaald verkeer landt, dus die moet eerst de gemoederen sussen. De headline zegt wat dit is en waarom het te vertrouwen is, zonder vulling. De subline zet de toon: snelle verzending, echte support, eerlijke prijzen. We voegden één primaire knop toe om de collectie te bekijken en één secundaire om met een specialist te praten. Een kleine reviewchip toont de gemiddelde beoordeling, zodat bezoekers snel een peilmeting hebben zonder de pagina te verlaten.
Dan de merkintroductie. Vier kaarten doen het zware werk.
We houden het kort en linken door naar de merkhub voor wie meer wil lezen. Hapje, geen encyclopedie. De toon van het ecommerce redesign blijft consistent: helder en nuttig.
Dan de sectie ‘waarom bij ons kopen’. Kopers kiezen niet alleen een model, ze kiezen een verkoper. We laten zien: snelle levering met gangbare verzendtijden, echte support voor en na de aankoop, status als geautoriseerde reseller en eerlijke prijzen inclusief volumeopties voor orders met meerdere units. Een link wijst naar de over-pagina voor wie het verhaal wil checken.
Daarna volgt het zakelijke gedeelte: winkel de collectie. Filters sluiten aan op koperlogica. BTU-opties: 9.000, 12.000 en 15.000 BTU. Voltage: 208/230 of 265 volt. Ampère: 15, 20 of 30. Verwarmingstype: warmtepomp of elektrisch. Productkaarten tonen de modelnaam, beknopte specs, een ruimtegrootte-indicatie en een knop om het product te bekijken. Een notitie herinnert lezers dat ruimtegrootte een indicatie is en dat isolatie en zonlicht meespelen. Dit is webshop UX design met manieren.
Niet elke koper wil bij aankomst meteen een compacte catalogus. Sommigen hebben even ruimte nodig om te ademen voor ze klikken. Daarom bouwden we een tweede versie van de landingspagina: hetzelfde verhaal, maar met meer witruimte, meer lifestylebeelden en een rustiger ritme. Zie het als dezelfde winkelmedewerker, maar dan in een rustiger showroom.
Waar v1 compact is en direct naar de filters gaat, vertraagt v2 het tempo. Beelden doen meer van het praten, copy heeft kortere regels en secties ademen met duidelijke lucht eromheen. De vertrouwensstrook en herohoofdlijn landen zachter, het productaanbod voelt gecureerd in plaats van stampvol en kopers krijgen de tijd om te knikken voor ze scrollen.
V2 werkt vooral goed voor betaald verkeer, waarbij bezoekers vaak sceptisch of gehaast aankomen. Eerst vertrouwen verdienen, dan wijzen naar de winkelknop. Naast elkaar vertellen beide versies hetzelfde verhaal, maar in twee stemmingen: één snel, één rustig. Beide leiden kopers naar het juiste model, maar v2 doet dat met een stillere handdruk.
Conclusie: zelfde logica, twee tempo’s. Kies de landingstijl die past bij je verkeerstemperament.
We vervolgen met een kleine vergelijking. Mensen houden van een snelle tabel als ze voor een muur van afkortingen staan. We vergelijken dit producttype met twee typische alternatieven: een window unit en een ductless mini-split. Criteria zijn energiezuinigheid, geluidsniveau, installatiecomplexiteit, beschikbaarheid van onderdelen, beste toepassingen en een ruwe ruimte-indicatie. Geen hype, gewoon het achterkant-van-een-servet-overzicht waar kopers om vragen. Een knop biedt een maatwerkkeuzelijst voor wie menselijke hulp wil.
Upsells staan direct onder de vergelijking, niet drie klikken verder begraven. Vijf kaarten: hoezen en roosters, snoeren en thermostaten, afvoerkits, filters en professionele installatie. Elke kaart heeft één regel copy en een voorbeeldprijs: hoes met rooster bundle voor 149 dollar, snoeren voor 39, 49 of 59 dollar, thermostaat voor 99 of 179 dollar, afvoerkit voor 29 dollar, filters voor 34 dollar per drie stuks of 99 dollar per tien. Deze sectie verhoogt de gemiddelde bestelwaarde en vermindert ‘oops verkeerd snoer’-e-mails.
We sluiten af met reviews en een laatste hulp-nudge. Korte citaten van hotel- en vastgoedmanagers, met sterren en voornamen, bouwen vertrouwen op. Het laatste blok geeft een duidelijke volgende stap: stuur ruimteafmetingen, voltage en planning. Wij sturen een passende keuzelijst en offerte.
De categoriepagina zet oppervlakkige interesse om in echte productkeuze. We gebruikten een duidelijke typografieschaal, een strak raster en filters die blijven hangen. Elke productkaart toont het model, koel- en verwarmingscijfers, voltage en ampère, verwarmingstype en een snelle ruimte-indicatie. De prijs is leesbaar, financieringsnotities schreeuwen niet en reviews zijn zichtbaar maar geen circus.
We stemden het scanpatroon af. Naam en specreeks eerst, dan de actie. We schrapten overbodige labels en hielden microcopy kort. Het oog krijgt een ritme: links naar rechts, boven naar onder, kaart voor kaart. De gebruiker hoeft niet te pauzeren om vreemde formuleringen te ontcijferen. Het ecommerce redesign draait hier om het wegnemen van weerstand.
We voegden ook een kleine plakkerige filterrij toe voor lange lijsten, die meescrollt. Zo kan een hotel-GM wisselen van 9.000 naar 12.000 BTU zonder naar boven te scrollen. Geen trucjes, gewoon tijdsbesparing. Zo verdient webshop UX design zijn plek.
We ontwierpen het systeem in Adobe XD. Componenten, stijlen, spacingtokens en redlines staan allemaal in het bestand. Knoppen en tegels delen een typografieschaal. Iconen en badges zijn consistent. Kleuraccenten sturen het oog maar schreeuwen niet. We hielden het contrast gezond, zeker op kleine financieringstekst, want die regel telt voor inkoopteams.
We leverden XD-specs die een developer kan lezen zonder te turen. Spacing loopt in gelijke stappen. Breekpunten zijn genoteerd voor toekomstig mobilewerk. De hero ondersteunt een reviewchip en twee knoppen. Productkaarten accepteren een upsell-microbadge, bijvoorbeeld ‘hoes en rooster toevoegen’. Filters kunnen elegant uitbreiden als het assortiment groeit.
En voor wie wil aanpikken op de metaforen: een framework is als cakemix, het spaart tijd als je het recept volgt. API’s zijn de ober, die neemt je bestelling op naar de keuken en brengt wat je vroeg. QA is de kieskeurige klant die het bord teruggeeft als het zout niet klopt. We houden deze metaforen bij de hand zodat teams snel op één lijn zitten.
We leverden alleen ontwerpen, maar we dekten de tafel voor de ontwikkeling. De opmaak werkt met gangbare ecommerce-stacks. De upsell-logica kan worden gekoppeld aan producttags of metavelden: voltage, ampère, verwarmingstype. Het vergelijkingsblok kan in eerste instantie statisch zijn en later worden omgezet in een template.
We voegden ook schemanotities toe zodat zoekmachines de pagina begrijpen zonder te gissen. Product op tegels, FAQPage op de accordeon, Organization voor AMG Air en AggregateRating waar beschikbaar en compliant. Goede schema-markup helpt bij rich snippets, en ja, dat kan klikken bevorderen zonder extra advertentiebudget.
Als je dieper wilt gaan op interfacevakmanschap, staat ons UX- en UI-ontwerpproces hier beschreven: hoe we onderzoek, wireframes en high-fidelity werk structureren, UX- en UI-design. Ander project, zelfde gereedschapskist.
Deze doorlooptijd hield stand omdat de opdracht gefocust was en de beslissers beschikbaar waren. Als jouw project stakeholderworkshops of gebruikerstesten vereist, bouwen we dat in voor high-fidelity, met hetzelfde rustige ritme.
Als je landingspagina’s proberen te verkopen voordat ze iets zeggen, haken bezoekers af. Als je categorieraster eruitziet als een kassakwitantie, stokken bezoekers. Een ecommerce redesign is geen special effects: het zijn nette schappen, duidelijke labels en een vriendelijk mens in de buurt. Dat is wat we hier bouwden, en dat is wat we bouwen voor teams die minder giswerk en meer afrekeningen willen.
Als jouw assortiment lastige kenmerken heeft, kunnen we die koppelen aan filters die menselijk aanvoelen, niet databasevormig. Als jouw accessoires stil zijn, kunnen we ze op het juiste moment laten spreken. Als je copy technisch is, kunnen we die schrijven zoals een ober het menu uitlegt: kort en smakelijk.
We leverden desktoppagina’s, inclusief een merk-landingspagina en een categoriepagina, beide ontworpen in Adobe XD. Het project omvatte ook een volledig copydeck, afbeeldingsprompts en schemanotities. Daarnaast vernieuwden we de header en footer, wat leidde tot een merkbaar beter webshop UX design.
Nee, deze sprint was alleen ontwerpen. Act Bold Media verzorgt de implementatie.
De opdracht was alleen desktop voor de eerste testronde. Het componentsysteem is klaar voor mobiele adoptie later.
We schreven beknopte voordeel-copy, een eenvoudige FAQ, upsell-teksten en voorbeeldprijzen, en een rustige heroline die verwachtingen stelt.
Via modelkenmerken, voltage, ampère en verwarmingstype, zodat de juiste hoes en het juiste snoer verschijnen bij de juiste unit.
Voor dit project wel. We werken ook in andere tools zoals Figma als een team dat vraagt. Maar consistentie wint van gereedschapsoorlogen.
Ja. Herohoofdlijn, CTA-label, aanwezigheid van de vergelijking en positie van upsells zijn goede testkandidaten.
Geef ons je belangrijkste productpagina en de landingspagina die het meeste betaalde verkeer krijgt. We vertellen je wat je webshop tegenhoudt, in gewone taal, en we houden het kort. Plan een videogesprek nu.
Vertel wat vastloopt, wat je wilt bouwen, of wat opgelost moet worden. We reageren binnen 24 uur.
