Animality
Beratung und Website-Design
Ü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 die Bereitstellung von Videomaterial, 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 in unserer Fallstudie: Animality_Videostreaming-Plattform und mobile Anwendung.
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 Personas
Die Idee, die während der Workshops entstand, war die Gestaltung einer Website, die Animality die ersten emotionalen Bindungen zu seinen Nutzern ermöglichen sollte. Wir fragten uns, wie wir das Projekt präsentieren, wie wir Aufmerksamkeit erregen und sicherstellen können, 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, potenzielle …
Nachdem wir die Bedürfnisse jeder Persona Schritt für Schritt analysiert hatten, begannen wir mit der Planung der Content-Themen.
Phase 3: Von der Skizze zur Struktur – Low-Fidelity-Mockups 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 begann die Website so auszusehen, wie sie in der Realität aussehen sollte – mit der Typografie, den Farben und dem Stil, die wir von Anfang an im Auge hatten, sowie den funktionalen Annahmen.
Dank der anklickbaren 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.
Funktionalitäten auf der Website vor dem Plattformstart:
- Ein umfangreicher Blog bietet einen „Vorgeschmack“ auf die Inhalte, die nach dem Start der Plattform veröffentlicht werden.
- Webinar-Management-Modul, das einen besseren Kontakt mit Teilnehmern, die Organisation von Webinaren und den Aufbau von Teilnehmerdatenbanken ermöglicht.
- Newsletter mit Integration in die Consent Management Datenbank gemäß DSGVO-Anforderungen
- Ein Karrieremodul, das globale Zentren und Content-Ersteller zur Zusammenarbeit mit Animality ermutigt
- „Ideenbox“ ist ein Raum, in dem jeder freiwillige Benutzer 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.
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. Beschreibung der technischen Richtlinien für den Aufbau von Textcontainern (Anzahl der Zeichen, Verhalten, z. B. Ausklappen/Einklappen), Definition der Größe von Fotos und Videos (Abmessungen, Auflösung, maximale Dateigröße).
Editierbar-Nicht-Editierbar-Spezifikation – Beschreibung sowohl für Entwickler als auch für den Kunden, die angibt, welche Felder über das Administrationspanel (direkt durch den Mitarbeiter des Kunden) editierbar und ausführbar sind und welche die Unterstützung eines potenziellen Entwicklers 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 entwickelte ein Designsystem für die Plattform und die Anwendung. Um die Konsistenz auf der Website zu gewährleisten, verwendeten wir einheitliche Regeln für die Verwendung von Schaltflächen, Gebäudeabschnitten und Grafiken.
HABEN SIE EINE VISION, DIE SIE VERWIRKLICHEN MÖCHTEN?
Kontaktieren Sie uns und wir helfen Ihnen beim Aufbau einer Marke, die den Markt erobern wird.