01 Analyse bestehende Website
Als erstes haben wir die bestehende Zoo-Website https://www.zoo-hof.de/ analysiert und Probleme herausgefiltert.
02 Personas, Zielgruppen, Archetypen
Außerdem haben wir uns Gedanken zu Zielgruppen, Personas und Archetypen gemacht, um die Ansprüche an die neue Website besser zu verstehen.
03 User Journeys
Wir erstellten zwei User Journeys. Die erste ist sehr allgemein gehalten und geht auf die Bedürfnisse verschiedener Zielgruppen und Archetypen ein. Sie behandelt einen Zoo-Besuch mit mehreren Aktionen und dessen Vor- und Nachbereitung.
Den Ausflug einer Schulklasse beschrieben wir in einer separaten User Journey, da hier andere Anforderungen gestellt werden - wie bspw. ein Buchungssystem und die Bereitstellung von Lernmaterial.
Beide User Journeys haben wir an den Zooleiter zur Korrektur geschickt.
04 Überarbeitung
Die Personas haben wir noch einmal ausführlicher beschrieben und in Haupt (Leon, Kathi & Oliver, Günther)- und weitere (Fred, Karolina) Personas unterteilt.
05 Sitemap
Wir erstellten aufbauend auf unsere bisherigen Erkenntnisse und mithilfe einer Zoo-Mitarbeiterin eine Sitemap der neuen Website, um eine möglichst sinnvolle Struktur sicherzustellen.
06 skizzenhafte Wireframes
Wir teilten uns auf und erstellten in Zweier-Teams Wireframes zu verschiedenen Nutzungsszenarien.
07 Moodboards
Mein erstes Moodboard legt den Fokus auf Tierfotos mit großer, aber eher schlichten Schrift.
Das zweite Moodboard arbeitet hauptsächlich mit Illustrationen, die aber nicht zu kindlich wirken sollen. Auch Typo und Farben sind eher zurückhaltend und still.
Beim dritten Moodboard kommen knallige Farben, Illustrationen, Bilder, laute, aber freundliche Typografie und spielerische Animationen zusammen, um aus der Website ein aufregendes Erlebnis zu machen.
08 Angewandte Moodboards
09 Überarbeitete Designvarianten
Die zweite Variante blieb unverändert. Das erste Design überarbeitete ich nochmal grundlegend – um durch interessantere Module die Website mehr von anderen abzuheben. Die Wireframes zum dritten Moodboard veränderte ich nur ein weniger, um das Erscheinungsbild stimmiger wirken zu lassen.
--- Ausarbeitung Designvariante 3 ---
erste Überarbeitung
11.06.2026
18.06.2026
21.06.2026
mobile
25.06.2026
mobile
finale Version figma
mobile
--- Finale Umsetzung ---
Framer
https://zoohof.framer.website/
Ich habe die Website in Framer umgesetzt, es fehlen noch Details, wie ein funktionierendes Buchungssystem. Außerdem ist die Website nur teils responsiv.
Screencast
Präsentationsvideo
Print-Produkte
