Nieuw e-commerce platform vergroot B2B-marktbereik van Saint-Gobain

Voor het onlangs geïntroduceerde label Blauwpro hebben we een baanbrekende nieuwe webshop ontwikkeld in opdracht van de Benelux-divisie van Saint-Gobain Distribution, waarmee het bedrijf de kleinere ondernemers in de bouwnijverheid beter wil bereiken. Met name de complexe techniek achter de nieuwe webshop is interessant. De webshop is namelijk gebaseerd op een e-commerce platform met een flexibele codebase en een gestandaardiseerd ontwerp, waardoor deze op termijn relatief simpel en met voldoende ruimte voor ieders wensen en huisstijl kan worden uitgerold voor andere labels van Saint-Gobain.

Saint-Gobain: wereldmarktleider in bouwmaterialen

Saint-Gobain Distribution ontwikkelt, produceert en distribueert bouwstoffen voor woningbouw en utiliteit. De onderneming is vertegenwoordigd in 64 landen en telt meer dan 180.000 medewerkers. In de Benelux levert Saint-Gobain vanuit zes business units – Raab Karcher, Galvano, De Jager-Tolhoek, SFIC, Van Keulen en TGN – een breed pakket bouwmaterialen aan de professionele markt. Elke business unit heeft binnen de divisie een eigen positionering en identiteit en een gevarieerd eigen productassortiment.

 

Marktaandeel kleinere ondernemers vergroten

De laatste jaren wordt de overlap tussen B2B en B2C – zeker online – binnen de concurrerende bouwmaterialenmarkt steeds groter, met als gevolg dat B2C-aanbieders steeds vaker ook aan (kleinere) ondernemers leveren. Met de introductie van een nieuw label en een bijbehorende webshop die uitblinkt in service, informatieverschaffing en assortiment wil Saint-Gobain Benelux deze categorie ondernemers beter bereiken. Daarnaast levert de introductie van de nieuwe webshop Saint-Gobain een schat aan kennis en ervaring op waarmee de andere labels van de Benelux-divisie de komende jaren hun voordeel kunnen doen.

Netvlies heeft alles in huis voor een goed resultaat

Saint-Gobain had voor dit project behoefte aan een online partner die haar kon helpen met design en positionering en onderzocht hiervoor diverse grote en middelgrote bureaus. E-commerce Manager Sven de Bie van Saint-Gobain hierover: “We hebben uiteindelijk voor Netvlies gekozen omdat we daar alles vonden wat we zochten: expertise op elk gewenst gebied, van strategie en design tot techniek en online marketing. Bovendien hebben ze veel ervaring met e-commerce.”

Aanvankelijk had Saint-Gobain het front-end development van de webshop intern met een eigen developer willen oppakken. “Die konden we echter niet op tijd vinden”, aldus Sven de Bie. “Daarom hebben we ook de basis van de front-end als opdracht bij Netvlies neergelegd. Ondertussen hebben we een goede front-end developer gevonden en gebruiken we Netvlies nog als sparringspartner op dit vlak. Op deze manier hebben we er voor kunnen zorgen dat dit voor ons belangrijke project geen vertraging opliep.”

 

Sterke on- en offline huisstijl

Na een gedegen technisch vooronderzoek en een uitvoerige merksessie met Saint-Gobain over het onderscheidend vermogen van haar nieuwe label hebben we allereerst een goede online strategie ontwikkeld. Op basis hiervan  is – door de krachten van onze online designer met die van Ontwerpstudio Keukentafel (een grafisch vormgever met zijn werkplek op het kantoor van Netvlies) te bundelen – in vier stappen een on- en offline huisstijl (inclusief logo/ beeldmerk en brand manual) ontworpen en doorvertaald naar diverse communicatie-uitingen, zoals visitekaartjes, briefpapier, enveloppen, een e-mailing, social media uitingen en online gebruik van de huisstijl.

Via Scrum hebben we vervolgens stapsgewijs delen van het nieuwe online platform ontworpen en front-end uitgewerkt. Daarbij hebben we maximaal rekening gehouden met de herbruikbaarheid van het ontwerp en de techniek voor toekomstige webshops. Om de kwaliteit en de overdracht te waarborgen, kreeg ik twee dagen per week een werkplek naast hun back-end developer. Onze klant Sven was eveneens twee dagen per week bij Netvlies op kantoor aanwezig om de visie van Saint-Gobain door te vertalen naar het design en de front-end techniek.

 

Technisch complex en vooruitstrevend

Een van de grote uitdagingen binnen het project was de enorme productvariatie. Producten van Saint-Gobain zijn namelijk bepaald niet standaard, maar kennen veel varianten met afwijkende specificaties. De codebase is daarom flexibel ingericht en optimaal afgestemd op de sterk variërende specificaties van de aangeboden producten. Maar ook in andere opzichten lagen er voldoende uitdagingen. Zo hebben we – op basis van het technisch vooronderzoek – diverse tools en frameworks geselecteerd waarmee we zelf in de praktijk niet of nauwelijks werken.

Zonder je te willen afschrikken met onbegrijpelijk technisch jargon geef ik je toch graag een indruk van een aantal technische keuzes die we voor het platform hebben gemaakt:

#1 Flexibiliteit in design

Door de codebase flexibel op te zetten, kunnen er in de nabije toekomst meerdere webshops op draaien. Aan de hand van een bestand met variabelen kan het uiterlijk van een webshop volledig worden aangepast. Iconen zijn bijvoorbeeld als SVG’s (vectorbestanden) in de CSS opgenomen en worden aan de hand van het bestand met  variabelen ingekleurd. Hierdoor kun ze eenvoudig worden aangepast aan de huisstijl van verschillende webshops en zijn ze in principe oneindig herbruikbaar. Zelfs wanneer alle kleuren in een webshop volledig worden gewijzigd, hoeft slechts één kleurvariabele te worden aangepast om alle iconen met dezelfde kleurvariabele de gewenste kleur te geven.

e-commerce platform - ontwerp

e-commerce platform - product detailpagina

#2 Mailtemplates

In tegenstelling tot HTML-pagina’s kunnen mailtemplates geen gebruik maken van extern gegenereerde stylesheets. Om de code van elk template toch generiek te kunnen maken – zodat de templates in de toekomst niet voor elke nieuwe webshop hoeven te worden gewijzigd om een ander uiterlijk te krijgen – hebben we in het build process een plugin opgenomen zodat alle gegenereerde CSS-classes inline in de HTML-code worden gezet.

Omdat het testen van een mailtemplate doorgaans veel tijd kost, hebben we in het build process ook opgenomen dat het template naar Litmus kan worden verstuurd. Zo kun je direct zien hoe deze er in alle gewenste clients uitzien.

Daarnaast hebben we er rekening mee gehouden dat heel veel blokken flexibele inhoud zullen hebben. Maak je de afbeelding van een banner bijvoorbeeld tweemaal zo hoog of juist minder hoog, dan moet de tekst nog steeds netjes in het midden worden uitgelijnd. Door toepassing van Flexbox in de templates gebeurt dit automatisch en dat is erg handig, zeker als je elke webshop een eigen uiterlijk wilt geven.

e-commerce platform - mailtemplate

#3 Complete documentatie

Omdat Saint-Gobain op termijn zelf – met eigen developers – de webshops wil kunnen beheren en nieuwe webshops wil kunnen opzetten, hebben we het de techniek achter het online platform optimaal gedocumenteerd. Daarnaast hebben we een style guide gegenereerd waarin ander developers kunnen zien uit welke blokken de HTML-code is opgebouwd en eenvoudig zelf unieke templates zelf kunnen samenstellen. Per webshop kunnen uitzonderingen op de standaard codebase woren gemaakt. Deze worden automatisch meegenomen in generatie van documentatie en styleguides.

#4 Automated testing t.b.v. kwaliteitsbewaking

Door automated unit tests te doen, blijft de front-end kwaliteit gegarandeerd. Dit is essentieel voor de bewaking van de kwaliteit, gezien de groeiambities en het kunnen uitrollen van meerdere webshops in de toekomst. Over dit onderwerp ga ik binnenkort nog uitweiden in een blog waar ik nu mee bezig ben;

Baanbrekend in de markt

De nieuwe webshop mag – zeker voor de traditionele bouwmaterialenhandel – baanbrekend worden genoemd. Niet alleen zijn de aangeboden producten complex in al hun variatie, de orderbedragen zijn ook nog eens behoorlijk fors voor een webshop.  En dát geeft zo de nodige uitdagingen voor online verkoop. Daarbij komt dat Saint-Gobain zich – zowel met de propositie en positionering van een nieuw label als met het opzetten van een eigen webshop – op een voor haar geheel nieuw terrein begeeft. Het enthousiasme hierover is echter groot en zorgt voor nieuw elan binnen de organisatie. Dat alleen is de inspanning misschien al meer dan waard!

De samenwerking met Netvlies is ons uitstekend bevallen. Het Scrum-team was samengesteld uit vakmensen die goed bij ons project pasten. Het wende al snel dat we als klant in dat team mochten meedraaiden en direct konden samenwerken met de specialisten, maar eigenlijk is dat wel uniek. En in elk geval héél anders dan bij andere bureaus!

Sven de Bie,  E-commerce Manager Saint-Gobain Benelux

Benieuwd naar het e-commerce platform?

Bekijk hier de webshop

Frontend Developer Michel Hoogenboom

Michel is Mr. Stabiliteit himself. Zonder schouders op te halen gaat hij elke opdracht aan. Door zijn efficiënte no nonsense werkwijze heeft Michel volop tijd voor andere zaken zoals: bier drinken, het liefst in een kroeg maar ook in de bioscoop of tijdens een goed concert!

Over Michel Hoogenboom

Bedankt!

We hebben je emailadres ontvangen, we kunnen je nog beter van dienst zijn als we je nog wat beter leren kennen.
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.