Category: Innovation

MySwitzerland.com project

Hint

Intro

The latest technologies, redesigned and combined to promote a true Swiss experience: MySwitzerland.com sets new standards in innovation. It integrates WebVR (A-Frame), the use of a motion sensor, 3D fonts, a multi-CDN solution, machine learning in the field of image recognition, a multi-layer map solution with SwissTopo and Google Maps (incl. Google Places API), and more.

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

Motion Tag tool

Syncing interactive elements with the moving image of the inspirational calendar usually requires complex manual tracking post-processes. To enable editors to be placed freely (either with objects or free-standing), an editing tool was specifically created. Tags can be placed on a timeline using just a few positions; the actual motion vectors are then interpolated using a smoothing algorithm. This small number of anchor points is sufficient for export. The points can be transferred to the CMS in JSON format and used by the CMS component for the rendering.

Try out live

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, and a separate VR interface developed for the navigation of the videos. A custom 3D font with explosion animation was also created.

Learn more Common.Of Virtual reality

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

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

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

Global performance

In order to offer the best possible customer experience to the long-haul markets, a multi-CDN solution (Cedexis) is used to ensure high-performance delivery of the site. The pages are cached as close to the visitor’s location as possible and also delivered from the same point. 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 so that no Google and Facebook solutions were embedded in China! There has been a significant improvement in performance compared with the previous solution (factor 10) and the feedback from the market is excellent!

Browse online

Other categories