PROJEKTÜBERSICHT
Eine öffentliche Plattform, die dem Netzwerk ermöglicht sich zu vernetzen und Bürger:innen zum Thema zu informieren
Das Ziel des Netzwerks Das Nettz ist es, eine enge Zusammenarbeit zwischen zivilgesellschaftlichen Akteur:innen, politischen Interessenvertreter:innen sowie Fachleuten aus Medien, Wissenschaft und der Tech-Industrie zu fördern, um Online-Hass wirksam zu begegnen.
Als Mitarbeiterin bei Studio Good war ich für verschiedene Optimierungsaufgaben der Website verantwortlich, darunter die Entwicklung einer neuen Navigationsleiste, die Gestaltung einer Team- und einer Veranstaltungsseite sowie die Integration einer Kartenvisualisierung zur verbesserten Suche nach zivilgesellschaftlichen Akteur:innen.
Das Problem
Redesign der Navigationsleiste
Die bestehenden Menüpunkte sollten um weitere ergänzt werden. Dabei lag der Fokus auf einer klaren Hierarchie: Primäre Menüpunkte und nachrangige Menüpunkte sollten optisch voneinander getrennt werden. Um einen schnellen und direkten Zugang zum Spendenbereich zu ermöglichen sollte außerdem ein gut sichtbarer Spendenbutton hinzugefügt werden.
Lösung
Erreichung der Navigationsziele
Menüpunkte in zwei Leisten: Die klare Zweiteilung der Menüstruktur erleichtert die Nutzerführung. Die Hauptpunkte „Akteur:innen, Magazin, Wissen, Förderprogramm“ erhalten dabei mehr Aufmerksamkeit als die darüber platzierten Unterpunkte.
Spendenbutton: Die rechts platzierte Position und der großzügige Weißraum lenken gezielt die Aufmerksamkeit auf den CTA-Button. Das Herz-Icon verstärkt die emotionale Ansprache der Nutzer:innen.
Das Problem
Suchfunktion der Akteur:innen verbessern
Die Suchfunktion sollte durch präzisere Filteroptionen verbessert werden. Zudem sollten neue Akteur:innen besonders hervorgehoben und eine Kartenansicht integriert werden.
Lösung
Eine nutzerfreundliche und attraktive Struktur schaffen
Suchfenster: Das Suchfenster wird vergrößert, um auch lange Suchanfragen zu ermöglichen.
Filter: Die Filterkategorien wurden an den Bedürfnissen der Nutzer:innen ausgerichtet und um weitere Unterkategorien erweitert.
Trefferanzahl: In der vorherigen Version gab es keine sichtbare Anzahl der Treffer zur Suchanfrage. Diese Information wurde nun ergänzt.
Neu-Badge: Neu gelistete Akteur:innen sind nun mit dem Neu-Badge geschmückt und gewinnen so mehr Aufmerksamkeit.
Kartenansicht: User:innen wünschten sich zusätzlich zur Kachelansicht eine Kartenansicht. Daher haben wir eine Google-Maps-basierte Kartenansicht integriert.
Das Problem
Gestaltung einer Veranstaltungsseite
Das Nettz fördert den interaktiven Austausch zwischen Zivilgesellschaft, Wissenschaft, Politik und Medien, beispielsweise durch Live- und Online-Events sowie Seminare. Diese Veranstaltungen sollten auf der Website beworben und dokumentiert werden.
Lösung
Eventkalender: das Netzwerk in Aktion
Listenansicht: Teaser-Komponenten mit den wichtigsten Infos bieten einen schnellen Überblick über die Veranstaltungen.
Filterung: Da nur wenige Events pro Jahr stattfinden, haben wir uns im Team gegen eine komplexe Filterung entschieden. Stattdessen können Nutzer:innen zwischen „zukünftigen“ und „vergangenen“ Events togglen.
Detailansicht: Die Eventansicht umfasst ein Vorschaubild sowie wichtige Informationen wie Ort, Datum und eine kurze Beschreibung. Zudem können Events über Social-Media-Kanäle geteilt oder die Seite ausgedruckt werden. Ein zentrales Kundenanliegen war die Integration einer Bildergalerie, in der dokumentierte Fotos gespeichert und archiviert werden können.
Das Problem
Gestaltung einer Teamseite
In der vorherigen Version der Website ging die Teamvorstellung weitgehend unter. Daher wünschte sich das Nettz-Team eine eigene Seite, um die Mitarbeitenden sympathisch und nahbar zu präsentieren.
Lösung
Dem Netzwerk ein Gesicht geben
Header-Bildergalerie: Eine Bildergalerie mit 3–5 Aufnahmen des Nettz-Teams in Aktion sorgt für einen emotionalen Einstieg und stellt die Teammitglieder vor.
Liste mit Overlay: Um die Liste kompakt zu halten, habe ich mich für ein Overlay entschieden, das den Beschreibungstext zu den Teammitgliedern beim Hovern anzeigt.
Das Problem
Teaserbox fürs Laut machen
Eine Teaserbox sollte integriert werden, die optional auf der Startseite eingeblendet werden kann, um auf besondere Events oder wichtige Informationen aufmerksam zu machen.
Lösung
Platz für kurze Teasertexte
Teaserboxen: Ich habe zwei Arten von Teaserboxen entworfen, um dem Nettz-Team mehr Flexibilität bei Ankündigungen zu bieten. Der Text ist bewusst knapp gehalten, damit Nutzer:innen ihn schnell erfassen können.
CTA-Button: Über den Button „Mehr Infos“ wird man direkt zur entsprechenden Detailseite weitergeleitet.
Visuelles DesigKoNzept
Entwicklung der UI-Komponenten
Basierend auf dem im Jahr 2020 von Studio Good entwickelten Designsystem habe ich die neuen Designkomponenten gestaltet.
Rückblick
Reflexion zum Arbeitsprozess
Warum UX den Unterschied macht
Beim Prototyp-Testing sind neue Fragen aufgekommen, etwa ob die von uns angelegten Kategorien der Suchanfragen für die Akteur:innen wirklich sinnvoll sind. Das hat mir einmal mehr verdeutlicht, wie wertvoll der Einsatz von UX-Methoden ist. Auch wenn es aus Budgetgründen verständlich ist, dass UX-Methoden nicht immer Priorität haben, wäre es in einer idealen Welt spannend für diesen Fall ein Card Sorting oder eine Nutzer:innenbefragung durchzuführen. So ließen sich die Suchanfragen und die Eventseite noch gezielter an die Bedürfnisse der Nutzer:innen anpassen.
Zusammenarbeit mit der Entwicklung
Kurze, direkte Absprachen und regelmäßige Jour-Fixes zwischen den Entwicklern und mir haben die Arbeit besonders angenehm und effektiv gestaltet. Durch unsere enge Zusammenarbeit konnten wir ein gute Balance zwischen Konzeption und technischer Umsetzbarkeit gewährleisten.
