Theresia Hentschel

Aufklärungs-Plattform, Figma · 2025

WaySafe

Eine Aufklärungs-Plattform zum Thema sexualisierte Gewalt gegen Frauen im öffentlichen Raum, ein Thema, das Gestaltung mit Verantwortung verlangt. Entstanden in enger Zusammenarbeit mit der Polizei Ravensburg, die uns wichtigen Input dazu gab, was in bestehenden Angeboten fehlt, mit akuter Hilfe in maximal 2 Klicks.

Rolle
Team (4 Personen), Recherche, Konzeption, Visual Design, Prototyping
Methodik
Design Thinking: Empathize, Define, Ideate, Prototype, Testing
Projektziel
Aufklären ohne zu verharmlosen, und akute Hilfe in einem Klick erreichbar machen.
Jahr
2025

Tools & Stack

  • Figma
  • FigJam
  • Auto-Layout
  • Design-Tokens
  • Klick-Prototyp
WaySafe im MacBook-Mockup: die Zivilcourage-Seite mit sich reichenden Händen als Titelmotiv
WaySafe: Klick-Walkthrough durch den PrototypAufzeichnung des Figma-Prototyps

Zielgruppe

Wir haben unsere Zielgruppe mit primären und sekundären Nutzer:innen definiert: primär Frauen aller Altersgruppen, verstärkt 16–24 und Betroffene, sekundär Außenstehende, die wissen wollen, wie sie helfen können.

Für die primäre Gruppe zählte vor allem schneller Zugriff auf akute Hilfe, für die sekundäre klare Handlungsanleitungen, wie sie im Ernstfall unterstützen können, ohne sich selbst zu gefährden.

Doku-Seite „Nutzertypen“ mit primären und sekundären Nutzer:innen samt Merkmalen und Fähigkeiten

Die Konkurrenz nach festen Kriterien geprüft

Bestehende Aufklärungs-Websites wie „Bayern gegen Gewalt“ haben wir nicht nach Bauchgefühl bewertet, sondern entlang fester Kriterien: Navigation, Barrierefreiheit, fachliche Tiefe, Bildsprache.

Sichtbare Schwächen flossen direkt in unsere Design-Entscheidungen ein: Frauen sollten nicht schwach oder schutzlos wirken, sondern eine Bildsprache erhalten, die sie stärkend und unterstützend zeigt.

Doku-Seite „Konkurrenzanalyse“ mit bewerteten Aufklärungs-Websites und ihren Stärken und Schwächen

Was die Umfrage wirklich zeigte

74 Personen haben unsere Umfrage beantwortet, 94,2 % weiblich. Eine Frage traf uns besonders: Wie bist du mit dem Vorfall umgegangen? Die häufigste Antwort war nicht „Beratungsstelle“, sondern „Vorfall verheimlicht“.

Das hat die Priorisierung verändert: Wenn Schweigen die häufigste Reaktion ist, muss die Seite zuerst Vertrauen aufbauen, bevor sie zur Handlung auffordert.

Doku-Seite „Verhalten der Opfer“ mit Umfrage-Diagramm: die häufigste Reaktion war, den Vorfall zu verheimlichen

Problem und Vision klar benannt

In der Define-Phase haben wir Problem und Vision bewusst getrennt aufgeschrieben: Das Problem nennt gesellschaftliche Verharmlosung und fehlende Zivilcourage, die Vision das Gegenbild, eine Gesellschaft, die Selbstbestimmung stärkt.

Dieses Statement war der Maßstab für jede spätere Entscheidung im Team, bis hin zur Frage, welches Foto infrage kam.

Doku-Seite „Problem-Vision-Statement“ mit den benannten Ursachen und der gemeinsamen Vision des Teams

Informationsarchitektur als Baumdiagramm

Fünf gleichrangige Bereiche (Startseite, Infothek, Prävention, Hilfe, Solidarität) mit klaren Unterpunkten, jede Seite hat einen Platz, bevor ein Screen entsteht.

Zivilcourage bekam von Anfang an einen eigenen Hauptpunkt statt eines Unterpunkts, sonst wäre das Thema untergegangen.

Doku-Seite „Informationsarchitektur“ mit Baumdiagramm der 5 Hauptbereiche und ihrer Unterpunkte

Von der Skizze zum Screen

Vor dem ersten Figma-Screen standen Papierskizzen, bis zur Kernbotschaft der Startseite: 2 sich haltende Hände und „Nicht allein“. Fast unverändert bis in den fertigen Prototyp.

Mehrere Layout-Varianten wurden durchskizziert, bevor eine in Figma ausgearbeitet wurde: Änderungen auf Papier kosten Minuten, in Figma Stunden.

Handskizzen der Seitenstruktur und der Startseite mit dem Motiv zweier sich haltender Hände

Zwei Testrunden, sichtbar optimiert

Der erste Test zeigte: Testpersonen fanden Erfahrungsberichte zur Prävention nur schwer. Die Lösung, ein Weiterleitungsbutton, wurde eingebaut und erneut getestet: noch nicht auffällig genug, weiter nachgeschärft mit kleinen Pfeil-Icons zur Unterscheidung.

Auch die Navigation wurde überarbeitet: klareres Wording, verschobene Unterpunkte, Pfeile für mehr Struktur. Am Ende bewerteten Testpersonen die Seite im UEQ mit identischen Spitzenwerten bei Pragmatik und Hedonistik.

Doku-Seite „Erkenntnisse“ mit Wireframe-Iteration nach dem ersten Thinking-Aloud-Test

Behind the Scenes

Vier Perspektiven, ein gemeinsamer Prototyp

Mit meinem Team habe ich parallel in Figma und FigJam gearbeitet: Recherche, Screens und Testing liefen nebeneinander statt nacheinander, jede Entscheidung wurde im Team abgeglichen.

Gerade bei diesem Thema war das wichtig: 4 Blickwinkel auf jede Bild- und Wortentscheidung, bevor sie in den Prototyp ging, damit niemand allein über eine sensible Formulierung entschied.

Methode & System

Erkenntnis aus der Recherche
Schockästhetik erzeugt Distanz statt Betroffenheit. Die Recherche führte zur bewussten Entscheidung für Klarheit statt Drama, auch in der Bildsprache: anonymisierte Silhouetten statt erkennbarer Gesichter.

Links

Zum Ausprobieren, live und direkt auf deinem Gerät.

Downloads

Die vollständige Dokumentation zum Projekt, zum Nachlesen und Mitnehmen.