In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Website Zoo Hof
Bei diesem Projekt haben wir mit dem Zoologischen Garten in Hof zusammengearbeitet. Ein Schwerpunkt war unter anderem, die Website neu zu gestalten, womit ich mich beschäftigt habe.
Website Zoo Hof:
https://www.zoo-hof.de/
©Laura Beier
Bei den Archetypen waren wir uns in der Gruppe etwas uneinig, welcher Archetyp am besten welche Zielgruppe repräsentiert und welche Archetypen insgesamt zutreffen.
©Laura Beier
Zwei Gruppenmitglieder haben die Personas noch einmal ausführlicher ausgearbeitet und in Hauptpersonas und ergänzende Personas unterteilt.
Hauptpersonas:
©Laura Beier
weitere Personas:
©Laura Beier
Zunächst haben wir in der Gruppe eine allgemeine User Journey erstellt, die den Ablauf eines typischen Zoobesuchs darstellt. Anschließend haben wir noch drei kleinere User Journeys für jeweils eine bestimmte Persona/Zielgruppe erstellt. Diese überschneiden sich jedoch alle etwas.
Anschließend haben wir vor allem mit der allgemeinen User Journey und der User Journey für Schulklassen weitergearbeitet.
©Laura Beier
Wir haben die User Journey dann an den Zoo Hof geschickt, der sie überprüft und kommentiert hat. Mit der überarbeiteten Version haben wir anschließend weitergearbeitet.
Auf Grundlage unserer bisherigen Erkenntnisse habe ich gemeinsam mit einer Kommilitonin eine Sitemap erstellt, die mehrfach überarbeitet wurde. Die finale Version haben wir vom Auftraggeber absegnen lassen. Nun haben wir einen Aufbau, an den wir uns orientieren können.
©Laura Beier
Im nächsten Schritt haben wir in Zweiergruppen erste klickbare Wireframes für eine bestimmte Zielgruppe erstellt. Dabei haben wir uns an einem möglichen Nutzungsszenario für die jeweilige Zielgruppe orientiert.
Meine Kommilitonin und ich hatten die Zielgruppe Senioren.
Senioren:
Günthers Enkel möchte in den Zoo. Um sich über die Öffnungszeiten, die Anreise und den Zoo allgemein zu informieren, googelt er diesen und landet auf der Website des Zoos.
Er fand den Zoobesuch so interessant, dass er zu Hause erneut die Website öffnet, um sich weitere Informationen durchzulesen. Da sein Enkel von den Weißhandgibbons so begeistert war, liest er sich als Erstes die Informationen zu ihnen durch. Danach schaut er, was es Neues gibt, und stößt dabei auf einen Beitrag zur Tierpatenschaft. Er informiert sich über eine Patenschaft für die Weißhandgibbons, mit dem Hintergedanken, diese seinem Enkel zu schenken.
©Laura Beier
Schulklassen:
Sebastian möchte mit seiner Klasse am nächsten Dienstag eine Führung im Hofer Zoo machen. Dafür öffnet er die Website und sucht dort nach einer passenden Führung und bucht diese.
Nach dem erfolgreichen Tag im Zoo möchte er sich dann noch passendes Unterrichtsmaterial herunterladen, um die Zooführung mit den Kindern nachzubereiten.
Jedermann:
Kathi und Oliver entscheiden sich für einen Zoobesuch am nächsten Wochenende. Um sich schonmal generell zu informieren, rufen sie die Zoo-Website auf. Auf der Startseite suchen sie nach Öffnungszeiten und Ticketpreisen. Danach werfen sie einen kurzen Blick auf die Karte des Zoos, um einen Überblick zu bekommen. Am Tag des Besuches wird die Website erneut aufgerufen, um zum Zoo zu navigieren. Nach dem Zoobesuch suchen sie auf der Website noch nach Infos zu den Weißhandgibbons.
©Laura Beier
Ich habe drei verschiedene Moodboards erstellt.
Eines ist im cleanen Stil gestaltet und arbeitet mit vielen und großflächigen Bildern, viel Weißraum, einzelnen Farbflächen in einer Akzentfarbe und einem rasterorientierten Aufbau. Um Spannung zu erzeugen, sollen einige Elemente bewusst außerhalb des Rasters gesetzt werden.
Ein anderes besteht aus einer Kombination von Bildern und Zeichnungen. Dabei werden entweder dünne Linien auf die Bilder gezeichnet oder ein Bild wird dem gleichen Bild im Zeichenstil gegenübergestellt.
Letzteres ist im experimentellen Typografie-/3D-/Glas-Stil gestaltet. Es arbeitet mit freigestellten Tierbildern und Pflanzenelementen, spielt mit Typografie und nutzt verschiedene Ebenen, um eine 3D-Wirkung zu erzeugen. Das heißt, dass die Bilder in mehrere Ebenen zerlegt werden, zwischen denen beispielsweise Typografie gesetzt wird. Außerdem wird ein Seitenhintergrund verwendet.
©Laura Beier
Bevor is mit den Designvarianten begonnen habe, habe ich mir verschiedenste Zoowebsiten angeschaut und dort Module markiert, die ich interessant fand.
Nachträglich habe ich dann noch eine weitere Website gefunden, die andere interessante Module verwendet hat.
https://zoo-128.webflow.io/
©Laura Beier
Ich habe dann alle drei Moodboards anhand der Startseite umgesetzt.
©Laura Beier
Ich habe alle Designvarianten noch einmal überarbeitet. Dabei habe ich den Typo- und den Glas-Effekt getrennt, sodass ich jetzt vier Varianten habe.
©Laura Beier
Schlussendlich habe ich mich für den typografischen Stil entschieden. Ich habe die Startseite noch einmal überarbeitet und mit der Erstellung erster Unterseiten begonnen.
Stand 21.05
Ich habe die Startseite überarbeitet und anschließend die Unterseite für den Luchs, die Übersichtsseite für die Tiere und die Unterseite Besuch planen erstellt.
©Laura Beier
Stand 28.05
Ich die Unterseite Zoo Cafe und Jobs erstellt
©Laura Beier
Stand 11.06
Ich habe verschiedene Printprodukte erstellt. Bei den Tickets habe ich schnell gemerkt, dass die erste Version nicht funktioniert. Bei der zweiten Version fehlt die Typo auf den Fotos.
Ich habe außerdem einige kleine Verbesserungen auf den Unterseiten vorgenommen.
©Laura Beier
Stand 18.06
Ich habe die Website fertiggestellt. Ich habe alle Texte eingefügt, die Stockfotos entfernt und alle fehlenden Unterseiten erstellt. Außerdem habe ich die Printprodukte überarbeitet und mit der mobilen Version begonnen.
©Laura Beier
Screencast:
©Laura Beier
Präsentationsvideo:
Figma-Link:
x
Plakate
©Laura Beier
Flyer
©Laura Beier
Tierschild
©Laura Beier
Tickets
©Laura Beier
Ein Projekt von
Laura Beier
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
UX- und Storytelling (KD4)Entstehungszeitraum
Sommersemester 2026