mARIOCOTOV.COM
Verantwoordelijk voor de online marketing, migratie naar een nieuwe zelfontworpen razendsnelle Magento 2 webshop en alle andere website en contentgerelateerde zaken.
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
Op de bovenstaande afbeelding staan een aantal pages uit de high fidelity prototype voor het nieuwe mobile design. In het design speelt de zoekbalk een grote rol, deze moet de gebruiker zo snel mogelijk naar het juiste product leiden.
Flowchart 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. Wat het ook laat zien is hoe een gebruiker naar een webshop kijkt, zo zie je bijvoorbeeld langzaam de tabjes en scrollende banners verdwijnen en de steeds belangrijker wordende reviews (sociale bevestiging) een plek krijgen.
2013
De webshop waar alleen het gebruikte kantoormeubilair op te vinden was.
De oude productfoto’s die gewoon uit de losse pols geschoten werden, sieren de homepage. Ook de, in die tijd populaire, side-navigation is er terug te vinden.
2014
Langzaam wordt de huisstijl kleurkeuze gedefinieerd en zie je hier en daar al een toets oranje voorbijkomen.
Wat natuurlijk opvalt is de ontzettende drukke en structuurloze opzet.
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.
2017
Een grote redesign van de Magento 1 shop. Van de twee menubalken is er nog maar één over. De layout is nog een stuk overzichtelijker.
De gradients zijn verdwenen en de kleine banners hebben plaats gemaakt tot een grotere
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.
Ook zijn de product-tabjes verdwenen (werd niet op geklikt), maar zijn nu twee losse product-rijen geworden.
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.
Door de content goed te groeperen en eenvoudig toegankelijk te maken voor de bezoekers resulteerde dit in featured snippets en onpage content uitgelicht als 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, een essentieel element van een website of webshop. Bij een groeiende webshop met een groeiend assortiment, blijft de navigatie 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.
BANNERS
Voor iedere actie op de webshop maak ik altijd een banner met bijpassende social visuals.
Hiernaast twee voorbeelden van gratis producten die we weggeven bij website-bestellingen.
Qua ontwerp vind ik het altijd belangrijk om het te actieproduct in een context te plaatsen.
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 in stijl 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 erg herkenbaar en je ziet ze al vanaf een grote afstand.
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.