Augmented Reality Tourismus-App für die Stadt Aachen

Aachens Quellen gehören zu den heißesten und ergiebigsten Thermalwasservorkommen Mitteleuropas. Seit 2.000 Jahren nutzen die Aachener*innen das Thermalwasser. Die römischen Badeanlagen, Kurbäder und Trinkbrunnen prägten das Stadtbild und waren im Alltag der Menschen präsent.

Heute sind sie allerdings fast unsichtbar. Sie sind überbaut oder zugedeckt und machen sich nur durch penetranten Geruch oder Dampf, der im Winter aus Kanaldeckeln herauszieht, bemerkbar.

Die App Aachen72Grad macht diese prägende Besonderheit der Stadt Aachen wieder sichtbar und führt auf unterhaltsame Weise Touristen durch die Altstadt.

UX Design

Meine Aufgabe als UX Designer war es, mit den Kund*innen den Ablauf der App zu planen, Hauptfunktion von Nebenfunktionen trennen und die App sinnvoll zu strukturieren. 

Da bei AR Apps die User*innen mit der Umgebung interagieren sollen, nutze ich Zeichnungen oder Fotomontagen, um Interaktionen zu skizzieren, anstelle der üblichen Wireframes.

UI Design

Das UI Design leitet sich aus dem UX Design ab. Die Navigationsstruktur orientiert sich nach den iOS-typischen Mustern: Tab-Bar mit 5 Unterpunkten

Den Kund*innen gefielen bereits die Interface-Elemente, die ich für die Skizze verwendete. In Farbauswahl und einigen Details ging ich noch mehr auf die CI der Stadt Aachen ein.

Tab-Bar Entwurf

Tab-Bar finales Design

Es gibt 2 Arten von Icons:

2D-Icons für statische Bedienelemente

3D-Icons, wenn das Icon in die Umgebung eingebunden ist

Content Erstellung

Der 3D-Avatar Granni taucht an verschiedenen Stellen auf und erzählt den Tourist*innen Wissenswertes und Lustiges über die Quellen. Vorlage für Granni war eine Stabmarionette eines Aachener Puppenbauers und soll einen Quellgeist darstellen. Die Figur Granni wurde von meinem Kollegen in Blender modelliert und animiert. Ich habe die Texturen gemalt.

Der finale 3D-Avatar Granni

Ich habe zwei Animationsfilme für die App erstellt. Das Script kam von den Mitarbeiter*innen der Stadt Aachen. Ich habe Figuren gezeichnet und Hintergründe gemalt. Anschließend habe ich diese Elemente in Adobe AfterEffekts animiert. Die Animationsfilme wurden in 4 Sprachen synchronisiert.

Zusätzlich zu den Animationsfilmen gibt es auch Realfilme in der App. Die Stadt Aachen hat Filme mit Schauspieler*innen vor Green-Screen gedreht. Der Greenscreen wurde herausgerendert und ein „Hologramm-Rauschen“ über die Schauspieler*innen gelegt. Mittels ARKit wird die Szene mit transparentem Hintergrund in der Umgebung verankert.

Programmierung

Die App im Detail

Hauptfunktion

AR-unterstützte Schnitzeljagd


10 Stationen, an denen es Content zu entdecken gibt


Fester Start- und Zielpunkt

Anleitung zur Funktionsweise der AR-Navigation:

Nebenfunktion:
Temperaturkarte

Das Icon zeigt die Temperatur des Wassers direkt unter den Füßen des Users


Karte mit Temperaturverteilung


Quellen, die nicht mehr genutzt werden und Quellen, die heute noch genutzt werden

Nebenfunktion:
Übersichtskarte

Die Karte zeigt die Stationen und den Verlauf der Route.

Nebenfunktion:
Statusanzeige

User*innen sehen wie weit sie schon gekommen sind, anhand des Wasserstandes im Glas.


User*innen können den Content von Stationen, die sie schon besucht haben, noch einmal ansehen.

Nebenfunktion:
Einstellungen

Tutorial noch einmal ansehen


Sprache ändern


Weitere Einstellungen

Die App erhielt positive Kritiken und viel Aufmerksamkeit durch die Presse. Sie können sie im App Store und auf Google Play herunterladen.