Die digitale Familienplattform mit Gian und Giachen

Wer kennt sie nicht, die beiden Kultsteinböcke aus Graubünden? Die Kinderbücher über die Abenteuer von Gian und Giachen sind Bestseller und stehen in den Wohnzimmern vieler Schweizer Familien. In der von uns entwickelten Progressive Web App (PWA) «Kinderwelt Graubünden» werden die Buchseiten nun mit Hilfe von künstlicher Intelligenz zum Leben erweckt und digital animiert.

Dreh- und Angelpunkt der digitalen Welt bildet das animierte Bergpanorama: Es ermöglicht das Entdecken verschiedener Orte. Durch die Steuerung mittels Gerätebewegung sowie dem eingebauten Dolly-Zoom und parallax Effekt wird das Erlebnis für Kinder und Erwachsene maximiert. Das Panorama leitet in die einzelnen Lieblingsorte von Gian und Giachen über: Diese beinhalten zahlreiche auf Sprites basierende, interaktive Animationen und Audiofiles. Die Abstimmung von Audio und Animation stützt sich dabei auf einem eigens erstelltes Dialog-Framework basierend auf Typescript. Einem Ausbau für weitere Orte oder einer Frühlings-Version des Buches steht somit nichts im Wege!

Die von uns programmierte Progressive Web App Kinderwelt Graubünden gewann beim Best of Swiss Web Award 2020 Bronze in der Kategorie Technologie!
www.bestofswissweb.swiss

Die technischen Challenges

Das Herzstück der Graubünden-Kinderwelt bildet die auf Machine Learning basierte Scanfunktion, welche den nahtlosen Übergang vom Buch zur Plattform ermöglicht. Mittels Deep Learning werden gescannte oder fotografierte Kinderbuchseiten (oder Ausschnitte davon) erkannt und die User werden anschliessend auf die entsprechende, animierte Buchszene geführt.

Der Entscheid für eine Progressive Web App und gegen eine native, mobile App haben wir bewusst getroffen: Die User können so die hochkomprimierte App auch offline nutzen und auf ihrem persönlichen Homescreen platzieren. Trotz der Herausforderung von fehlendem Support für PWA-Funktionalitäten auf iOS ist es uns dank geschickter Benutzerführung gelungen, den Usern eine gleichwertige App-Erfahrung zu bieten.

Welchen technischen Herausforderungen wir beim Klassifizieren von Bildern mit TensorFlow begegnet sind, haben wir in diesem Blogeintrag ausführlich beschrieben.

Der Kreations-, Projekt- und Kampagnen-Lead in diesem Projekt lag bei der WIRZ Communication AG.

Technologien, die wir verwenden

Technologien, die wir verwenden