Zurück zu allen Projekten

UX Design Relaunch Website Projektmanagement

Ein Website-Relaunch für Aktivist*innen

Festanstellung als Website Koordination bei der Seebrücke
seebruecke.org

🎯 Problem

Erster One-Pager

Alte Website

Die Seebrücke ist eine politische Bewegung, die sich für die Rechte von Geflüchteten und Menschen auf der Flucht, sowie zivile Seenotrettung einsetzt. Neben Protesten und Aktionen gibt es die Kampagne “Sichere Häfen”, bei der sich Städte und Gemeinden mit der Erfüllung von Forderungen bereit erklären, mehr Geflüchtete aufzunehmen. Mit der wachsenden Zahl an Lokalgruppen und Unterstützer*innen wuchsen bis 2020 auch die Anforderungen an eine Website, die als rudimentärer One-Pager startete und nicht viele Möglichkeiten der Anpassung hergab. Informationen konnten nicht optimal gefunden werden, was u.a. das E-Mailpostfach im Seebrücke-Büro belastete. Die Website dient der Repräsentation der Seebrücke, ihrer Lokalgruppen, aber auch der Vernetzung.

Die Mission: Wie können wir eine flexible Website designen, die die Seebrücke repräsentiert und als Tool für die gesamte Bewegung dient? Wie können wir eine Website bauen, die neue Aktivist*innen einlädt und für Klarheit schafft?

👩🏻‍💻 Rolle

Meine offizielle Rolle war die der “Website Koordination”, wobei ich aufgrund der begrenzten bezahlten Stellen in der Non-Profit-Organisation auch andere Rollen erfüllte: UX Designerin, Projektmanagerin, aber auch Contentmanagerin. Das hauptsächliche Website-Team bestand neben mir aus einer Freelance Visual Designerin sowie einem Freelance Frontend Developer.

Meine Verantwortung: Koordination und Leitung des gesamten Relaunch-Prozesses, sowie User Research, Konzeptionalisierung der Website, und Delivery in enger Kollaboration.

⚡ Prozess

Kanban-Board in Trello

Analyse und Audit des Status Quo: In einer ersten Bestandsaufnahme analysierte ich die aktuelle Website – Was funktioniert, was nicht? Wie ist die Seitenstruktur und die aktuellen User Flows?

User Research: Die zwei Hauptzielgruppen waren einerseits die AGs und Lohnarbeitenden der Seebrücke, u.a. Fundraising, Social Media, Struktur; sowie andererseits die ehrenamtlichen Aktivist*innen in Deutschland (bzw. DACH-Region), die in Lokalgruppen organisiert sind. Mit ersteren führte ich Interviews zu ihrer Arbeit, Pain Points und Bedürfnissen. Für letztere erstellte ich eine Umfrage zu Ihrem Nutzungsverhalten der Website. Basierend auf den Insights kreierte ich Personas, Activist Journeys, sowie User Flows, die wir im Team-Workshop erörterten.

Umfrage: Relevanz von Themen auf der Website

Umfrage: Funktion der Website

Eine von mehreren Personas

User / Activist Journey

Strategie finden: Um unsere Erkenntnisse zu verfestigen, entwarfen wir ein übergreifendes Kommunikationskonzept. Darin enthalten waren Ziele, die wir mit dem Website-Relaunch erreichen wollten, sowie wie wir unseren Erfolg messen können.

Konzeption und Ideation: Neben dem Kommunikationskonzept leitete ich Prinzipien ab, die der neuen Struktur der Website dienen, u.a.:

Weniger Verteilerseiten, d.h. Seiten die nur als Linksammlungen fungieren
Mehr Content auf höherer Ebene und weniger versteckt auf Unterseiten
Weniger Sackgassen und mehr zirkuläre Userführung
Hilfreiche Links anbieten an sinnvollen Stellen, Service-Charakter
Potentielle Fragen vorwegnehmen (z.B. wenn Lokalgruppen nicht gefunden werden können)

Weitere Ideen, um die Website zu einem Tool zu entwickeln:

Einführung eines FAQ als zusätzlicher Ort, um Antworten zu finden
Eine “Mach mit!”-Seite, v.a. für neue Aktivist*innen, für einen Überblick und einen einfacheren Einstieg
Fokus auf Städte und Gemeinden: Jede hatte einen Sicheren Hafen, eine Lokalgruppe oder beides. Die Verbindung der beiden Ebenen auf der Website (zuvor separat voneinander) stärkt die Arbeit der Zivilgesellschaft sowie der Verwaltung.

In Figma entwarf ich erste low-fidelity Wireframes der verschiedenen Seiten. Dabei kristallisierten sich wiederkehrende Elemente wie Teaser, Stages, Galerien, Listen, Akkordeons etc. Diese Komponenten verwendete ich immer wieder und baute dabei ein System auf, das flexibel und vielseitig genug war, aber nicht unseren Development- und Design-Scope überschritt.

User Flows nach Use Cases

Neue Seitenstruktur

Wireframes von Seiten

Übersicht von Komponenten

Visual Design: Unsere Visual Designerin kümmerte sich um das neue Look & Feel, basierend auf der Umfrage zuvor. Schnell befanden wir uns in einem effizienten Prozess: Ich lieferte verfeinerte Wireframes und konzeptionelle Templates der Komponenten und ihrer Funktionalitäten, inklusive verschiedene States und Interaktionen; unsere Visual Designerin übersetzte diese in einer neuen Designsprache, und unser Developer überprüfte sie. Iterativ gingen wir so über unser Trello/Kanbanboard.

User Testing: Ab einem Punkt führten wir remote User Testings mit verschiedenen Personen (Lohnarbeitende sowie Ehrenamtliche) durch, für Desktop sowie Mobile. Ich formulierte die Aufgaben, plante und führte die Sitzungen durch. Der Hauptfokus richtete sich darauf, wie sie durch die Website navigierten, oder ob sie etwas irritierte. Ich clusterte die Insights und leitete davon Action Items ab, die dann wieder in unseren Workflow flossen.

Vor dem Livegang: Über der Designphase hinaus gab noch andere Aufgaben, die ich als Hauptverantwortliche vor dem Livegang übernehmen musste, wie:

Enge Kooperation mit Social Media
Vorbereitung und Training der Lokalgruppen für die Nutzung des neuen CMS
Manuelle Übertragung der Lokalgruppenseiten ins neue CMS
Beantwortung weiterer konzeptioneller Fragen
Bug Testing

🏔️ Herausforderungen

Durch das kleine Team waren wir agil und genossen durch das Vertrauen und die Flexibilität der Seebrücke viele Freiheiten in Entscheidungen rund um das Design und Konzept. Die Website als Produkt selbst ist recht unkompliziert, jedoch gab es einige Enttäuschungen aufgrund von technischen Einschränkungen, z.B. sollte der Input von News zwischen Social Media und den Website-News automatisiert werden, was jedoch leider in dem Kontext nicht realisiert werden konnte. Auch konnten nicht alle Features wie geplant implementiert werden, da es im Development zu Verzögerungen kam. Dies war manchmal frustrierend, da ich als Koordination nur warten konnte, aber ich lernte, Erwartungen zu kommunizieren, ehrliche Konversationen zur Machbarkeit zu haben und aber auch Druck auszuüben, wenn es notwendig war.

🏆 Ergebnisse

Nach insgesamt neun Monaten nach Projektstart ging die Seite live, und wir erhielten gutes Feedback. Aktivist*innen erzählten mir, dass sie die Seite öfter nutzen wollen und auch motiviert waren durch die verschiedenen Komponenten, die sie im intuitiveren CMS verwenden konnten. Auf die Website wurde nun öfter verwiesen für Informationen. Auf aufkommende Wünsche der AGs wie “Wie würden gerne XY auf der Website zeigen” konnten wir eingehen, da der modulare Aufbau der Website das erlaubte. Dies wiederum bewies die gewonnene Flexibilität des Produkts.

Screenshot der Startseite nach Livegang

💡 Learnings

Rückblickend wünschte ich, wir hätten früher und auch mehr getestet (was natürlich zu den Best Practices gehört). Meine innere Barriere war vermutlich, dass ich die Website noch “nicht fertig genug” fand, dennoch hätte ich mehr Initiative ergreifen und auch Übungen wie Card Sorting anwenden können.

Viele neue Erkenntnisse kamen auf einem Team-Level. Es war das erste Mal, dass ich mit anderen kollektiv und kollaborativ ohne Hierarchien arbeiten konnte. Bei einer non-profit politischen Bewegung, die so dezentralisiert ist und ohne Vorgesetzte, musste ich auf meine eigene Expertise hören. Gleichzeitig schätzte ich sehr, dass mir von Anfang an Vertrauen entgegengebracht wurde, als die einzige UX-Expertin unter den Lohnarbeitenden, und ich auch wirklich die Verantwortung gespürt habe. Es war interessant, ein Produkt komplett neu aufgebaut zu haben, mit all den Aspekten und Details, die damit zusammenhängen, wie Datenschutz, Internationalization, CMS Training, Kommunikation, vernetzende Arbeit zwischen AGs aber auch das Kennenlernen der Menschen in den Lokalgruppen und ihre Bedürfnisse.

Zum nächsten Projekt