The Bijenkorf is an iconic Dutch retail brand that has been around for 150 years and is a go-to tourist destination. To celebrate this important anniversary in style, the luxury brand turned to DEPT® and together we created an online experience, from concept to launch in four weeks, which honours the Bijenkorf.
How to summarise 150 years?
The Bijenkorf was founded in 1870 in Amsterdam by Simon Philip Goudsmit. What began as a small haberdashery shop has become a luxury department store which can be found in seven major cities – and online, of course. By now, almost everyone who lives in the Netherlands has a beautiful memory of the Bijenkorf. After all, the Bijenkorf was the first department store in the Netherlands that focused on the luxury segment. The buildings are very recognisable and a point of interest on their own.
In 2020, the brand turned 150 years old: a perfect time to reflect on the retailer’s evolution both online and offline. So, as part of the campaign, shop windows were redesigned to reflect the brand’s history and DEPT® stepped in to help set up the online aspect of this campaign.
This is how we brought the past to life
A look back in time
Our team designed a timeline: a journey through history where we stop to see all the highlights of the Bijenkorf. From its establishment you can see how the company transforms – the reconstruction after World War II, the growing art collection, the first Three Crazy Days in 1984 and the last in 2015, the time of the Chillout, and so on.
These events are displayed in-text and with the help of audio-visual resources. Each generation has different memories of the Bijenkorf, all of which are reflected in the timeline.
Features
Illustrated timeline
Illustrated timeline
The timeline is divided into several periods. For each period, an animated illustration was created to represent that period in time. These illustrations are all written by Timo Kuilder, an Amsterdam illustrator. Kuilder also designed the windows. Thus, the experience is consistent online and offline.
For the animation to run as smooth as possible, we used Lottie. This library established by Airbnb allowed us to use After Effects animations on the web and on mobile (native and react-native). This way, it ‘s just as easy to add animations as to use static images.
Vivid animations & static content
Vivid animations & static content
Because the illustrations are such an important part of the website, we spent a lot of time and attention perfecting them. The animations and illustrations were created in After Effects and rendered by Lottie using the Body Movin plug-in, which animations from After Effects export data in JSON. If you’ve finished a period in time, the next period will be immediately loaded. You will automatically see the play Lottie animation and scroll straight up to the first piece of text.
The timeline is divided into sections (periods) which users can scroll through. Each period has unique content: videos, radio clips, text, and more. That content becomes available to see when the visitor dives into the period.
The page transitions are enabled by Barba.js, and scrolling through the timeline works with the help of GreenSock. Furthermore, we used vanilla JavaScript, with some minor CSS surprises. The mobile logo colour, for example, changes when a video scrolls out on the page (due to mix-blend-mode), and there’s a custom cursor.
Although the illustrations are animated, the content itself is static. There is no CMS behind the website. There was a lot of editorial work done to make the text, provided by the museum, to fit in with the design as well as possible.
An online exclusive collection
An online exclusive collection
The 150-year campaign not only brings entertaining and beautiful history with it, but there is also an exclusive collection of 150 items that will be sold in stores and online itself. A selection of these items will be featured on the campaign website. Visitors can see the items in their historical context and immediately click through to the product page in the Bijenkorf shop.
