Kategorie: Innovation

Projekt MySwitzerland.com

List von Links die direkt zu Ankerpunkten auf dieser Seite führen.

Einleitung

Neuste Technologien, neu gedacht und für das Erlebnis Schweiz kombiniert eingesetzt: MySwitzerland.com setzt im Bereich Innovation neue Standards. Zum Einsatz kommen u.a. WebVR (A-Frame), Nutzung von Bewegungssensor, 3D-Fonts, Multi-CDN Lösung, Machine Learning im Bereich Image Recognition, Multi-Layer Kartenlösung mit SwissTopo und Google Maps (inkl. Google Places API) Integration.

Inspirationskalender

Die Vielfältigkeit und Schönheit der Schweiz in 48 interaktiven Inspirations-Videos in einem Jahreskalender. Hierfür wurde eine komplett eigenständige und responsive Lösung realisiert (inkl. Virtual Reality. https://vr.myswitzerland.com -> Optimized for Oculus Go). Selbst auf dem Smartphone ist der Kalender voll funktionsfähig und besitzt zusätzlich einen 'Entdecker'-Modus welcher den Bewegungssensor der Smartphones nutzt. Die weltweite Performance für die schnelle Weiterschaltung der Videos wurde mithilfe von CDN's und diversen Frontend-, Backend und Video-Performance-Optimierungen sichergestellt. Damit die Videos für die Gäste einen Mehrwert erhalten, wurden 'fliegende' und klickbare Meta-Informationen als Overlay für die Videos realisiert.

Live ausprobieren

Motion Tag Tool

Will man interaktive Elemente synchron zum Inspirationskalender-Bewegtbild platzieren, kommen üblicherweise aufwändige manuelle Tracking-Postprozesse zum Einsatz. Um Editoren eine freie Platzierung (entweder mit oder losgelöst von Objekten) zu ermöglichen, wurde eigens ein Editing-Tool realisiert. Hier können Tags mittels weniger Positionen auf einer Timeline platziert werden, die eigentlichen Bewegungsvektoren werden dann mittels Smoothing-Algorithmus interpoliert. Als Export genügen so wenige Ankerpunkte, welche als JSON ins CMS übernommen werden können und von der CMS-Komponente für das Rendering verwendet werden.

Live ausprobieren

Virtual Reality

Entwicklung einer Virtual Reality Umgebung für den Inspirationskalender unter https://vr.myswitzerland.com (Oculus Go empfohlen). Für die VR-Umsetzung kommen WebVR Technologien auf Basis der Library A-Frame zum Einsatz. Es werden dieselben Videos wie für Desktop/Smartphone verwendet. Hierzu mussten die Videos in die 3D-Welt auf 220 Grad aufgezogen, entzerrt und ausgefadet werden und ein eigenes VR Interface für die Navigation der Videos entwickelt werden. Zusätzlich wurde eine eigene 3D-Font mit Explosionsanimation kreiert.

Mehr erfahren Common.Of Virtual Reality

Schweizer Karte

Eine 360 Grad Karten-Lösung mit Blick auf die Vielfältigkeit der Schweiz. Innerhalb eines ausgewählten Inhalts können weiterführende Umgebungssuchen ausgeführt und angezeigt werden (Suche in der Umgebung). Ebenfalls ist auch eine ‘Around Me’ Funktion vorhanden, welche den aktuellen Aufenthaltsort in den Fokus stellt. Mehrere Karten-Layer können ausgewählt werden, u.a. wurde SwissTopo (Schweizer Landestopografie) in Google Maps integriert. Eine Textsuche umfasst neben den Inhalten von Schweiz Tourismus über eine Anbindung der Google Places API sämtliche Strassen und Orte. Die Anwendung wurde mit VueJS entwickelt, wobei wartefreie UI-Performance und übersichtliche Bedienung hohe Priorität hatten.

Live ausprobieren

Automatisierte Bildauslieferung

Um die bildgewaltige und inspirative Seite mit über 400'000 Bildern handhaben zu können, kommt künstliche Intelligenz zum Einsatz. Editoren verwalten im Backend jeweils nur ein einziges Bild pro Teaser oder Seite. Das Bild welches schlussendlich in der Seite ausgeliefert wird, wird beim Laden der Seite für die Bildschirmgrösse und die Grösse der Komponente gerechnet und zugeschnitten (Crop). Der Zuschnitt erfolgt mit Hilfe von Machine Learning Algorithmen vollautomatisch, wobei die künstliche Intelligenz dafür sorgt, dass der richtige Bildausschnitt gewählt wird und die für die visuelle Aussage relevanten Bildelemente erkannt und beibehalten werden. Zusätzlich werden vom eingesetzten Bildauslieferungs-Service Cloudinary auch das Bild-Format (JPEG, PNG, WebP) und die Bildqualitätsstufe (z.B. 75%) vollautomatisch und dynamisch bestimmt.

Online durchblättern

Suche

Als Alternative zum direkten Einstieg via Suchmaschine oder der Hauptnavigation gibt es eine intuitive und performante Suche, welche eine unstrukturierte Suche nach dem gewünschten Inhalt ermöglicht. Die 'Search-as-you-Type' Lösung kann pro Markt individuell mit Inhalten befüllt werden und berücksichtigt die marktspezifischen Bedürfnisse. Die Suche ist fehlertolerant ausgelegt und um dem Gast eine bessere Sicherheit zu bieten, besteht auf dem Desktop die Möglichkeit mit einem Hover über das Suchergebnis eine Vorschau auf die Detailseite zu erhalten. Die Suche auf Basis von Algolia ist dank CDN Integration weltweit performant ausgelegt.

Screencast ansehen

Weltweite Performance

Um den Fernmärkten eine möglichst gute Customer Experience zu bieten, kommt eine Multi-CDN Lösung (Cedexis) zur performanten Auslieferung der Seite zum Einsatz. Die Seiten werden hierbei möglichst in der Nähe des Gastes zwischengespeichert und auch von dort aus ausgeliefert. Für China wurde ein dediziertes CDN (Quantil) evaluiert, welches erlaubt die Inhalte auf dem chinesischen Festland zu speichern und somit hinter der chinesischen Firewall ausgeliefert werden. Hierzu musste eine spezifische ICP Lizenz beantragt werden und diverse technische Anpassungen vorgenommen werden, so dass in China keine Google- und Facebook Lösungen eingebettet sind! Der Performance-Gewinn gegenüber früher ist massiv (Faktor 10) und die Rückmeldungen aus dem Markt hervorragend!

Online durchblättern

Andere Kategorien