Finaler Prototyp

Framer:

https://zoo-hof-2.framer.website/

Figma-Link:

https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?page-id=526%3A9894&node-id=526-10249&viewport=-1123%2C139%2C0.25&t=yKZIrS7NFJqr5zHV-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=526%3A10249

Mobiele Version:

https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?page-id=725%3A7307&node-id=1056-8196&viewport=234%2C217%2C0.15&t=TMy6nw9Vw8EEF0Ia-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1056%3A8196

Printprodukte

Plakate:

Die Plakate sind als Plakatserie konzipiert, die ausschließlich darauf abzielt, Aufmerksamkeit für den Zoo zu erregen und Interesse zu wecken. Sie würden sich demnach beispielsweise als Großflächenplakate in Hof und Umgebung eignen.

Flyer:

Die Flyer wurden in drei Sprachen – Deutsch, Englisch und Tschechisch – konzipiert.

Zootickets:

Die Tickets sind eher als Sammelkarten bzw. als Erinnerungsstücke für die Besucher gedacht. Zudem soll es viele verschiedene Tiermotive auf den Karten geben, sodass ein Sammelanreiz entsteht.

Tierschild:

Zudem habe ich neue Schilder für die Tiergehege erstellt. Diese behalten den alten Aufbau bei, nur das Design wurde an das der Website angepasst.

Präsentationsvideo

Screencast

Framer:

Figma - Desktop:

Figma - Mobile:

Styleguide

_________________________________________

PROZESS

1. Probleme & Lösungsansätze

Als Erstes haben wir alle Probleme des Zoos gemeinsam im Kurs gesammelt. Anschließend haben wir erste Lösungsansätze entwickelt und uns einer Projektidee zugeordnet. Ich habe mich gemeinsam mit fünf Kommilitoninnen um die Website gekümmert. Unser Ziel ist es demnach, diese zu erneuern.

2. Website-Analyse

Website Zoo Hof:
https://www.zoo-hof.de/

Zunächst analysierten wir die aktuelle Website hinsichtlich ihrer Schwächen und Probleme.

3. Zielgruppenanalyse, Archetypen, Personas

Wir haben den Zoo Hof dann mithilfe gängiger UX-Methoden in einer Gruppe bestehend aus sechs Studentinnen analysiert.

In der Gruppe waren wir uns bei den Archetypen etwas uneinig, welcher Archetyp welche Zielgruppe am besten repräsentiert und welche Archetypen insgesamt zutreffen.

Zwei Gruppenmitglieder haben die Personas noch einmal ausführlicher ausgearbeitet und in Hauptpersonas und ergänzende Personas unterteilt. 

Hauptpersonas:

ergänzende Personas:

4. User Journey

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.

5. Sitemap / Funktionsbeschreibung

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.

6. Erste Prototypen

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.

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=69-160&viewport=136%2C-53%2C0.13&t=PCw1X84q76bheRK5-1&scaling=min-zoom&content-scaling=fixed&page-id=1%3A2

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. 

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=154-324&viewport=177%2C203%2C0.07&t=NxDGWMn9QhT4R4gc-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=154%3A324&show-proto-sidebar=1&page-id=0%3A1

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.

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=62-217&viewport=222%2C143%2C0.1&t=VnwMdGGou8MS0HhK-1&scaling=min-zoom&content-scaling=fixed&page-id=1%3A3

7. Moodboards

Ich habe dann 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.

8. Module

Bevor ich 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 verwendete als all die vorherigen Beispiele.
https://zoo-128.webflow.io/

9. Designvarianten

Ich habe dann alle drei Moodboards anhand der Startseite umgesetzt.

Danach habe ich alle Designvarianten noch einmal überarbeitet. Dabei habe ich den Typo- und den Glas-Effekt getrennt, sodass ich jetzt vier Varianten hatte.

Cleanes Design:
https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?node-id=202-2482&viewport=1021%2C359%2C0.05&t=y7N1ooMLQk47XUBv-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=202%3A2482&page-id=12%3A117 

Linienstil:
https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?node-id=13-220&viewport=300%2C263%2C0.05&t=1x3spJsTK8GdrBY7-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=13%3A220&show-proto-sidebar=1&page-id=12%3A117

Typographie-Effekt:
https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?node-id=202-1688&viewport=300%2C263%2C0.05&t=1x3spJsTK8GdrBY7-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=202%3A1688&show-proto-sidebar=1&page-id=12%3A117 

Glas-Effekt:
https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?node-id=13-287&viewport=300%2C263%2C0.05&t=1x3spJsTK8GdrBY7-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=13%3A287&show-proto-sidebar=1&page-id=12%3A117

10. Prototype

Schlussendlich habe ich mich für den typografischen Stil entschieden. Ich habe die Startseite noch einmal überarbeitet und mit der Erstellung erster Unterseiten begonnen.

https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?node-id=526-10249&viewport=38%2C252%2C0.02&t=9MnmVaDSQVCtPOok-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=526%3A10249&page-id=526%3A9894

Stand 21.05

Ich habe damit begonnen, die Startseite zu überarbeiten. Anschließend habe ich die Unterseite für den Luchs, die Übersichtsseite für die Tiere sowie die Unterseite Besuch planen erstellt.

Stand 28.05

In dieser Woche habe ich die Unterseiten für das Zoo-Café und die Jobs erstellt.

Stand 11.06

Ich habe verschiedene Printprodukte erstellt. Bei den Tickets habe ich schnell gemerkt, dass die erste Version nicht funktioniert. In der zweiten Version fehlte die Typografie auf den Fotos, die ich später ergänzt habe. Allerdings habe ich die Printprodukte zunächst in Figma erstellt, da ich dort schneller bin, um einen ersten Entwurf zu erstellen. Später übertrage ich das fertige Design dann in InDesign.

Außerdem habe ich einige kleinere Verbesserungen auf der Website vorgenommen. So habe ich beispielsweise Abstände korrigiert und einige Bilder überarbeitet.

Stand 18.06

In dieser Woche habe ich die Website fertiggestellt. Ich habe alle Texte eingefügt, die Stockfotos entfernt und alle fehlenden Unterseiten erstellt. Darüber hinaus habe ich die Printprodukte überarbeitet und mit der mobilen Version begonnen.

folgende Wochen

In den folgenden Wochen bis zur Werkschau habe ich vor allem die Printprodukte in InDesign übertragen und überarbeitet. So habe ich beispielsweise die Inhalte des Flyers ausgetauscht und an den aktuellen Zooflyer angepasst.

Zudem habe ich neue Bilder für die Plakate erstellt und die Bilder auf der Website überarbeitet. Während ich die Bilder überarbeitet habe, ist mir aufgefallen, dass einige besser für den Stil geeignet sind als andere. Außerdem ist mir aufgefallen, dass sich vom Tierkörper abstehende bzw. große Ohren, Hörner oder Pfoten sehr gut für den Stil eignen.

Anschließend habe ich die mobile Version fertiggestellt und dann damit begonnen, die Website in Framer umzusetzen.

https://www.figma.com/proto/owX77nl5szxs9rhHa0GZgN/UX--Zoo-Website?page-id=725%3A7307&node-id=1056-8196&viewport=234%2C217%2C0.15&t=QmH11yUPrBVS4001-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1056%3A8196

11. Framer

Ich habe außerdem damit begonnen, die Website in Framer umzusetzen.

https://zoo-hof-2.framer.website/ 

Die Website weist den gleichen Stand auf wie der Figma-Prototyp. Der einzige Unterschied ist, dass die Suchleiste bei der Tierliste vollständig funktioniert und dass bei „Besuch planen” eine Google-Maps-Karte eingefügt ist. Leider ist die Website nicht responsiv, aber der Breakpoint für mobile Geräte ist hinterlegt, sodass man sie sich auf dem Handy anschauen kann.

_________________________________________

Zwischenpräsentation

Abschlusspräsentation