New website Madurodam.nl

Submitted by
Flink
The Case
Category
Design / UX
Short introduction
We designed and developed the new responsive website for the renowned theme park Madurodam in The Hague. Madurodam is a small city of beautiful miniatures, playful activities and great attractions. Madurodam shows it’s visitors what makes the small country of the Netherlands so great. We helped Madurodam with their online strategy and designed the visual and interaction concept for the new website. Then we developed the website together with Madurodam, following the agile project approach SCRUM.
Launch date
Background
Flink won the pitch for the new website of Madurodam. They were looking for an agency to help them with the development of a completely new website, offering all of its visitors and target groups a new and refreshing presentation of all the theme park has to offer. From the magnificent miniatures to the interactive attractions and all the facilities available on the park. The website needed to inspire its visitors, draw them into the Madurodam experience from the first moment they visit the website. Offering clear and accessible practical information on visiting the park and compelling online ticket sale possibility’s. Inspire, inform and convert.
Our team at Flink helped Madurodam with their online strategy, and the visual and interaction concept for the new website. Then we developed the complete website with Madurodam, following the SCRUM project approach. During the development, Madurodam worked on the creation of the content and the implementation of the content in the CMS.
The website is developed with a complete custom responsive front-end. We chose to work with Drupal 8 with the multisite set-up so that we can add the websites for Madurodam Events and Madurodam charity in the near future. We also implemented multiple languages, some more extensive than others.
Objectives
Madurodam had a lot of goals set for their new website. The most important being to inspire, inform and convert visitors from the Netherlands and from abroad and to increase the online conversion rate and the ticket sales on the park cash registers. In detail there were also a few technical goals to achieve. A Pingdomscore of +85 (website speed), very specific SEO demands and conservation of their cautiously built up Google Ranking.
Results
The website was released very recently, on the 2nd of May. The release was a great success and the client and its stakeholders are very happy with the results and the collaboration with Flink. The website is very fast and the feedback from visitors is very positive. This is seen in a very notable decrease in bounce percentages of key pages of the web site.
The ticket flow is supllied by a 3rd party, so that part was (and is) not within our scope. Madurodam will be working with a new supplier soon, so we hope to work with them on further improving the online customer journey and further increase the (online) ticket sales.
Technical challenges
One of the key challenges for this website is the versatility of the content and the freedom the content editors needed to have to create pages.
With the help of Paragraphs we created a set of content modules which can be used to create every page that was needed for this project. All with one Content Type. So, no specific content types for landing pages, index pages, content pages etc. Just one type to rule them all. The combination of content modules defines what kind of page is created and the only limitation is the creativity of the content editor. This keeps the CMS very clean but the amount of options nearly infinit.
Another very important technical objective was the performance of the website. We created a very visual website with a high level of engagement, lots of images and video. This works very well to show the atmosphere of the park but we had to make sure this doesn’t affect the performance and with that the conversion of online tickets.
We put a lot of effort in the optimization of images, css and js using Google PageSpeed Insights. We also used the Responsive Images module (in combination with Focal Point for optimal cropping) to make sure every device gets the optimal image size and no unneeded bulk. This effort resulted in a 91/100 score for desktop and a 78/100 score on mobile. According to us a very nice result for this visually attractive website!
What the high level of design also demands is absolute control over the HTML and SASS/CSS. We didn’t want to be restricted by the standard Drupal HTML structure so we can structure our SASS according to the BEM method. We created a module called ‘Entity2Array’ which we can use to get any content from the CMS without any unnecessary html so we can create the exact solution this design demands. This keeps the html and css very clean and maintainable and is optimal for performance.
Challenges in (combination of) modules
See technical challenges.
Contribution form the project to the Drupal-community
To highlight active menu items and parent items in our navigation we used the ‘Menu Trail By Path’ module in our Drupal 7 projects. For Drupal 8 this module wasn’t updated yet. Since we depend heavily on this module we decided to create a Drupal 8 version of this module and released it to the Drupal community. This module is also implemented in the Drupal setup for this project. We know a lot of community members use this module as well so we’re happy to make this contribution to the Drupal community.
Name client
Pieter de Hullu - Online Marketing en Sales - Madurodam
What does the client think about the project?
The new website for Madurodam was a challenging project in 3 ways.
There was a very tight deadline; in only a couple of weeks we needed to create this whole new site from scratch.
We needed to create a fresh online strategy and top-end (authentic/unique/fresh) design.
And we really wanted to have the site 95% ready, also looking at content in 5 languages, by the time we launched.
So a challenge indeed.

Flink managed this whole project perfectly.
By using Agile Scrum as a base for the project management we were able to keep communication in the team quick and efficient, all the while not losing sight the quality we were striving to adchieve. The cooperation went very well.
In the end, in about 3 Sprints Flink finished the whole built. It was impressive. In a period of about three weeks in advance to the built we focused on the data of the old site and our knowledge of the market to come to a base strategy (keeping in mind the different customer journeys this site had to service as good as possible), the new concept and design of the new site and in the end, very clear user stories on which the whole backlog could be built, ensuring us a swift development period after that.

We gladly let the final result speak for itself. We ourselves as also our personal and professional network are very impressed by the new look and feel of the site on desktop and also mobile (a lot of effort also went into the ‘mobile-first’ development/design). Besides concept and design we also had some form requirements looking at cleanness of the code and things like speed and performance of the site, of which all are meet in the end.
What needs to be said is that the checkout was not developed by Flink but is managed by another party, not involved in this project. So from a design and technical point of view that is of no importance to the rest of the project.
Screenshot