Overslaan en naar hoofdinhoud gaan

Bijenkorf

Terug in de tijd met de Bijenkorf

Image

De Bijenkorf is niet meer uit het Nederlandse straatbeeld weg te denken. Al 150 jaar lang zijn de winkels met het herkenbare hexagon-patroon een geliefde plek om te shoppen voor velen. Tijd om dat te vieren en de warenhuisketen met focus op luxe in het zonnetje te zetten, want hun geschiedenis is net zo rijk als hun aanbod. Om hun jubileum in stijl te vieren kwam de Bijenkorf bij Dept, en samen hebben we een online experience opgezet die de Bijenkorf eer aan doet. En dat alles in vier weken, van concept naar livegang.

Hoe vat je anderhalve eeuw samen?

De Bijenkorf werd in 1870 opgericht in Amsterdam door Simon Philip Goudsmit. Wat begon als een bescheiden fourniturenzaak is inmiddels een luxe warenhuisketen geworden die in zeven grote steden te vinden is – en online, natuurlijk. Bijna iedereen heeft inmiddels wel een beeld van én mooie herinneringen aan de Bijenkorf. Dit waren tenslotte de eerste warenhuizen van Nederland die zich richtten op het luxe segment. De panden zijn dan ook herkenbaar, en een bezienswaardigheid op zichzelf.

In 2020 bestaat de Bijenkorf 150 jaar: een mooi moment om stil te staan bij de geschiedenis. Want tussen 1870 en 2020 is er nogal wat veranderd, en niet alleen voor de Bijenkorf zelf. Als onderdeel van de campagne worden in de winkels zelf etalages in thema aangekleed en displays geplaatst. Bij het online gedeelte van de campagne vroeg de Bijenkorf Dept om te helpen om een bijzondere digitale ervaring te creëren.

Image

Zo brachten we het verleden tot leven.

Een schat aan materiaal

Om 150 jaar Bijenkorf in kaart te brengen ontwierpen we een tijdlijn: een reis door de geschiedenis waar we stilstaan bij alle hoogtepunten van de Bijenkorf. Vanaf de oprichting kun je zien hoe het bedrijf transformeert – de wederopbouw na de Tweede Wereldoorlog, de groeiende kunstcollectie, de eerste Drie Dwaze Dagen in 1984 en de laatste in 2015, de tijd van de Chillout, en zo verder.

Deze gebeurtenissen worden weergegeven in tekst én met hulp van audiovisuele bronnen. Iedere generatie heeft weer andere herinneringen aan de Bijenkorf, en die zijn allemaal terug te vinden in de tijdlijn.

Image

Een geïllustreerde tijdlijn

De tijdlijn is opgedeeld in een aantal periodes. Per periode staat een geanimeerde illustratie symbool voor dat stuk van de Bijenkorf-geschiedenis. Deze illustraties zijn allemaal van de hand van Timo Kuilder, een Amsterdamse illustrator. Kuilder ontwierp ook de etalages. Zo is de ervaring online én offline consistent.

Om de animaties zo soepel mogelijk in te laden, maakten we gebruik van Lottie. Deze door Airbnb opgezette library maakt het mogelijk om After Effects-animaties op het web en op mobile (native en react native) gebruiken. Zo is het net zo makkelijk om animaties toe te voegen als om statische afbeeldingen te gebruiken.

Image
Image

Levendige animaties en statische content

Omdat de illustraties zo’n belangrijk onderdeel van de website zijn, besteedden we veel tijd en aandacht aan het perfect weergeven van de animaties. De animaties van de illustraties werden gemaakt in After Effects en gerenderd door Lottie met behulp van de de Bodymovin plug-in, die animaties uit After Effects exporteert in JSON-data. Als je onderaan een periode bent, wordt de volgende periode meteen ingeladen. Je ziet dan automatisch de Lottie-animatie afspelen en scrollt meteen door naar het eerste stukje tekst.

De tijdlijn is opgedeeld in hoofdstukken (periodes) waar je doorheen kunt scrollen. Elke periode heeft weer unieke content: video’s, radiofragmenten, tekst, en meer. Die content is beschikbaar wanneer de bezoeker de tijdsperiode induikt.

De pagina-transities worden mogelijk gemaakt door Barba.js, en het scrollen door de tijdlijn werkt met hulp van GreenSock. Verder gebruikten we vanilla JavaScript, met wat kleine CSS-verrassingen. Zo verandert op mobile het logo van kleur wanneer er een video over het beeld heen komt (dankzij mix-blend-mode), en is er natuurlijk een custom cursor.

De illustraties zijn weliswaar geanimeerd, maar de content zelf is statisch. Er zit geen CMS achter de website. Er is dan ook veel redactioneel werk gedaan om de teksten, die aangeleverd werden door de Bijenkorf, zo goed mogelijk in te passen in de designs.

Een exclusieve collectie, online uitgelicht

De 150-jaar-campagne brengt niet alleen een feestje en mooie geschiedenis met zich mee: er is ook een exclusieve collectie van 150 items die verkocht zullen worden in de winkels zelf en online. Een selectie van deze items wordt uitgelicht op de campagnewebsite. Zo kunnen bezoekers de items in hun historische context zien en meteen doorklikken naar de productpagina in de Bijenkorf-webshop.

Deze mensen weten alles van dit project