Webdesign & WordPress Website – Engels

Naast een reeds succesvol online marketing partnership kregen ook onze WordPress experts het volledige vertrouwen van Engels voor een rebuild van hun website.

De klant : Engels ramen en deuren

Engels is een gekende aanbieder van verfijnde raam- en deuroplossingen in hout, aluminium en pvc. Ze focussen boven alles op kwaliteit en esthetiek!

De familiezaak, die sinds 2007 bestuurd wordt door de derde generatie, viert dit jaar zijn 75e verjaardag. De Engels groep heeft vandaag zo’n 175 man in dienst en bestaat naast twee productiebedrijven (hout in Lokeren en aluminium in Eeklo) uit een afdeling voor de projectmarkt, een private label afdeling en een netwerk van 12 Engels-winkels.

Reeds een succesvol online marketing partnership

Na een samenwerking van 7 jaar met het vorige Digital agency koos ramen- en deurenfabrikant Engels begin 2020 voor Hybrid als nieuwe partner voor revenue driven marketing en leadgeneration. Dit met duidelijke ambities: een overall groei realiseren van +20%.

Deze uitdaging werd enkel groter toen vlak na Batibouw (en net na onze opstart) Covid uitbrak. In een sector die stoelt op fysieke verkoop en showroombezoek dienden we omwille van lockdown en beperkende maatregelen dit traditionele proces versneld te digitaliseren.

Ondanks deze extra challenge konden we op een tijdsspanne van 1 jaar, het aantal kwalitatieve en door sales geaccepteerde leads bijna verdubbelen en dit aan een gehalveerde cost per lead tov 2019. Dubbel zoveel leads voor de helft van het budget! Je kan de details van onze aanpak en dito resultaten trouwens hier in depth lezen.

Na deze eerste succesvolle étappe in ons partnership merkten we dat voor verdere schaling het herwerken van de bestaande website noodzakelijk was. Binnen de bestaande setup hadden we met A/B testing en SEO optimalisatie het onderste uit de kan gehaald. Ook visueel was verdere aanpassing onmogelijk. Engels besloot dan ook ons team het vertrouwen te schenken om de website volledig te vernieuwen. Voor ons een geweldige opportuniteit om zo het partnership te versterken en de vooropgestelde resultaten nog verder te maximaliseren!

De challenges

#1 Reeds behaalde resultaten behouden

De allereerst uitdaging was om een website te bouwen op basis van de learnings én achievements van het afgelopen jaar.  De reeds behaalde successen en het vooropgestelde target mochten immers niet in het gedrang komen.

Nu… wij zijn Hybrid en bij ons draait het niet om zomaar een status quo te behouden! Door best practices te implementeren, zullen we op termijn nog betere resultaten  behalen!

#2 Optimaliseren van SEO en behoud van autoriteit

De tweede uitdaging lag hem in het het optimaliseren van de verschillende SEO aspecten. Met de prachtige foto’s van Engels, stootte de oude website al snel op beperkingen mbt laadtijden en mobile friendliness.

Daarnaast was het uiteraard ook cruciaal om de reeds opgebouwde autoriteit te behouden op niveau van de domeinnaam, maar ook voor specifieke individuele pagina’s zoals winkels in je regio en productcategorieën zoals “houten ramen” en “aluminium ramen”.

Tot slot was het ook een uitgelezen kans om de informatie-architectuur opnieuw af te stemmen op de realiteit. Zijn voor alle relevante zoektermen pagina’s aanwezig? Klopt de user journey? Heeft elke bestaande pagina nog zijn nut?

#3 Een gebruiksvriendelijke cms bouwen

Een derde aspect dat zeer belangrijk was voor het team van Engels was om de gebruiksvriendelijkheid van de admin zone te optimaliseren. De structuur van de oude website maakte het quasi onmogelijk om op een efficiënte manier teksten en foto’s aan te passen of om een nieuwe pagina aan te maken. Dit aspect is cruciaal als je snel een nieuwe landingspagina nodig hebt op je website!

#4 Rebranding: elegantie, kwaliteit en eenvoud combineren

Als laatste was er de uitdaging om een kleine rebranding te doen voor Engels. Het team bij Engels wist exact wat ze wilden: de herkenbaarheid van Engels behouden, waarbij elegantie, kwaliteit en eenvoud centraal staan. Een piece of cake voor ons design team natuurlijk!

Onze aanpak

#1 De voorstudie

In deze fase ging onze projectmanager aan de slag om alle informatie te verzamelen die nodig is om van het project een succes te maken.

Op basis van een eerste intakegesprek met de klant gingen we aan de slag om de verwachtingen en benodigdheden in kaart te brengen. We bespraken zaken zoals:

• Wat is de gewenste look en feel?
• Gaan we voor een aangekochte template of ontwerpen we een design op maat?
• Gaan we voor een MVP en werken we nadien overige pagina’s uit of moet alles meteen klaar zijn?
• Welke pagina’s zijn nog relevant, welke moeten verdwijnen en wat is hiervan de impact?
• Hoe zit dat met de huidige webhosting?
• Wat is het voorzien budget en hoe kunnen we hierop aansluiten?

Daarnaast deden we een analyse van de bestaande website om de problematiek rond het gebruiksgemak en de technische challenges goed te begrijpen.

Op basis van deze informatie zaten we met het marketing, development en design team samen om functionaliteiten en pagina’s af te stemmen.

We keken naar de huidige opbouw van de website: hoe zijn de pagina’s opgebouwd, hoe kan je nieuwe pagina’s maken, hoe kan je tekstblokken editeren en kan je een nieuwe taalvariant aanmaken?

Ook bekeken we specifieke technische aspecten:

• Welke plugins zijn geïnstalleerd?
• Is er compressie van CSS, HTML of afbeeldingen?
• Wordt er gebruik gemaakt van caching, CDN of lazy loading?

Al onze adviezen en bevindingen werden gebundeld in een overzichtelijke project sheet die de basis vormde van het hele project! In deze sheet vind je naast algemene projectomschrijving, de user stories, de mock-ups, ook de budget- en tijdsinschatting voor elke fase in het project.

Op basis van de feedback en het beschikbare budget werd dit projectplan finaal bijgestuurd en werd de kick-off ingepland!

#2 Kick-off en projectopvolging

Tijdens deze kick-off meeting overlopen we het volledig project met taken, verantwoordelijkheden en de voorziene planning.

De projectverantwoordelijke bij Engels kreeg toegang tot onze project management tool Click-Up. Dit zorgt voor een overzicht van het te doorlopen traject, waardoor taken en deadlines gemakkelijk beheerd worden.

Wekelijkse status meetings werden gepland om kort op de bal te spelen en de samenwerking tussen de verschillende betrokken teams te optimaliseren.

#3 User experience (UX) en User interface webdesign (UI)

Voor de meest cruciale pagina’s hebben we de opzet en UX in kaart gebracht via wireframes. Hierin werden meteen de learnings en verbeteringen van ons marketing team mee opgenomen, zodat we vanaf de start met iedereen op 1 lijn zaten.

Bij UX design ligt de focus op het schetsen van de toekomstige website zodat je een goed idee krijgt over hoe bezoekers zullen navigeren doorheen de site. Tijdens deze fase wordt bekeken welke flows en inhoud (teksten, foto’s) nodig zijn om de bezoeker zo optimaal mogelijk richting verkoop of conversie te sturen.

Eens alle proposities, flows en functionaliteiten duidelijk waren, gingen we over tot het design van de website.

Op basis van de huisstijl, aangeleverde voorbeelden van brochures en bestaande inspirerende websites werd een eerste prototype met de nieuwe kleuren en typografie gemaakt. De UI elementen en enkele prototypes werden grafisch uitgewerkt in Invision, uiteraard voor Mobile en Desktop.

#4 Invulling van de content

Voor elke webpagina is natuurlijk de juiste content nodig (copy, afbeeldingen, video etc). Cruciaal voor enerzijds de vindbaarheid van de website en anderzijds voor een optimale user experience en dus conversie van de bezoekers.

In overleg met Engels en het marketing team werd geopteerd om het merendeel van de teksten en foto’s van de oude website over te nemen. Het marketing team had reeds een groot deel van de teksten geoptimaliseerd en verder aangevuld met beduidende keywords.

Voor de volledig nieuwe pagina’s schreven we nieuwe SEO geoptimaliseerde content inclusief meta titels en meta omschrijvingen.

Verder werden alle nieuwe foto’s van Engels qua grootte en gewicht geoptimaliseerd via de juiste plugins en zorgden we ervoor dat dit ook standaard zou gebeuren bij het opladen van nieuwe foto’s op de website.

#5 WordPress website bouwen

Nadat alle pagina’s gevalideerd werden door Engels in het design stadium, werden onze WordPress experten aan het werk gezet!

Een belangrijke feature voor Engels was om op een zo efficiënt mogelijke manier bestaande pagina’s terug te vinden, te editeren en te kunnen voorzien van nieuwe contentblokken.

Om een optimale laadtijd te behouden, kozen we ervoor om zelf een page-builder te maken en niet te werken met extensie van WordPress. Deze zijn gekend om lelijke en veelvuldige HTML-code uit te spugen en zijn vaak niet gebruiksvriendelijk als je beperkte kennis hebt over layouts opbouwen.

De belangrijkste lead generating tools werden bovendien volledig op maat ontwikkeld: -de budget calculator en de stijlwijzer konden zeker niet ontbreken. Deze tools kunnen voortaan beheerd en aangepast worden mbt de gewenste resultaten via de admin zone.

Daarnaast installeerden we enkele belangrijke plugins:

• Plugins die de snelheid bevorderen zoals lazy loading, caching en compressie van HTML, CSS en Javascript.
• We beperkten het aantal MB dat opgeladen kan worden per foto en nieuwe foto’s worden automatisch geschaald en gecomprimeerd.
• Yoast
• Redirect plugin

#6 Project opvolging en validatie

Elke week zaten we samen met Engels samen om de vooruitgang te bespreken en eventuele aanpassingen door te voeren. Daarbij kreeg Engels ook toegang tot een testomgeving zodat zij zelf de volledige website konden doorlopen en elke pagina zelf konden valideren.

Niet enkel het team van Engels werd betrokken bij de validatie, ook iedereen van het interne Hybrid team kijkt de eerste versie van het project na om de oplevering te verifiëren.

#7 Finale kwaliteitscontrole

Nog voor de go-live doen we een technische kwaliteitscontrole. In deze fase werden o.a. de laadsnelheid, compressie, browser compatibiliteit, kapotte links, etc,…. nagekeken met oog op verdere website optimalisatie.

Hieronder zie je enkele van de resultaten voor tools zoals SEO-optimer en Chrome Lighthouse tool.

Voor een complete lijst van alle to do’s die we overlopen en uitvoeren, kan je onze checklist downloaden via onderstaande link:

Checklist oplevering website

#8 Online Marketing

Ook voor ons marketing team lag er nog werk op de plank. Op basis van de testomgeving zetten zij de tracking van de nieuwe website op in Google Tag Manager, pasten zij de dashboards aan en bekeken zij de impact op de lopende advertenties om snel te schakelen na de go-live.

Tevens werd beslist om gradueel over te gaan naar de nieuwe layout voor o.a. de offerte pagina en deze uit te rollen via een A/B test.

Tenslotte werden via Google Search Console en AHREFS backlinks alle geïndexeerde pagina’s in kaart gebracht om een volledig redirect plan op te laden.

#9 Go-Live en opvolging

Nadat de volledige validatie was gebeurd door het team en we een volmondig akkoord hadden gekregen van Engels, werd de go-live datum van Engels vastgeprikt.

Na de go-live werd de website nauwlettend opgevolgd door ons team via Analytics, Search Console en AHREFS.

Na de succesvolle go-live, sloten we af met de finale feedback & sign-off meeting om feedback over het verloop van het traject te verzamelen en onze samenwerking te beoordelen.

De resultaten

In oktober 2021 werd de website finaal gelanceerd. Wat mogen we concluderen?

#1 Organische zoekresultaten

Als we kijken naar de organische zoekresultaten in Google Search Console, zien we dat de positie van de website langzaam gestegen is in de eerste twee maanden van 2022 tov de 2 maanden voor de lancering, daarbij zien we een kleine stijging in de gemiddelde CTR in diezelfde periode.

Conclusie: de lancering heeft geen negatieve impact gehad op de bestaande ranking.

De lancering heeft dus geen negatieve impact gehad op de ranking. We zijn goed stabiel gebleven gedurende deze periode.

#2 Evolutie organische zoektermen top 10 en top 3

Als we kijken naar de evolutie van organische zoektermen binnen de top 10 en de top 3, zien we een duidelijk impact van de nieuwe website en zien we hier zelfs een verdubbeling tot verdrievoudiging!

#3 Impact op conversies

Voor Engels was het natuurlijk belangrijk om de conversie op de website te behouden of te verbeteren.

Zo zien we voor onder andere  “Afspraak maken” een mooie stijging in Conversie ratio.

Daarnaast hebben we ook een nieuwe MQL gedefinieerd “Brochure downloaden”, die ook duidelijk interesse genereert en op termijn zal bijdragen tot het verhogen van het conversiepercentage.

Conclusie 

We mogen spreken van een succesvolle lancering!

#1 Behoud bestaande posities ✅

#2 Optimaliseren SEO ✅
Snellere site + meer rankings in top 3 en top 10 zoekwoorden sinds de lancering.

#3 Gebruiksvriendelijke CMS ✅
Wat ervoor zorgt dat we in de toekomst snel kunnen inspelen op een veranderende markt en conform nieuwe doelstellingen de benodigde pagina’s en bijbehorende content kunnen aanmaken.

#4 Rebranding ✅

Shout-out over succesvolle samenwerking

Veelgestelde vragen