Website Redesign: Die Initiative GemEinsamkeit stellt sich neu auf

Ausschnitt aus dem Design-Programm FIgma, das den Kopf der neuen Startseite der Initiatiive GemEinsamkeit zeigt

Herausforderung

Aktuell wird viel über Einsamkeit in Deutschland gesprochen. Die Strukturen in der Akteurslandschaft verändern sich ständig. Die Initiative GemEinsamkeit will sich als Bewegung für mehrere Zielgruppen positionieren: die neue Website soll Ehrenamtliche, Spender*innen und Betroffene mobilisieren.

Idee

Alle Website-Besucher*innen vereint eines: das Thema Einsamkeit ist ihnen wichtig. Sie benötigen nur einen Zugang, der ihren Bedürfnissen entspricht. Wenn jede Person genau die Information findet, die sie ermutigt, sich in ihrem Möglichkeitsbereich zu engagieren, erfüllen die Website und die Bewegung ihren Zweck. 

Lösung

Der Dreiklang Herz, Hand, Hirn aus der Pädagogik bietet verschiedene Herangehensweisen an die Einsamkeit. Je nach Rolle und Bedürfnis können Website-Besucher*innen sich dem Anliegen der Initiative mit Empathie, Tatendrang oder Wissensdurst annähern – und aktiv werden.

Kundin: Initiative GemEinsamkeit

UX/UI Design, Writing, Umsetzung

Die Initiative GemEinsamkeit ist eine Bewegung, die sich für die Bearbeitung von Einsamkeit in Deutschland einsetzt. Sie existiert schon seit 2020, hat sich 2023 aber als gemeinnützige UG offiziell gegründet und brauchte für die strategische Neuausrichtung einen neuen Auftritt.

Transparenzhinweis: Ich bin ehrenamtliches Mitglied der Initiative und supporte das Team regelmäßig mit Design- und Strategie-Arbeit. Für die Umsetzung der neuen Website wurde ich zusätzlich als Freelancerin gebucht.

Der Design Prozess

1. Personas, User Journeys & Scribbles

Weniger Kosten. Aber saubere Methoden.

Eine besonders relevante Restriktion bei gemeinnützigen Projekten ist Geld, also (auch) Arbeitszeit. Das sollte jedoch nicht bedeuten, dass das Konzept für die neue Seite nicht ordentlich aufgesetzt wird. Mir war wichtig, dass wir uns um eine klare Zielgruppendefinition bemühen, aus der sich Personas und mögliche User Journeys ableiten lassen.

Um beim Website Redesign Zeit zu sparen, gab es statt cleaner Wireframes nur Scribbles und statt aufgeräumter Miro-Boards ein paar schnelle Notizen. Wie ich trotzdem transparent arbeite? Die wichtigsten Scribbles sind in 1:1 Meetings entstanden – und gingen dann direkt ins Design, einsehbar für alle in Figma.

Scribbles for Website Redesign: Wireframe and Personas
Scribbles for Website Redesign: Persona and User Journey

Drei getrennte Seitenbereiche. Aber fließende Grenzen.

Beim Ausarbeiten der rollenbasierten Personas wurde schnell klar: die Aufteilung in Herz, Hand und Hirn ist zwar sinnvoll, aber auch artifiziell. Die Grenzen zwischen den Rollen sind fließend. Die getrennten Seitenbereiche sind daher lediglich als Angebot für den Einstieg entwickelt.

Niemand ist nur Betroffene*r, nur Akteur*in oder nur Spender*in. Die meisten Menschen, die sich engagieren oder bereit sind zu spenden, hatten selbst schon mit Einsamkeitsgefühlen zu tun. Viele Betroffene haben Lust, aktiv zu werden. Einsamkeit betrifft uns alle, und gleichzeitig ist es hochindividuell, wie wir uns ihr annähern und was wir aus ihr machen.

2. UI Design

Nachdem ich die Seitenstruktur definiert hatte, starteten wir mit dem Farbkonzept auf Basis der neu erarbeiteten Markenidentität. Beides entstand in Zusammenarbeit mit Claudia Herz. Die passenden Icons wurden von Laura Gerber gestaltet.

Neben dem Match mit der Markenidentität und der Abgrenzung der drei Bereiche als visuelles Leitsystem war uns beim Farbkonzept besonders die Accessibility wichtig. Wir verzichteten bewusst auf eine Rot/Grün-Kombination und optimierten sämtliche Farbkontraste. Das Ergebnis ist AAA-konform.

3. Responsible Design & UX Writing

Die Initiative GemEinsamkeit behandelt ein sensibles Thema, das fast alle Menschen beschäftigt, gleichzeitig aber mit unheimlich viel Scham besetzt ist. Besonders in dem Seitenbereich, der Betroffene ansprechen soll, suchten wir daher nach Ideen, die das Tabu brechen und Website-Besucher*innen (im Rahmen der Möglichkeiten) auffangen.

Die Initiative GemEinsamkeit plant für 2023 eine Social Media Kampagne, für die wir bereits vorab einige Beispiel-Zitate in unserem privaten Umfeld sammeln konnten. In Zukunft sollen die Zitate, die auf der Website gefeatured werden, zusätzlich vertont werden. Die Idee: Eine echte, menschliche Stimme wirkt deutlich nahbarer und dadurch authentischer als ein Text-Statement.

Im letzten konzeptionellen Schritt finalisierten wir die Texte für das Website Redesign. Ich trug unter anderem die “3 Schritte gegen Einsamkeit” bei, ein auf Basis von Fachliteratur und persönlicher Erfahrung erarbeiteter Vorschlag für den Umgang mit Einsamkeitsgefühlen.

Im Footer sind zudem Hilfsangebote verlinkt, die Personen mit akutem Leidensdruck auf professionelle Stellen verweisen.

4. Umsetzung mit WordPress

Die alte Website, deren WordPress-Installation inzwischen defekt war, ging offline. Ich setzte die WordPress Website komplett neu um. Ohne schwere Pagebuilder, auf Basis eines bewährten Themes und mit den Standard Gutenberg Blocks.

Website Redesign für gemeinnützige Initiative: Ausschnitt aus dem WordPress Theme Customizer

Das Ergebnis? Sieht ungefähr 90% so aus wie geplant, ist zum Launch knapp 10 mal (!) leichter als die alte Website und repräsentiert die neue Ausrichtung der Initiative GemEinsamkeit, die ihren Platz in der deutschen Akteurslandschaft gerade erfolgreich einnimmt.

S. 

Team

UX/UI Design, UX Writing, Umsetzung: Sabine Appel

Icons: Laura Gerber

Unterstützung bei Farbkonzept und WordPress-Struggles: Claudia Herz

Mitarbeit an Struktur und Text: Hanna Koslowski, GF Initiative GemEinsamkeit

Leave a comment

Your email address will not be published. Required fields are marked *