Drie webshops met verschillende winkels op één platform

Resultaat

Eind 2019 kampte Dynamo Retail Group met legacy die een obstakel vormde voor de groeiambities. In de loop der jaren was een wildgroei ontstaan aan verschillende webshops die allemaal op een ander platform draaiden. Resultaat: trage websites en een te lange time to market. Het beheer van deze verschillende platformen verliep omslachtig en was bovendien erg arbeidsintensief. Dynamo Retail Group zag flinke kansen in hun groeimarkt. Tijd om die te benutten en voor een duurzame oplossing te gaan!

Als eerste zijn we voor Dynamo Retail Group op zoek gegaan naar een heldere, centrale manier van beheer. Het onderbrengen van alle webshops in één platform heeft talloze voordelen. Hierdoor hoeven wijzigingen niet meermaals te worden ingevoerd en kregen we direct inzicht in de vele dataprocessen die er bestaan. We hebben een nieuw e-commerce-platform gebouwd op basis van Shopware 6 en zijn aan de slag gegaan met het uitfaseren van verouderde systemen. Dit kwam de snelheid van de websites zeer ten goede. Ook hebben we – samen met onze designpartner Bikkelhart – alle webshops een fris en nieuw design gegeven. 

Dynamo Retail Group is een retailorganisatie waar ruim 830 winkels bij zijn aangesloten, verdeeld onder drie pijlers. Deze ondernemers hebben vanzelfsprekend belang bij een goed functionerende webwinkel. Daarom stond bij alle onze werkzaamheden één vraag bovenaan ons lijstje: Hoe creëren we de allerbeste customer journey voor alle bezoekers van de verschillende websites? Rekening houdend met de bestaande huisstijlen zijn we op zoek gegaan naar een manier waarop de verschillende fietswinkels online echt konden gaan uitblinken.

Proces

Voor een complexe klus als deze is een duidelijk plan essentieel. Maar hoe weet je eigenlijk wat er nodig is? Wat heeft bijvoorbeeld prioriteit? En welke zaken kunnen ook in een later stadium worden opgepakt? Alles begint met het in kaart brengen van aannames, wensen en eisen. Wat is er realistisch gezien mogelijk en wat niet? Wij adviseren altijd om deze aspecten in een zo vroeg mogelijk stadium uitgebreid aan te pakken. Hiermee voorkomen we dat er later in het project onaangename verrassingen ontstaan.

De Discovery Phase

In een periode van ongeveer twee maanden heeft ons team diepgravend onderzoek gedaan. “We hebben de huidige situatie doorgrond. De gewenste nieuwe situatie – die al uitgebreid was omschreven, zowel commercieel, functioneel als technisch – tegen het licht gehouden. En we onderzochten de mogelijkheden binnen de verschillende beschikbare omnichannel e-commerce platforms.” Aldus Product Owner Michel. 

Het hieruit voortvloeiende adviesrapport is – samen met bijpassende wireframes en flowcharts – gepresenteerd aan het management van Dynamo Retail Group. 

“Deze voorbereidende fase heeft ons tijdens het project weten te behoeden voor verkeerde aannames. En niet onbelangrijk de wireframes en flowcharts waren al een mooie start aan het daadwerkelijk project, ook hier verdien je dus je investering van deze onderzoekende fase direct terug.” Vult Michel aan.

Sprint 1 t/m …
Na een Discovery Phase, ook wel Sprint 0 genoemd, kun je als opdrachtgever beslissen of je het vervolgtraject met ons wilt doorzetten. Net als in ons onafhankelijk advies vinden we het echt belangrijk dat je naast tooling ook een partij kiest die het beste bij je past. In Sprint 1 en alle daaropvolgende hebben we al het projectwerk opgepakt. Hierbij hebben we iedere feature individueel opgeleverd. Over de manier waarop wij ons deployment-proces hebben ingericht, staat hier een interessant blog.

TechStack

Hoe laten we verschillende technieken en datastromen samen komen? En hoe automatiseren we processen zonder de mogelijkheid tot maatwerk te verliezen? 

Frontend

Bovenin staan de verschillende webshops met daaronder de frontend applicatie: Next.js. Dit is een moderne React applicatie die – gecombineerd met TypeScript – ons in staat stelt om het design van alle webshops vanaf de basis op te bouwen. Het nieuwe ontwerp voor Bike Totaal fungeert als template voor de rest van de shops, terwijl de verschillen in huisstijlen als losse componenten nog steeds kunnen worden ingezet. Kortom, de basis is in iedere webshop hetzelfde, maar overal kunnen we de eigen branding toepassen.

Next.js

Next.js herkent de juiste webshop aan verschillen in de domeinnaam match. Vervolgens zoekt hij het juiste thema in het design er bij. Hierbij hebben we gekozen voor het gebruik van styled components. Waar voorheen vaak CSS-bestanden werden ingezet om een complete website te stylen, konden we nu individuele componenten vormgeven zonder daarbij de mogelijkheid tot thematische styling te verliezen. In simpelere taal: wanneer er data uit bijvoorbeeld BikeTotaal.nl binnenkomt, zoekt de applicatie er automatisch het juiste Bike Totaal-logo en de bijbehorende donkerblauwe huisstijlkleur bij. Maar wanneer de data afkomstig is van Profile ‘de Fietsspecialist’, dan komen de lichtblauwe kleuren tevoorschijn en wordt dat logo over de componenten geplakt. 

Deze case is vrij complex en daarom is de frontend los maatwerk geworden. Een aantal zeer specifieke eisen passen niet in de configuratie van Shopware. Next.js biedt ruimte voor dit soort maatwerk.

Een ander belangrijk argument voor ons om met Next.js te werken is de vlekkeloze manier waarop de applicatie de context herkent van de onderliggende e-commerce software. Neem bijvoorbeeld content of assortiment. Die kunnen op de ene webshop voor een compleet andere doelgroep bestemd zijn dan op de andere webshop. Hetzelfde geldt voor de menustructuur. Dan is het prettig wanneer de systemen desondanks elkaar toch goed begrijpen.

Shopware

De keuze voor dit open source platform uit Duitsland kwam mede tot stand vanwege de gunstige API-infrastructuur. De gekozen e-commerce software bepaalt in grote mate hoe bijvoorbeeld je menu’s er uit gaan zien. Of wat er daadwerkelijk op de productpagina’s getoond wordt. Alle product- en orderinformatie wordt hier opgehaald. Shopware stelt ons in staat om aan de hand van blokken, nieuwe menu’s en/of productpagina’s met de juiste layouts te creëren. Daarnaast was het voor Dynamo Retail Group een belangrijke overweging dat dit platform ze in staat stelde commercieel gezien snel stappen te maken.

Alumio

Vaak krijgen we in projecten als deze te maken met externe integraties. Hoe verbinden we al deze software op een logische manier? En hoe zorgen we er voor dat deze integraties schaalbaar en toekomstbestendig zijn? Voor de backend infrastructuur zijn we uitgekomen op Alumio. Hierin zit een API-layer die er voor zorgt dat we moeiteloos data kunnen ophalen uit externe systemen van Dynamo Retail Group. Zo staat in het CAB en Procurios veel productinformatie en orderdata opgeslagen en wordt Fietsenwijk.nl gebruikt voor de verkoop van tweedehands fietsen. Alumio haalt in deze externe databases de informatie op en stuurt deze naar Shopware zodat deze in de frontend getoond kan worden.

Bike Totaal beste winkelketen 2022

Met gepaste trots feliciteert Enrise moederbedrijf Dynamo Retail Group met de uitverkiezing tot beste winkelketen 2022 in de categorie fietsen!

Specs