Website Port of Amsterdam

Submitted by
Triquanta Web Solutions / NR6
The Case
Category
Design / UX
Short introduction
The Port of Amsterdam is one of the biggest sea ports in Western Europe, and an ambitious one. In 2030, Amsterdam will have a port of world class that connects port, city, and region. Port of Amsterdam is working hard on the transition from fossil to renewable energy, on supporting cross-fertilisation for the circular economy, and on innovations in the fields of security and digitisation. Portofamsterdam.com is the platform conveying this ambition.
Launch date
Background
The Amsterdam port region is one of the world’s most important logistics hubs. With more than 97 million tonnes of cargo transhipment per year, it belongs to the five largest seaports of Western Europe. The strategic and central location in Europe makes the port easy to access and ensures excellent connections with all major European markets. Port of Amsterdam develops, operates and manages the Amsterdam port region. It also promotes sustainable economic development in the Amsterdam Metropolitan Area. Port of Amsterdam wants to create economic and social value while developing the Port of Amsterdam into a sustainable and innovative port. The aim is to create a good balance between strong financial returns, care for the environment and comprehensive added value for the region.
Objectives
To develop a new corporate website that presents the Port of Amsterdam as an independent company with a unique proposition: Port of Amsterdam is a Port of Partnerships. The port is a partner in everything, for every stakeholder. The new website should convey that the port always gets smarter, faster and cleaner. It should also take into account possible restrictions on internet bandwidth of user groups as skippers.
Port of Amsterdam's new digital platform should be the primary communication channel for all stakeholders, where all information about the port and its developments is available, and customers, governments, media, knowledge institutions, and other audiences can engage in dialogue with content experts.
Results
Port of Amsterdam's corporate website is based on an intensive discovery phase. In this phase design agency NR6 defined in close collaboration with us, the organisation and all
stakeholders, their needs. Then these were translated to customer journeys with the use of behavioral psychology.
The motto is: Read less, do more. Through pages targeted to specific audiences, we provide stakeholders with information relevant to them and get it to them fast. Persuasive design is used to steer desirable behaviour and reward users throughout the entire website. For example, skippers now know within three clicks whether they have to pay inland harbour dues. Legislation, availability of berths and facilities like shore power outlets and drinking water points are easy to find on the new, integrated port map.
The brand identity of Port of Amsterdam consists of primary colours, has a powerful visual language with symbols and beacons, and recognizable photography. The strong simplicity of the visual identity is translated into a responsive flat design solution, optimised for the mobile internet subscriptions of (foreign) skippers.
The migration of the old website to the new customer journeys is being implemented in stages. In 2017 there is a hybrid structure with a cross-domain construction, which incorporates the content from the old website. This allows for a phased release of the new customer journeys.
The platform provides the right content easily and quickly to meet the needs of each stakeholder. This led to a growth in the number of sessions (+ 23%) in the first months after the platform went live. This growth also applies to visitors (+ 24%), pageviews (+ 26%), session time (+ 11%), and engagement (pages per session + 4%) while bounce rate decreased.
Technical challenges
The website contains a lot of information for very different target groups. To support the web editors in addressing all these audiences, a highly flexible back-end has been built based on the Paragraphs module that allows editors to build very flexible page layouts. For example, editors have the freedom to use a photo, a colour, or a video as the background of a page. Another example are the breadcrumbs that can be set per page. We have created a lot of different Paragraph bundles like a decision tree, full backgrounds, floating notifications, rich text, FAQ's and blocks with Views. We configured the WYSIWYG-editor in such a way that the editorial team has complete freedom in creating content. They can create harmonicas, different types of buttons (links) and embed other content (entities and blocks (also Views blocks)). Good examples of this flexibility can be viewed on pages like https://www.portofamsterdam.com/en/business/cargo/liquid-bulk and https://www.portofamsterdam.com/en/shipping/inland-shipping/submitting-your-statement-inland-harbour-dues

Because the website contains so much different content it is very important that the menu gives optimal access to all that content. The user interaction was therefore leading in the implementation of the responsive main menu, which is available in the header, but also in a slightly different form on the homepage. The menu behaves differently for different devices for optimal user experience. The editorial team has complete freedom in configuring the menu.

To show the location, and arrival and departure times of sea vessels, we have created a custom Google Maps integration. Several JSON feeds are imported from the Port of Amsterdam back office and then shown on an overlay on Google Maps. The data can also easily be filtered. For this functionality we have written a custom javascript module for optimal user experience. https://www.portofamsterdam.com/en/shipping/arrivals-and-departures

We have implemented URL Path aliases based on Workbench Moderation revisions. This resulted in applying an URL alias only when the content was approved for publishing. The default implementation of Workbench Moderation does not support this.

For tracking purposes we use Google Tag manager and also track front-end events. For example, we only show telephone numbers after a click, so we can track that action; See: https://www.portofamsterdam.com/en/business/cargo/containers

To show content from the old website that has not been migrated yet we use a transparent proxy that shows the old content on the same domain.
Challenges in (combination of) modules
For the creation of a decision tree we used the Webform and Paragraph modules in combination with custom javascript and styling. Content editors can add a Webform to a node through a Paragraph. In the backend they simply choose to show the webform as a tree. For an example see https://www.portofamsterdam.com/en/shipping/inland-shipping/submitting-your-statement-inland-harbour-dues

We combine the Entity Embed module with Paragraphs to make it easy for content editors to show related content on a page by simply adding related content in a WYSIWYG-editor in a Paragraph ite. An example is the expert block on a page like https://www.portofamsterdam.com/en/business/cargo/dry-bulk

For personalised slide shows we used the Owl Carousel in combination with some custom logic. Every slide can have a target audience. That makes it possible to create slide shows for specific groups. An example of a slide show like that is https://www.portofamsterdam.com/nl/presentatie/onze-visie-en-strategie-1-minuut

For the overview of the news section we use a View generated from Apache Solr. The filters are implemented with facets and some custom styling. https://www.portofamsterdam.com/en/news

For easy integration of listing of articles we used the Views module in combination with Paragraphs and Taxonomy. Content editors can add a Latest Articles Paragraph and choose a article type and keyword to show relevant articles on any page they want.

By default every time a node is saved the path alias is updated based on the title. In combination with Workbench Moderation Revisions this leads to the undesired result that a title of a node is leaked before the node is ready for publishing. To mitigate this the path alias should only be generated when the node is published. To make this work we needed a set of patches from Drupal.org.
Contribution form the project to the Drupal-community
We have contributed several patches to contrib modules:
Internal links https://www.drupal.org/node/2813933
Solr Tag booster https://www.drupal.org/node/2836333
Media https://www.drupal.org/node/2308451
Drupal Like (Flag counter) https://www.drupal.org/node/2716795
Name client
Port of Amsterdam (Havenbedrijf Amsterdam)
What does the client think about the project?
Irene van Dijk, senior communication advisor: “Triquanta has utilised the options within Drupal in such a way that we can offer our visitors an even better user experience.”
(original quote in Dutch: “Triquanta heeft de opties binnen Drupal zodanig benut en bewerkt, dat wij een nog optimalere gebruikservaring aan onze bezoekers kunnen bieden.”)
Screenshot