Redesign Bluebiz van Air France en KLM

Nieuwe website van Bluebiz, het wereldwijde programma van Air France en KLM (met partners: Delta Air Lines, Kenya Airways, China Eastern, China Soutern en Virgin Atlantic), is begin deze maand live gezet.

Laptop met de voorpagina van bluebiz
18 juni 2019

Afgelopen maanden hebben Synetic, Mplus, bureau HeyHey en BlueBiz nauw samengewerkt om het loyaliteitsprogramma van Airfrance en KLM, voor het midden- en kleinbedrijf, in een nieuw jasje te steken.

Tijdens dit project heeft Synetic samen met Martin van Mourik van bureau HeyHey gewerkt aan het concept, de visuele vertaling en de front-end ontwikkeling. Mplus heeft de backend voor haar rekening genomen.

Een redsign in 12 talen en 2 stijlvarianten

Met het vertalen van de nieuwe look & feel naar een redesign voor Bluebiz hadden we een mooie klus te pakken. Niet alleen moest de site beschikbaar worden gemaakt in 12 talen, ook de partner airlines moesten zich daarin kunnen vinden. Zo hebben we uiteindelijk ervoor gekozen om voor Virgin Atlantic een aparte stijlvariant ontwikkeld. Hiermee kunnen zij de Bluebiz-site in hun eigen huisstijlkleuren tonen.

Technologie

Gezien de eis (de meerdere talen en kleurvarianten) was het zaak de styling van de pagina's heel secuur op te zetten, met altijd een tweede (of zelfs derde thema in gedachten). Het werkproces wat we volgen in de front-end helpt ons hierbij. We hadden dit keer echter niet alleen een andere layout maar ook daadwerkelijk andere teksten in 12 verschillende talen. Een goede case om eens een andere techniek te proberen dan dat we normaal gesproken gebruiken!

Atomic/Component based design met Fractal

Atomic/Component based design is standaard in ons werkproces. Het zorgt er onder andere voor dat we sneller kunnen doorontwikkelen. Bij Synetic maken we alle losse componenten, die deze methodiek oplevert, inzichtelijk door middel van een component library: een overzicht van alle mogelijke onderdelen/componenten binnen de site (denk hierbij aan een verzameling knoppen of formuliervelden). Voor het inzichtelijk maken van deze componenten gebruiken we altijd PatternLab. Binnen dit project hebben we de keuze gemaakt eens bij de 'concurrent' van PatternLab te kijken; Fractal.

Fractal werkt met hetzelfde principe als PatternLab: bouw componenten zoals een knopje of footer, en deze worden vervolgens netjes getoond in een interface. Door kleine componenten samen te voegen krijg je grotere en complexere onderdelen van een website. Fractal werkt op basis van NodeJS met Handlebars als templating engine.

Voor PatternLab hebben we wijzigingen moeten doen aan de interface, om deze logischer te maken voor gebruik. Fractal komt out of the box al met een heel nette interface, die bovendien ook nog erg makkelijk te wijzigen is. Het aanpassen van de Fractal styling of logica is erg eenvoudig, waar dat bij PatternLab niet altijd zo is. Bij het beginnen van een project kies je altijd de juiste tools voor het beoogde doel. Fractal heeft zeker een plek veroverd in onze overweging bij het starten van een nieuw project!

Meer weten over Atomic/Component based design, en waarom we daarvoor gekozen hebben? Dat lees je in onze eerdere blogpost over Component-based design!

Het resultaat

Het eindresultaat mag er wezen met een tevreden klant, als grootste compliment:

De site is overzichtelijker en toegankelijker geworden
Dries Klein, Vice President Sales Benelux , KLM

Bekijk het eindresultaat op Bluebiz.com