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

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=16-313&viewport=298%2C-87%2C0.06&t=Hz0KJqIluxdQ0wmJ-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=16%3A313

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=40-831&viewport=156%2C-73%2C0.06&t=Hz0KJqIluxdQ0wmJ-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=40%3A831&show-proto-sidebar=1

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=40-955&viewport=-84%2C-55%2C0.06&t=Hz0KJqIluxdQ0wmJ-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=40%3A955&show-proto-sidebar=1

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.

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=126-251&p=f&viewport=480%2C309%2C0.08&t=fdhJg0FFl51GRV9t-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=126%3A827&show-proto-sidebar=1

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=126-251&p=f&viewport=480%2C309%2C0.08&t=fdhJg0FFl51GRV9t-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=126%3A445&show-proto-sidebar=1

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=126-251&p=f&viewport=480%2C309%2C0.08&t=fdhJg0FFl51GRV9t-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=139%3A1949&show-proto-sidebar=1

--- Ausarbeitung Designvariante 3 ---

erste Überarbeitung

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=214-636&p=f&viewport=-146%2C191%2C0.07&t=rdYxiHND9qTiVZm5-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=214%3A641&show-proto-sidebar=1

11.06.2026

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=533-4959&p=f&viewport=-128%2C316%2C0.05&t=rdYxiHND9qTiVZm5-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=533%3A4964

18.06.2026

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=625-6676&p=f&viewport=-165%2C401%2C0.05&t=rdYxiHND9qTiVZm5-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=625%3A6680

21.06.2026

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=706-3207&p=f&viewport=44%2C273%2C0.04&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=706%3A3208&show-proto-sidebar=1

mobile

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=706-3207&p=f&viewport=44%2C273%2C0.04&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=706%3A5536&show-proto-sidebar=1

25.06.2026

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=861-13297&p=f&viewport=44%2C224%2C0.04&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=861%3A13298&show-proto-sidebar=1

mobile

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=861-13297&p=f&viewport=44%2C224%2C0.04&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=861%3A16183&show-proto-sidebar=1

finale Version figma

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=337-1210&p=f&viewport=-2170%2C-126%2C0.31&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=337%3A1215&show-proto-sidebar=1

mobile

https://www.figma.com/proto/3Vwhg9RyRYYIOs59UwBDiV/KD4_UX.ZooWebsite?node-id=337-1210&p=f&viewport=-2170%2C-126%2C0.31&t=rdYxiHND9qTiVZm5-0&scaling=contain&content-scaling=fixed&starting-point-node-id=640%3A2022&show-proto-sidebar=1

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