Category: Technology

Hint

Intro

The precision of a Swiss timepiece: the architecture of the brand-new content hub platform includes numerous data import and data export interfaces to peripheral systems. Multiple languages and markets as well as automation of data migration or image delivery using AI are just some of the highlights of the platform. Global performance and availability are possible thanks to a multi-CDN solution, especially for long-haul markets and priority markets such as China, as well as the use of the latest front-end technologies for the inspirational calendar and the map. In order to include these functions, a fairly complex solution was needed.

Concept & architecture

The large amounts of data, the performance specifications and the continuous data processing of the many external interfaces demanded a sophisticated architectural concept. The completely redesigned CMS (Sitecore 9) functions as a content hub and is available for use with all digital channels (headless-ready). Data is regularly obtained from external data suppliers via 20 interfaces (only shown as an example in the image section). The data is then supplemented, translated, linked and published in the CMS by editors or made available again via export interfaces.

Show detail image

Multiple languages and markets

The website is prepared in 14 languages, including right-to-left (RTL) languages such as Arabic. The content can be adapted and output in 22 markets on a customised basis so that, for example, it is possible to differentiate between regional dialects. The same content page can be designed differently by the editors to create market-specific versions. 

Show example

Automated data migration

85% of the data (from approx. 18,000 pages in up to 14 languages and 60,000 images) was migrated via an automated data exchange from the old CMS to the new CMS. The data was exported from the old CMS into a neutral intermediate format (JCR, Java Content Repository). In order to improve the quality of the data and have the data ready for the new system, the data was validated and restructured using parsers and regular expression rules. During the long phase of content preparation in the new CMS, it was ensured that the migrated content could already be processed in the new CMS and that changes from the previous CMS could still be adopted.

Show example

Middleware

MySwitzerland.com brings together data from a variety of sources. To configure their connection, middleware based on Apache Camel was developed that functions as an anti-corruption layer and reduces the complexity of the Sitecore configuration. Based on the event-carried state transfer pattern, a loose coupling with Sitecore can be achieved. The middleware is responsible for the connection of the external interfaces, carries out a plausibility test, transfers the data into its own domain model, calculates the changes and makes Sitecore available via the RabbitMQ message queue system. Sitecore runs through these events, processes and confirms them and ensures that simultaneous changes by authors and third-party systems are processed correctly.

Show detail image

Availability and performance

The high availability is ensured by vertical and horizontal scaling and geo-redundant hosting with synchronisation between the data centre locations. Current measurable annual availability: 99.95%. Use of a multi-CDN solution with two CDNs and use of HTTP/2 ensure high-performance operation in all markets worldwide. For China, a dedicated CDN (quantile) was evaluated, which allows the content to be stored on the Chinese mainland and thus delivered behind the Chinese firewall. This was only possible by applying for a specific ICP licence and making various technical adjustments in the front-end and back-end so that no Google and Facebook solutions were used.

Show detail image

Automatic CDN invalidation

Pages in the CDN are cached for a certain period of time. The rules for the duration of the cache can be configured by means of a generic rule or individually on the specific page by the editors. When a page is changed, the page is automatically invalidated on both CDNs by means of the CDN API.

Show example

Inspirational calendar

The diversity and beauty of Switzerland presented in 48 interactive and inspirational videos in the form of an annual calendar. A complete stand-alone, responsive solution was implemented for this purpose (incl. virtual reality. https://vr.myswitzerland.com -> optimised for Oculus Go). The calendar is fully functional, even on a smartphone, and also features an ‘explorer’ mode which uses the smartphone’s motion sensor. The rapid global transmission of the videos was ensured with the help of CDNs and various front-end, back-end and video performance optimisations. To ensure visitors get more added value out of the videos, floating and clickable meta-information was added as an overlay.

Try out live

Inspirational calendar motion tags

A motion tag drawing tool was developed in-house to record the movement of ‘flying’ meta info tags. The generated movements can be exported as vectors in JSON format and stored in the Sitecore CMS system. Click here to try the tool yourself.

Start now!

Virtual reality

Development of a virtual reality environment for the inspirational calendar at https://vr.myswitzerland.com (Oculus Go recommended). WebVR technologies based on A-Frame libraries are used for the VR implementation. The videos are the same as those used for your desktop/smartphone. To make this possible, the videos had to be prepared to 220 degrees in the 3D environment, any distortion removed and faded out. A custom 3D font with explosion animation was also created. 

Learn more

Map of Switzerland

A 360-degree map solution showing the diversity of Switzerland. Based on the initial selection in the map, additional searches of the surroundings can be carried out and displayed (using the ‘Search the surroundings’ function). There is also an ‘Around Me’ that focuses on the current location. Multiple map layers can be selected. SwissTopo (Switzerland's national topography) was just one of the programs integrated into Google Maps. Thanks to a connection to the Google Places API, a text search brings up not only the content from Switzerland Tourism, but also all streets and locations. The application was developed using Vue.js with a firm focus on maintenance-free UI performance and simple operation.

Try out live

Search

As an alternative to direct access via a search engine or the main navigation display, the site offers an intuitive and high-performance search function, which enables an unstructured search for the desired content. The ‘Search-as-you-Type’ solution can be filled with individual content for each market and takes market-specific requirements into account. The search function is tolerant of errors and provides an option to hover over the search result on the desktop to get a preview of the detail page. This can also improve security for visitors to the site. The Algolia-based search function is designed to perform well worldwide thanks to the integration of a CDN.

Watch Screencast

Automated image delivery

Artificial intelligence is used to operate the visually striking and inspirational website containing over 400,000 images. In back-end processes, editors only manage one image per teaser or page in each case. The final image that appears on the page is calculated and cropped while the page is being loaded to adjust to the screen size and the size of the component. The image is cropped fully automatically with the help of machine learning algorithms, whereby artificial intelligence ensures that the correct section of the image is selected and that the visual elements essential to the message are identified and retained. In addition, the image delivery service Cloudinary determines the image format (JPEG, PNG, WebP) and the image quality level (e.g. 75%) fully automatically and dynamically.

Browse online

Search engine optimisation

From the very start of the project, various SEO measures were planned for the go-live. Automated mapping of the old URL structure to the new URL structure took place for this purpose. This was only possible with the help of data migration and the previous page IDs. Configuration options were developed for the finder/filter pages, which enabled the editor to replace the previous parameters with new parameters. Thanks to these measures, approximately 90% of the old URLs could be intercepted by the new website after the go-live. Search indexing on Google has already returned to normal two months after the go-live.

Show example

Configuration options finder

For all finders, such as the event finder (https://www.myswitzerland.com/events), a number of configuration options have been implemented in back-end processes, and these define SEO indexing control. This means that the editor can define which combinations (e.g. filter topic and filter region) are permitted in which combinations for SEO indexing. This then controls the output of the page’s robots meta-information and the links to be shown (nofollow). It is also possible to configure meta-information (meta-title, meta-description, meta-image). The meta-title and meta-description are dynamically assembled on the basis of the current filter selection.

Show example

Configuration of sitemap and robots meta-information

For each page, the editor can individually configure whether the page is to be indexed (all combinations of index / noindex and follow / nofollow can be selected) and whether the page is to appear in the Sitemap.xml. This allows the crawl budget to be better taken into account and means that less significant pages are not exposed to the search engines. In the output, care is taken to ensure that canonical URLs and hreflang cross-links are used correctly.

Show example

Other categories