Die Zoo Website
Ein gemeinsames Fundament
Als einer der bekanntesten Zoos Deutschlands empfängt der Erlebnis Zoo Hannover jedes Jahr Hunderttausende Besucherinnen und Besucher, betreibt eine eigene App und bespielt eine ganze Reihe digitaler Kanäle. Dafür braucht man eine Website, die all das trägt.
Die Website kam zu uns, weil sie es musste, und das meinen wir nicht negativ. Die bisherige Agentur wollte das Projekt abgeben, was vermutlich auch damit zusammenhing, dass der darunter liegende Tech-Stack schlicht in die Jahre gekommen war. Magnolia, das bis dahin eingesetzte CMS, galt intern als langsam, teuer und unbeliebt. Updates waren nur noch schwer möglich und das Kosten-Nutzen-Verhältnis hat nicht mehr gepasst. All das führte zur Entscheidung neu anzufangen.
Naheliegenderweise ist der Zoo damit zu uns gekommen. Wir entwickeln bereits die Zoo-App und kennen das Ökosystem des Zoos gut. Was zunächst wie ein reiner Website-Relaunch aussah, wurde zu etwas, was einen deutlichen Mehrwert bringt: der Aufbau einer gemeinsamen digitalen Basis für beide Projekte, die wir für den Zoo umsetzen. Website und App und teilen sich mit dem dahinter liegenden CMS heute eine einzige Informationsquelle. Inhalte werden einmal gepflegt und überall ausgespielt. Was früher doppelte Arbeit war, ist jetzt ein System.
Der Schlüssel dazu ist ein Headless CMS. Anders als klassische Systeme wie Magnolia oder WordPress trennt ein Headless CMS die Inhaltsverwaltung sauber von der Ausgabe. Wo und wie die Inhalte am Ende erscheinen, ob auf der Website, in der App oder einem anderen Kanal, entscheidet nicht das CMS, sondern das jeweilige Frontend. Für den Zoo Hannover haben wir uns für Payload entschieden, das gemeinsam mit Next.js als Frontend und GraphQL als Schnittstelle zwischen den Systemen das technische Fundament der neuen Website bildet.
Und das steckt drin
Flexibler Seiteneditor mit Block-System Der Zoo kann neue Seiten eigenständig aus einem vordefinierten Set an Inhaltsblöcken zusammenstellen, ohne Gefahr zu laufen, die eigene Corporate Identity zu brechen. Entwürfe lassen sich speichern, mit einer Vorschau prüfen und jederzeit auf eine der letzten gespeicherten Versionen zurücksetzen. Hierfür ist kein Entwicklungsaufwand mehr nötig, kein Ticket, kein Warten.
Interaktive POI-Karte POIs lassen sich direkt im CMS per Drag-and-drop auf der Karte verschieben und neue Punkte in Sekunden anlegen. Öffnungszeiten, Audioinhalte, Speisekarten, Echtzeit-Statusmeldungen und tagesaktuell schaltbare Hinweise sind direkt am POI hinterlegt und werden automatisch in der App ausgespielt. Jeder POI hat außerdem eine eigene URL, aus der sich ein QR-Code für physische Schilder im Zoo generieren lässt.
Tierlexikon und Eventkalender Der Zoo pflegt alle Zootiere und ihre Inhalte eigenständig im CMS, wo sie sowohl im Tierlexikon der Website als auch direkt in der App erscheinen. Gleiches gilt für den Eventkalender: Veranstaltungen werden einmal angelegt und sind sofort auf beiden Kanälen sichtbar. Der Zoo-Blog mit Lerninhalten rund um Tiere und Artenschutz funktioniert nach demselben Prinzip.
Rallyes und Führungen Interaktive Touren durch den Zoo werden vollständig im CMS erstellt und in der App ausgespielt. Bei Rallyes suchen Besucher Stationen anhand von Hinweisen, inklusive Quizfragen und einer Urkunde am Ende. Führungen zeigen alle Stationen auf einen Blick und lassen die Besucher frei wählen, wo sie als nächstes hingehen. Auch neue Touren kann der Zoo jederzeit eigenständig anlegen, ohne dass wir den Code anfassen müssen.
Push-Benachrichtigungen Der Zoo kann gezielte Push-Nachrichten direkt aus dem CMS an App-Nutzer schicken, auch standortbasiert innerhalb des Zoogeländes. So lassen sich Besucher in Echtzeit informieren, auf aktuelle Angebote hinweisen oder ganz gezielt in bestimmte Bereiche des Zoos lenken.
Die Umsetzung
Payload als Headless CMS bildet nun die zentrale Schnittstelle. Der Zoo pflegt seine Inhalte einmal, und diese erscheinen sowohl auf der Website als auch in der App. Next.js übernimmt hierbei das Frontend, GraphQL die Kommunikation zwischen den Systemen, Canto die Medienbereitstellung.
Den Relaunch haben wir als Big-Bang-Release umgesetzt. Alle Inhalte wurden im Voraus durch das Redaktionsteam des Zoos vorbereitet, bestehende Seiten wurden nachgebaut und wichtige URLs per Weiterleitung erhalten. Für die Besucher war der Übergang nahtlos.
Für den Zoo selbst ist die Umstellung eine spürbare Arbeitserleichterung. Website und App-Inhalte laufen über ein einziges System, das das Team bereits kennt. Kein Wechsel zwischen Plattformen, kein doppeltes Einarbeiten. Die Mitarbeiter können eigenständig agieren, Inhalte schnell aktualisieren und tagesaktuell auf das reagieren, was im Zoo gerade passiert.
Die Herausforderung
Das Besondere an diesem Projekt: Website und App sollten künftig aus einer einzigen Quelle gespeist werden. Vorher hatte die App ihr eigenes handgebautes Backend, Points of Interest (Positionsmarker) für die Zookarte wurden manuell in einer JSON-Datei gepflegt, und jede Änderung am Wegenetz oder Tierbestand landete als Entwickleraufgabe auf unserem Tisch. Das war auf Dauer keine gute Lösung, weder für uns noch für den Zoo.
Hinzu kam, dass die neue Website optisch nahtlos an die bestehende anschließen sollte. Ein komplettes Redesign stand somit nicht auf der Agenda. Das bedeutete originalgetreues Nachbauen des bestehenden Layouts in einem komplett neuen Technologie-Stack, während die alte Seite noch live war.
App in den Zoo!
Profitieren Sie von unserer Erfahrung und digitalisieren Sie Ihren Zoo gemeinsam mit uns.