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.
Angewandte Skills:
  • Ganzheitliche Planung
  • UX Design (Wireframing in Adobe XD)
  • UI Design (Asset-Generierung in Adobe Illustrator)
  • 3D Modellierung (Blender)
  • 2D Animation (AfterEffects)
  • Schnittstellenkompetenz bei der Integration in Unity

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
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



Programmiert wurde die App mit Unity

Für iOS und Android

GPS Abfrage

Kinect für Motion Tracking

ARKit/ARCore zum Einbinden des Augmented Reality Contents








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.