oFFICETOPPER
Van webdesign tot online marketing. Hieronder een greep werkzaamheden die in acht jaar de revue hebben gepasseerd.
WEBDESIGN & ONTWIKKELING
Van twee losse webshops naar één grote shop. Tussen 2013 en 2021 is er véél veranderd, zowel qua design, als functionaliteit.
Migratie van Magento 1 naar Magento 2
Het Magento 1 tijdperk komt langzaam ten einde. Tijd voor een nieuwe shop. Een razendsnelle headless Magento 2 shop wel te verstaan.
Het goed converterende design bleef grotendeels hetzelfde op een paar aanpassingen na. Door middel van de scrum-methodiek hadden we binnen een half jaar een nieuwe shop staan.
- API koppeling met CRM-systeem
- Systeem dat verzend-/inhuiskosten berekend op basis van producten
- Snelle productfiltering
- Verbeterd design voor mobile
Wireframes Magento 2 webshop
Hieronder een flowchart van het bestelproces van de nieuwe Magento 2 shop. De low fidelity wireframes laten zien hoe je vanaf de homepage een bestelling plaatst. In de flowchart wordt ook uitgelicht hoe bepaalde elementen reageren op interactie van de gebruiker. Zo is te zien wat een radiobutton moet doen bij een hover-over en hoe de items in de cart moeten animeren wanneer ze verwijderd worden. Door deze acties al op voorhand uit te denken en in de wireframe te betrekken, is de kans een stuk kleiner dat je iets vergeet bij zo’n groot project.
De flowchart met low fidelity wireframes is gemaakt in Figma.
Tijdlijn
Door de jaren heen heeft de homepage een flink aantal redesigns ondergaan. Hieronder een tijdlijn met een aantal veranderingen uitgelicht. Het geeft een mooi beeld van hoe de webshop bij elke verandering steeds volwassener en professioneler wordt. Ook kun je terugzien hoe de interactie van de gebruiker veranderd. Zo zie je bijvoorbeeld langzaam de tabjes en scrollende banners verdwijnen en de steeds belangrijker wordende reviews (sociale bevestiging) een plek krijgen.
2015
De stap naar Magento 1. De eerste webshop waar ik bij de ontwikkeling betrokken was.
Qua design vallen meteen de twee menubalken op (meer over deze bijzondere designkeuze lees je later). De destijds populaire gradients en harde omkaderingen ontbreken natuurlijk ook niet.
Qua layout zit er al veel meer structuur en duidelijkheid in de shop.
2019
De headless Magento 2 is sinds eind 2019 live.
De grote gecentreerde zoekbalk moet de gebruiker zo snel mogelijk naar de gewenste bestemming brengen.
Product-tabjes zijn verleden tijd. Hier werd namelijk niet op geklikt. De twee los uitgelichte productrijen zijn in een oogopslag te zien. Ideaal om aanbiedingen in de spotlight te zetten.
SEARCH ENGINE OPTIMALISATION
Organisch verkeer is een belangrijk kanaal voor de webshop. Daarom is SEO ook een speerpunt binnen de online marketing strategie.
Alle (qua omzet) belangrijke pagina’s worden ingericht als hoekstenen voorzien van waardevolle content.
Goed gegroepeerde content, die eenvoudig toegankelijk is voor de bezoeker, resulteren in featured snippets en uitgelichte site-links.
Het continu updaten van de hoeksteenpagina’s met nieuwe zoektermen en zoekvragen speelt naast het updaten van de interne linkstructuur een grote rol in behouden en veroveren van de 200+ top 3 keyword posities.
Een aantal voorbeelden van content op de hoofdcategoriepagina’s. Het contentpalet is altijd zo gevarieerd mogelijk. Zo gebruik ik graag eigen gemaakte foto’s, visuals, (inspiratie of explainer) videos of animaties.
UI, UX & CRO
User Interface, User Experience en Conversie optimalisatie gaan bij webshop op veel vlakken hand in hand. Hieronder een aantal uitgelichte cases met de problemen oplossingen en natuurlijk ook de fouten.
Verbeteringen op basis van klant feedback
“Ik wil bestellen, maar ik kan de kleuren niet goed zien.” Dat is de meest alarmerende feedback die je kunt krijgen. Daar moet iets aan gedaan worden!
Bij de producten staat standaard een link naar de online kleurstalen. Een link betekent een extra handeling. Dus ook een kans op onduidelijkheid.
De oplossing zit ‘m in de radiobuttons die de stofstalen vertegenwoordigen. Laat deze bij een hover-over een voorvertoning van 300x300px (wat voorheen 100x100px was) zien en je kunt ineens de houtnerf en de stof-textuur zien.
A/B TESTEN
Google Optimize is ideaal om snel A/B tests op te zetten en dus uitermate geschikt om een oplossing voor het probleem “Hoe kan ik bij jullie betalen?” te testen.
Door op de productpagina te testen met al onze betaalmethodes onder de bestelknop. Werd deze vraag niet alleen minder gesteld, maar steeg ook het conversiepercentage.
Menubalk en dropdown
Navigatie is een essentieel element van een website of webshop. Bij een groeiende webshop met een groeiend assortiment, blijft dit een steeds evoluerend element.
Niet één, maar twee menubalken. Topidee om twee verschillende producttypes te scheiden, maar in de praktijk leverde het alleen maar problemen op. Zoals hierboven te zien, valt de dropdown over het onderste menu. Hierdoor kun je dus, wanneer je vanaf boven naar beneden hovert, niet meer bij de opties in de onderstaande balk
Twee balken waren voor de gebruiksvriendelijkheid dus niet de juiste oplossing. Dan een dropdown met een scheiding van het nieuwe en gebruikte assortiment. Dat werkte in het begin het allerbeste, maar naarmate het assortiment in de webshop groeide, werd het gebruikte assortiment helemaal naar de rechterkant verdrongen.
Een groter assortiment, meer productgroepen, dus een grotere dropdown. Hoe doe je dit zonder één van de twee grote productgroepen te benadelen? De oplossing: de hoofdgroepen uitlijnen in de leesrichting (in het F-patroon) van de webshop. Hierdoor vindt de gebruiker de hoofdcategorieën wanneer hij/zij de webshop scant.
GRAFISCH ONTWERP & CONTENT
Van banners voor de website tot bestickering van de bus. Hieronder meer over de bepaalde keuzes binnen de huisstijl, de opbouw van content.
Logo
Ook het logo is door de jaren heen veranderd. Hieronder de verschillende versies met daarbij de uitleg over de veranderingen.
Het allereerste logo. Toen ik in 2013 begon bij Officetopper, was het logo vrijwel meteen een obstakel waar ik tegenaan liep.
Gelukkig mocht ik het aanpassen, zolang het beeldmerk met de T maar bleef.
Door de toevoeging van de pay-off werd duidelijk wat het bedrijf doet. De oranje kleur, die ook door werd gevoerd op de webshop, geeft een mooi contrast en maakt van de huisstijl een geheel.
De naam is getypt in het Bebas Neue font, sterke letters die direct opvallen.
Na een paar jaar was het toch weer nodig om het logo op te frissen. De pay-off in vette kapitalen werkt qua visuele hiërarchie niet lekker. Daarom ook een lichter lettertype, Montserrat (welke ook wordt gevoerd op de webshop).
Ook zijn de rare gradients verleden tijd. Het mag allemaal iets cleaner en rustiger.
Een andere grote toevoeging is .com achter de bedrijfsnaam. Door online groei en de groei in uitingen buiten de website heb ik deze keuze gemaakt, zodat ook altijd de url duidelijk is.
Huisstijl
Met het belangrijker worden van de webshop werd ook het grafisch design belangrijker. Zeker bij de ontwikkeling van de nieuwe shop (je kunt dit goed terug zien in de stap van 2014 naar 2015). Hier werd voor het eerst de huisstijl meegenomen in het ontwerp.
De uitbreiding van het kleurenpalet was zeker nodig wat CRO en UX betreft. Zo zijn alle knoppen in het groen en alle meldingen, aanduidingen en labels in het blauw. Dit werkt het best om contrast, eenduidigheid en visuele hiërarchie te creëren.
Uiteraard is deze nieuwe stijl niet alleen doorgetrokken naar de webshop, maar ook de visitekaartjes, bedrijfswagens en socials.
CONTENT
Alle vormen van content zijn de revue wel gepasseerd. Gifjes, informatieve animaties, explainer videos, montage-videos, infographics of visuals voor socials.
Belettering
Een van de usp’s van Officetopper is de eigen professionele bezorg- en montageservice.
De bestellingen worden bezorgd in de eigen bedrijfswagens. De bedrijfswagens zijn voorzien van een wrap of bestickering.
Ik heb altijd met plezier het ontwerp gemaakt. Van werktekeningen voor bussen tot stickers voor vrachtwagentrailers en complete wraps.
De in het oog springende oranje kleur komt uiteraard hier in terug. Dit maakt de wagens herkenbaar waardoor ze al vanaf een grote afstand te herkennen zijn.
De ontwerpen zijn altijd voorzien van een mooie visual die een goede representatie geeft van ons assortiment.
Om diepte te geven aan deze visual springt deze altijd iets uit het ronde masker. De keuze voor het ronde masker komt uit de ronde vorm van het beeldmerk. Zo is er een lijn in dezelfde vorm keuze en blijft het een passend geheel.
PRODUCTFOTOGRAFIE
PRODUCT-FOTOGRAFIE
Van alle gebruikte producten worden nieuwe productfoto’s geschoten. Ondanks dat de fotostudio in het magazijn altijd veel te lijden heeft met verplaatsen van het zware meubilair, lukt het altijd met nabewerking om nette foto’s te krijgen. Door de groei en professionalisatieslag van de webshop kregen de productfoto’s steeds meer aandacht.
OUD NAAR NIEUW
Zoals misschien al opgevallen is, hebben de productfoto’s niet altijd een witte achtergrond gehad. Dit is goed te zien op de homepage uit 2013. Sindsdien is er veel veranderd.
Er valt voor beide fotografie-stijlen wat te zeggen. De linker stijl geeft direct aan dat het product tweedehands/gebruikt is.
De rechter stijl is professioneler en laat zien dat er tijd en moeite in het product wordt gestoken.
Precies om de laatstgenoemde reden is voor de bewerkte stijl gekozen. Om zo de aandacht op de product te focussen en de klant te laten ervaren dat gebruikt zeker niet onderdoet voor nieuw.