Finaler Titel

Tierpark Röhrensee App

Repräsentatives Bild des Projekts als Header

1. Kurzbeschreibung

Bei meinem Projekt handelt es sich um eine mobile Anwendung für den Tierpark Röhrensee in Bayreuth, die als Wegweiser durch den Park dienen, informativ sein und alle Attraktionen des Parks präsentieren soll. Die Anwendung enthält eine in MapBox erstellte und mit allen wichtigen Dingen markierte digitale Karte, dann eine Übersicht aller Stationen und detaillierte Seiten zu Tieren, Attraktionen und Anreisemöglichkeiten. Für jedes Tier gibt es eine AR-Animation mit Ton und natürlichem Lebensraum, erstellt in Artivive, die beim Scannen des von mir erstellten Schilders funktioniert. Damit wollte ich eine Interaktion verbinden, die für Nutzer interessant sein kann, alle wichtigen Dinge an einem Ort sammeln und ihren Rundgang durch den Park so schön und einfach wie möglich gestalten. Mein Ziel war es, eine neue Ästhetik für den Park zu schaffen. Meine Motivation entstand aus meiner Liebe zu diesem Ort, denn ich verbringe dort oft Tage und es gibt viel zu tun, von Tierbeobachtungen, Essen, Picknicken bis hin zu Spielplätzen.

2. Filmische Dokumentation des Projekts

3. Bilder der Umsetzung / Anwendung / Ausstellung

4. Pitch Deck

5. User Journey / Userflow

6. Links zu Quellcode und Prototypen

Figma File:

 https://www.figma.com/design/BWCLKWRuMb6MgbuM0CsSsZ/App-Tierpark?node-id=0-1&t=1hGV2o1yCE65nmZR-1

Figma Prototype: https://www.figma.com/proto/BWCLKWRuMb6MgbuM0CsSsZ/App-Tierpark?page-id=0%3A1&node-id=253-522&viewport=85%2C-2042%2C0.36&t=9W9WbA6VH4JzvBD5-1&scaling=scale-down&content-scaling=fixed

Artivive:

1. Schild: https://bridge.artivive.com/editor/6679849de6cb7362763d2c9f

2. Schild: https://bridge.artivive.com/editor/66799163e6cb7362763d5062

3. Schild: https://bridge.artivive.com/editor/668430b5f9a508bacfcfd20b

MapBox:

https://api.mapbox.com/styles/v1/ajovanovic/clvv92uq0025201ocdyzqhroz.html?title=view&access_token=pk.eyJ1IjoiYWpvdmFub3ZpYyIsImEiOiJjbHZ2NXJjcmUxbWJzMnFud2szdG5ncmdpIn0.Rj_HQo8b5niE_ko603XpIg&zoomwheel=true&fresh=true#15.19/49.930535/11.573175/18.4/2

7. Designprozess:

Ideenfindung

Recherche

Was kommt alles in der App:

Recherche über Tieren:

Moodboards

Fotos:

App und Schilder:

Mappe und Aero / Artivive:

Umsetzung

Bei Umsetzung hatte ich mehrere Ideen, wie eine Website zu machen oder eine Projektion an den Wänden und ähnliches. Am Ende habe ich mich für eine mobile App und Schilder entschieden, die denen im Park ähneln, aber AR-Animationen von Tieren mit Hilfe von Adobe Aero oder Artivive zeigen. Auf diese Weise können Benutzer sie auch unterwegs jederzeit verwenden, was für den Park am sinnvollsten ist.

App

Typo, Farben:

Ich habe mich auf die Farben des Parks konzentriert, weil sie auch die Farben von Bayreuth repräsentieren, aber da Blau und Grün jedoch nicht zu allem passen, weil sie beide sehr kräftig sind, habe ich ein helles Blau hinzugefügt, um sie auszugleichen. Für Typeface habe ich Poppins gewählt, weil es serifenlos, passend und leicht zu lesen ist.

Wireframes:

MapBox:

Die Karte ist interaktiv und alle Stationen sind sichtbar.

Link für Preview: 

https://api.mapbox.com/styles/v1/ajovanovic/clvv92uq0025201ocdyzqhroz.html?title=view&access_token=pk.eyJ1IjoiYWpvdmFub3ZpYyIsImEiOiJjbHZ2NXJjcmUxbWJzMnFud2szdG5ncmdpIn0.Rj_HQo8b5niE_ko603XpIg&zoomwheel=true&fresh=true#15.19/49.930535/11.573175/18.4/2

Fertiges Design und Prototyp:

Ich habe alle drei Farben verwendet, wobei das Hellblau am meisten im Fokus steht, was eine beruhigende Wirkung hat und den Inhalt in den Vordergrund stellt. Es gibt einen Startbildschirm, eine digitale Karte des Parks, eine Übersicht aller Stationen und jeweils eine Detailseite, alle Attraktionen des Parks mit Telefonnummer und Öffnungszeiten sowie Ankunft. Ich wollte die Collage Ästhetik ausprobieren, deswegen habe ich die weißen Ränder implementiert, die auch in AR Animationen sind. Mir war es wichtig, dass zu den Attraktionen alle notwendigen Informationen vorhanden sind, wie zum Beispiel die Entfernung der Restaurants vom Park, die Möglichkeit, die Nummer direkt aus der App heraus anzurufen und bis wann alles geöffnet ist.

Screencast:

Artivive

Für Artivive war es mir wichtig, Animationen einzuführen, die den natürlichen Lebensraum der Tiere darstellen, da dieser nirgendwo im Park visuell dargestellt wird und es manchmal schwierig ist, sich bestimmte Regionen, Wasserarten und Böden vorzustellen. Ich wollte die Collage Look ausprobieren. Ich wollte der Animation auch „Leben“ verleihen, indem ich eine Audiokomponente, Tiergeräusche und sich bewegende Elemente wie Wolken, Pflanzen oder Vögel im Hintergrund hinzufügte. Ich habe mit Ebenen gearbeitet. Wenn sich also der Betrachtungswinkel änderte, konnten die Leute alle Ebenen sehen, und das sorgt für eine interessante Komponente. Für die Tieranimation wollte ich, dass sie aus bewegten Bildern besteht und eine weiße Outline hinzufügt, die auch in der App enthalten ist und eine neue Ästhetik verleiht und das Tier etwas besser vom Hintergrund abhebt.

Schilder

Schilder funktionieren, indem sie mit der Artivive-App gescannt werden und automatisch Animationen des auf dem Schild gezeigten Tieres starten. Das Schild enthält Informationen über das Tier, einige davon nicht in der App und andere etwas allgemeiner. Wie bei Schilder im Park habe ich ein ähnliches Layout angelegt und oben rechts steht der Kontinent, von dem das Tier stammt.