Animality
Umsetzung einer Website für eine globale Tierschutzinitiative
Über das Animality-Projekt und unsere Rolle
Das Animality-Projekt entstand aus der Leidenschaft der Centaurus Foundation für Tierschutz und dem Wunsch, einen Online-Raum zu schaffen, der Tierschutzzentren weltweit vernetzt. Ziel dieser gemeinnützigen Bildungsplattform ist es, Videomaterial bereitzustellen, das Tierschutzaktivitäten dokumentieren – grenzenlos und weltweit. Um diese Vision Wirklichkeit werden zu lassen, war jedoch der erste Schritt notwendig: die Erstellung einer Website, die die Projektziele präsentiert.
Mehr über die Plattform selbst finden Sie in unserer Fallstudie:
https://www.efresh.com.pl/de/portfolio/animality-3/
Phase 1: Bedarfs- und Funktionsanalyse
Aufgrund des prosozialen und pädagogischen Charakters des Projekts entwickelten wir die Designannahmen in Workshops. Wir untersuchten die Bedürfnisse in zwei Arten von Workshops: erstens durch die Zusammenarbeit mit Mitarbeitern der Centaurus Foundation, die sich seit über 18 Jahren um Tiere kümmern, und zweitens durch Gespräche mit Spendern aus dem über eine Million Spender umfassenden Kreis der Stiftung. Dadurch verstanden wir, was sie zum Handeln bewegt, welches Ziel sie erreichen wollen und warum sie ihre Zeit und ihr Geld investieren. Die Ergebnisse der intensiven Analysephase sind in der Regel Mindmaps, User Flow und die Entwicklung von Ideen für einzigartige Funktionalitäten.
Phase 2: Gestaltung von Lösungen entsprechend den Bedürfnissen einzelner Menschen
Die Idee, die in den Workshops entstand, war die Gestaltung einer Website, die Animalitys erste emotionale Bindung zu seinen Nutzern ermöglichen sollte. Wir fragten uns, wie wir das Projekt präsentieren, Aufmerksamkeit erregen und sicherstellen konnten, dass das Interesse nicht abebbt, bevor die Plattform online geht.
Persona A: Potenzielle Spender
Persona B: Tierschutzzentren und Content-Ersteller
Persona C: Stakeholder wie Medien, potenzielle Sponsoren, PR-Agenturen
Nachdem wir die Bedürfnisse der einzelnen Personas Schritt für Schritt analysiert hatten, begannen wir mit der Planung der Content-Themen.
Phase 3: Von der Skizze zur Struktur – Low-Fidelity Modelle und Homepage-Design
Die zuvor gewonnenen Erkenntnisse haben wir in erste Skizzen umgesetzt – es entstanden Low-Fidelity-Mockups, die es uns ermöglichten, die Seitenstruktur und die Inhaltslogik schnell zu testen. Wir konzentrierten uns vor allem auf die Startseite, da sie den Nutzer als Erstes in die Welt von Animality einführen sollte. Keine unnötigen Verzierungen – nur schwarz-weiße Raster, die das Wesentliche zeigten.
Klickbarer Prototyp High-Fidelity Desktop
Nach der Freigabe der Startseite (Desktop und Mobilgerät) erstellten wir Designs für 22 individuelle Unterseitenansichten und 13 weitere Ansichten. In dieser Phase nahm die Website allmählich ihren realen Look an – mit der Typografie, den Farben und dem Stil, die wir von Anfang an im Auge hatten, sowie funktionalen Annahmen.
Dank anklickbarer Ansichten konnten wir sehen, wie Nutzer auf der Website navigieren, was ihre Aufmerksamkeit erregt und wo sie sich verirren könnten. Der Prototyp dient uns als Test- und Dokumentationstool – er bildet die Grundlage für die Implementierung.
Funktionen der Website vor dem Start der Plattform:
- Ein umfangreicher Blog als Vorgeschmack auf die Inhalte, die nach dem Start der Plattform veröffentlicht werden.
- Ein Webinar-Management-Modul für eine bessere Kontaktaufnahme mit Teilnehmern, die Organisation von Webinaren und den Aufbau von Teilnehmerdatenbanken.
- Ein Newsletter, der gemäß DSGVO-Anforderungen in die Einwilligungsdatenbank integriert ist.
- Ein Karrieremodul, das Zentren weltweit und Content-Ersteller zur Zusammenarbeit mit Animality ermutigt.
- Die „Ideenbox“ ist ein Bereich, in dem jeder ehrenamtliche Nutzer einen Beitrag leisten kann, indem er eine interessante Lösung für Tiere initiiert.
Desktop-Modelle
Wir haben das Layout der Website zur Präsentation des Animality-Projekts entworfen. Unsere Aufgabe bestand nicht nur darin, die visuelle Gestaltung der Website zu übernehmen, sondern auch die für die Projektstartphase notwendigen und späteren Entwicklungsfunktionen vorzuschlagen. Wir waren auch für die Implementierung der Website verantwortlich, die von unserem eFresh-Entwicklungsteam durchgeführt wurde.
Klickbarer Prototyp High-Fidelity Mobil
Die mobile Version war im gesamten Projekt extrem wichtig, da Animality auch Menschen erreichen soll, die nicht unbedingt am Schreibtisch sitzen. Wir wollten, dass die Seite optisch Spaß macht, ihnen eine Pause verschafft und ihnen eine bessere Welt bietet. Und funktional sollte sie der Einfachheit mobiler Anwendungen nahekommen.
Unseres Verständnisses nach geht es bei einem Prototyp für Mobilgeräte nicht nur um Skalierung – das ist eine ganz eigene Geschichte. Wir setzten andere Prioritäten als für den Desktop, und die Interaktionen verliefen anders. Wir wollten, dass die Website leicht, schnell und intuitiv ist – auch unterwegs, zwischen Meetings oder auf dem Weg zum Tierheim.
Mit dem klickbaren Prototyp konnten wir überprüfen, wie Nutzer den mobilen Ablauf wahrnehmen. Wo klicken sie? Was überspringen sie? Und was löst den „Okay, das funktioniert“-Effekt aus? Ob es gut funktioniert, müssen Sie selbst beurteilen.
mobile Modelle
Im Zeitalter der Dominanz von Smartphones und Tablets war es uns wichtig, Nutzern jederzeit einen komfortablen Zugriff auf die Plattform zu ermöglichen.
Bei der Entwicklung von Animality lag ein Schlüsselelement auf der Entwicklung einer intuitiven und ansprechenden Benutzeroberfläche, die an mobile Geräte angepasst ist. Dadurch garantiert Animality eine reibungslose und benutzerfreundliche Nutzung der Plattform auf jedem Gerät.
Desktop und mobile Implementierung
Aufgrund der spezifischen Art der Implementierung (die Website war nur Teil des „Animality-Ökosystems“) dauerte der Entwicklungsprozess etwa vier Monate. Die Website war die Visitenkarte der Plattform und sollte bis zum Login Teil dieser bleiben.
Die Implementierungsarbeiten wurden in Sprints (jeder Sprint umfasste fünf Werktage) aufgeteilt. Diese umfassten: vier Werktage für Entwickler, zwei bis vier Stunden für Qualitätssicherungstests durch den Tester, zwei bis vier Stunden für Korrekturen und vier Stunden für Tests auf Kundenseite. Aufgrund des relativ geringen Arbeitsumfangs planten wir in jedem Sprint eine kurze Zeitspanne für Korrekturen ein. Bei schnellerer Fertigstellung starteten wir einen weiteren Sprint.
Fortschrittsmanagement und -kontrolle:
- Im Monday.com-System führten wir ein Board für den Kunden und das Team ein, über das wir den Projektfortschritt kontrollierten.
- Der Kunde prüfte einen Sprint und kommentierte ihn.
- Der Abschluss eines Sprints, das Abnahmeprotokoll und die Arbeitsabrechnung erfolgten vollständig remote.
- Nach Abschluss der gesamten Implementierung dauerte es etwa 4–5 Tage, bis die sogenannte BETA-Version, d. h. bereit zur Erweiterung mit Inhalten, verfügbar war.
Zusätzliche Dokumentation
Hinter jeder gut gestalteten Benutzeroberfläche verbirgt sich etwas weniger Spektakuläres, aber Entscheidendes: die Implementierungsdokumentation. In unserer Arbeit umfasst sie in der Regel:
Inhaltsspezifikation – d. h. eine Beschreibung der technischen Richtlinien für den Aufbau von Textcontainern (Zeichenanzahl, Verhalten, z. B. Ausklappen/Einklappen) für den Entwickler sowie die Definition der Foto- und Videogröße (Abmessungen, Auflösung, maximale Dateigröße).
Bearbeitbarkeits-/Nichtbearbeitungsspezifikation – eine Beschreibung sowohl für Entwickler als auch für den Kunden, die festlegt, welche Felder über das Administrator-Panel (direkt durch einen Mitarbeiter des Kunden) bearbeitet und bearbeitet werden können und welche die Unterstützung potenzieller Entwickler erfordern.
Integrationsspezifikation – Beschreibung der Integration mit externen Systemen – im Fall von Animality mussten wir die Regeln für die Integration mit internationalen Zahlungssystemen (einschließlich PayPal, PayU) beschreiben.
Designsystem – Das UX_UI-Team erstellte ein Designsystem für die Plattform und die Anwendung. Um die Konsistenz auf der Website zu gewährleisten, verwendeten wir dieselben Regeln für die Verwendung von Schaltflächen, den Aufbau von Abschnitten und Grafiken.
Vorbereitung der Veröffentlichung
der Website
Der Prozess der Veröffentlichungsvorbereitung ist bei jeder Implementierung nahezu identisch. Unser Ziel ist es, die Qualität zu gewährleisten und Fehler bei der Live-Übertragung zu vermeiden.
- Die BETA-Version ist ein vorgefertigter Mechanismus für Administratoren und Redakteure auf Kundenseite und bietet volle Funktionalität. Der Kunde hat an dieser Version gearbeitet und die Inhalte ergänzt.
- Schulung und Support für den Administrator auf Kundenseite für die BETA-Version – wir bieten standardmäßig Schulungen an und unterstützen das Team des Kunden bei Problemen.
- Einführung von Inhalten in Sprachversionen – in diesem Fall in zwei Versionen.
- Manuelle Tests in der Testumgebung, einschließlich Formularen und Social-Media-Links.
- Optimierung der Seitenladegeschwindigkeit.
- SEO-Optimierung, Einführung von Remarketing-Datenbanken und Website-Messung.
Technischer Support
und Entwicklung
Wir bieten stets Support nach der Implementierung an. Dabei planen wir Entwicklungsaufgaben drei Monate im Voraus, führen Statusberichte und eine kontinuierliche Kommunikation auf Basis des Monday.com-Systems durch und treffen uns regelmäßig in Workshops, um die erstellte Website zu verbessern.
Was bieten wir im Rahmen des dauerhaften Supports?
- Wissenskontinuität im Team – trotz mehrfacher Teamwechsel während der langen Zusammenarbeit.
- Designsystem/Designlabor/klickbare Mockups – wir halten wichtige Grafikdesigns in einem änderungs- und entwicklungsbereiten Zustand.
- 1:1-Testumgebung und Code-Repository – wir pflegen eine Kopie des Systems in der Testumgebung und ein Code-Archiv.
- Aktuelle Wartungsupdates – wir kümmern uns um die Aktualisierung und den zuverlässigen Betrieb.
Im Implementierungspreis übertragen wir stets das volle Urheberrecht an den Designs und dem Code mit dem Recht, diese nach Belieben zu ändern.
Haben Sie eine Vision, die Sie umsetzen möchten?
Kontaktieren Sie uns, und wir helfen Ihnen, eine Marke aufzubauen, die den Markt erobert.