Menu
A team

A-team in actie: Frontend-developer Tim over Suzuki

Werken aan de frontend van de nieuwe site van Suzuki

Samen met zijn UX-collega Sander Wehkamp gaf Tim van Schie het autodeel van de website van Suzuki Nederland, www.suzuki.nl, een nieuwe look-and-feel. Met structurele kleine verbeteringen wist hij de conversie te verhogen en daarbij schuwde hij de technische uitdagingen niet.

Hij lijkt wel splinternieuw

Ik verbeterde bijvoorbeeld een productvergelijkingstabel: bezoekers komen nu in minder stappen in het auto-samenstelproces terecht. Ook is de performance van de frontend-code nu veel beter. De nieuwe website lijkt wel splinternieuw. Maar we hebben het gedaan zonder de componenten, de content en de HMTL-code te wijzigen. Dat was best een uitdaging. Alles moest passen binnen de nieuwe huisstijl, ook de onderdelen waar nog geen ontwerp voor was. Dat vroeg om een heel andere manier van denken, want je begint niet met een minimum viable product zoals bij een compleet nieuwe functionaliteit.

Handlebars-templates met JavaScript

Veel dynamische componenten waren geschreven met Handlebars-templates in combinatie met JavaScript. Nu zouden we daar een library als React voor gebruiken. Dat zit dichter tegen het pure JavaScript aan en ik ben er ook beter bekend mee. Bovendien heb je in React minder code nodig, waardoor je meer overzicht hebt. Maar omdat alles nu eenmaal met Handlebars was geschreven, heb ik me daarin verdiept. Een uitdaging op zich. Dit alles vroeg om een grote dosis creativiteit en snel schakelen met de UX-designer en de product owner. Dankzij de agile manier van werken en onze slimme oplossingen kwam het redesign goed uit de verf. Overigens schrijven we de nieuwe componenten wel in React.

Develop yourself!

Profiteer van de kennis en verhalen van het A(viva)-team! Van blogs, events tot C# coding guidelines.

Naar het overzicht
“Zowel de dealers als de mensen bij Suzuki zijn erg te spreken over de verbeteringen. Dat geeft energie en opent mogelijkheden voor toekomstige ontwikkeling.”


SASS met @extend en @mixins

De architectuur is in het verleden door een ander bureau opgezet: Gulp voor het build-proces, SASS voor de styling en Handlebars en React voor de dynamische componenten. De uitdaging wat betreft SASS is dat de oorspronkelijke code veel gebruikmaakt van @extend. Dat hoeft geen probleem te zijn, maar hier zorgde het dat de SASS-code voor een class soms onverwacht veel impact had op andere elementen. Dit heb ik deels opgelost door in plaats van @extend gebruik te maken van @mixins. Dan zie je goed waar een wijziging allemaal impact op heeft.

Je voegt echt waarde toe 

Er wordt vanuit UX en analytics goed nagedacht over de juiste verbeteringen om de conversie te verhogen. Je voegt dus echt waarde toe. Die wetenschap, dat je iets neerzet dat een verschil maakt, maakt het voor mij een mooi project. En doordat er af en toe technische uitdagingen spelen, leer ik steeds bij. Het was ook boeiend en leerzaam om verbeteringen door te voeren in de performance van de frontend. Daar had ik me voor dit project nog niet veel mee beziggehouden. Ten slotte is het gaaf om te zien hoeveel je met een relatief kleine investering kunt bereiken als je slimme aanpassingen doet.

Zoveel mooie redenen om te werken bij Aviva. Bekijk ze allemaal!
Onze website maakt gebruik van cookies om je de best mogelijke beleving te bieden. Lees ons privacy statement voor meer informatie.