Projektüberblick und Motivation
Im Rahmen des Kurses Interaction Design 1 wurde das Konzept und der Prototyp eines responsiven Webportals für FLINTA*-Personen entwickelt. Ziel des Projekts war es, eine Nutzer*innen-zentrierte, zugängliche und vertrauenswürdige Plattform zu gestalten, die es ermöglicht, lokale Events zu entdecken und gemeinsame Aktivitäten zu planen.
Die Motivation für das Projekt entstand aus der Erkenntnis, dass viele FLINTA*-Personen öffentliche und soziale Räume als unsicher oder ausschließend wahrnehmen. Die Recherche zeigte, dass bestehende Plattformen häufig keine ausreichende Sichtbarkeit für FLINTA*-Events bieten, Sicherheitsaspekte nur unzureichend kommunizieren oder relevante Angebote schwer auffindbar sind. Gleichzeitig besteht ein starkes Bedürfnis nach geschützten, vertrauenswürdigen digitalen Räumen, die Orientierung bieten und den Zugang zu Begegnung und Austausch erleichtern.
Vor diesem Hintergrund entstand die zentrale Fragestellung des Projekts:
Wie kann eine digitale Plattform FLINTA*-Personen dabei unterstützen, sichere Veranstaltungen zu finden, Kontakte zu knüpfen und sich dabei ernst genommen und geschützt zu fühlen?
Empathize Phase
Zu Beginn des Projekts lag der Fokus darauf, die Bedürfnisse, Sorgen und Erwartungen der FLINTA*-Zielgruppe möglichst genau zu verstehen. Ziel dieser Phase war es, Annahmen zu vermeiden und den weiteren Designprozess auf reale Erfahrungen und Perspektiven zu stützen.
Dafür nutzten wir eine Kombination aus einer Screener-Umfrage sowie qualitativen Interviews mit FLINTA*-Personen unterschiedlicher Lebensrealitäten. Die Umfrage diente dazu, erste Tendenzen und relevante Themenfelder zu identifizieren, während die Interviews ein tieferes Verständnis für individuelle Erfahrungen, Unsicherheiten und Wünsche ermöglichten.
Aus der Auswertung der Recherche ergaben sich zentrale Erkenntnisse, die sich durch mehrere Aussagen und Perspektiven zogen:
ein starker Wunsch nach Sicherheit, Schutz und Vertrauen
Schwierigkeiten beim Finden FLINTA*-bezogener Events
Hemmungen, Veranstaltungen allein zu besuchen
der Wunsch nach Zugehörigkeit und klarer Moderation
Diese Insights bildeten die Grundlage für alle weiteren konzeptionellen und gestalterischen Entscheidungen im Projektverlauf.
Define Phase
Personas
Aus der Recherche entwickelten wir 6 Personas, die typische Nutzer*innen-Typen repräsentieren.
Davon wurden 4 als Primärpersonas priorisiert, da sie den Fokus unseres Designs am besten widerspiegeln.
User Journeys & Problem Statements
Um die Perspektive der Nutzer*innen über den gesamten Nutzungskontext hinweg zu verstehen, entwickelten wir User Journey Maps, die zentrale Szenarien abbilden von der ersten Awareness über die Event-Entdeckung bis hin zur Entscheidung zur Teilnahme.
Die User Journeys halfen uns dabei, folgende Aspekte sichtbar zu machen:
Unsicherheiten vor der ersten Teilnahme an Events
Entscheidungsprozesse bei der Event-Auswahl
Momente, in denen Vertrauen, Orientierung und Klarheit besonders wichtig sind
Stellen, an denen Nutzer*innen abbrechen oder zögern könnten
Problem Statements & How-Might-We-Fragen
Auf Basis der Journeys formulierten wir Problem Statements, um die identifizierten Herausforderungen klar zu benennen. Diese wurden anschließend in How-Might-We-Fragen überführt, um einen lösungsorientierten Denkraum für die Ideation zu öffnen.
Beispiele für zentrale Fragestellungen waren:
Wie können wir FLINTA*-Personen dabei unterstützen, sich vor einer Veranstaltung sicher zu fühlen?
Wie kann Event-Information so aufbereitet werden, dass Unsicherheiten reduziert werden?
Wie lässt sich der Einstieg in neue soziale Kontexte niedrigschwellig gestalten?
Aus der Verdichtung dieser Fragen entstanden finale Problemstellungen, die den Fokus des Projekts klar definierten.
Konkurrenzanalyse
Ergänzend führten wir eine Konkurrenzanalyse durch, um bestehende Plattformen im Bereich Event-Suche und Vernetzung zu untersuchen. Analysiert wurden unter anderem:
Art der Events und Zielgruppenansprache
Navigationsstruktur und Funktionsumfang
Umgang mit Sicherheits- und Vertrauensaspekten
Tonalität und visuelle Gestaltung
Die Analyse zeigte, dass viele bestehende Angebote entweder sehr allgemein gehalten sind oder Sicherheitsbedürfnisse von FLINTA*-Personen nicht explizit adressieren. Diese Lücke bestätigte die Relevanz unseres Projektansatzes und floss direkt in die weitere Konzeptentwicklung ein.
Ideation Phase
In der Ideation-Phase wurden auf Basis der definierten Problemstellungen konkrete Lösungsansätze entwickelt. Ziel war es, ein breites Spektrum an Ideen zu sammeln und diese anschließend realistisch zu bewerten und einzugrenzen.
Ideenfindung
Zur Entwicklung erster Lösungsansätze nutzten wir unterschiedliche kreative Methoden:
Brainstorming & Mind Mapping, um Bedürfnisse, Funktionen und Themenfelder zu sammeln
Visual Ideation um Ideen schnell zu visualisieren
SCAMPER, um bestehende Konzepte zu hinterfragen, zu vereinfachen oder neu zu kombinieren
Dabei entstand ein umfangreicher Ideenraum rund um Events, Sicherheit, Vernetzung, Profile und Orientierung.
Priorisierung der Ideen
Um den Fokus des Projekts klar zu halten, wurden die gesammelten Ideen systematisch priorisiert. Grundlage hierfür waren Relevanz für die Zielgruppe, Bezug zu den Problemstellungen sowie Umsetzbarkeit im Projektkontext.
Hoch priorisierte Themen:
Sicherheit & Moderation
Verifizierung von Nutzer*innen
klare Regeln und Schutzmechanismen
Events & Sichtbarkeit
Event-Übersicht
Event-Detailseiten mit klaren Informationen
Browsing & Filter
Filter nach Interessen, Ort und Art der Veranstaltung
Veranstaltungskalender
Speichern und Wiederfinden von Events
Individuelles Profil
freiwillige Angaben, Pseudonyme, Interessen
Geringer priorisierte oder verworfene Ideen:
umfangreiche Community-Funktionen (Foren, Gruppen)
komplexe Social-Features außerhalb des Event-Kontexts
Diese bewusste Reduktion half dabei, den Fokus auf eine Event-basierte Plattform zur lokalen Vernetzung zu legen.
Ergebnisse der Ideation
Aus der Ideation-Phase gingen folgende zentrale Ergebnisse hervor:
eine klar definierte Seitenstruktur auf Basis der priorisierten Funktionen
ein erstes Navigationskonzept, das Event-Entdeckung und Orientierung unterstützt
die Grundlage für Task Flows und Wireframes in der Prototyping-Phase
Prototyping Phase
Auf Grundlage der priorisierten Ideen aus der Ideation-Phase wurde das Konzept schrittweise in visuelle und interaktive Prototypen überführt. Ziel dieser Phase war es, Struktur, Inhalte und Interaktionen frühzeitig sichtbar und testbar zu machen.
Low- & Mid-Fidelity Wireframes
Zu Beginn entstanden Low-Fidelity-Wireframes, um die grundlegende Seitenstruktur, Navigation und Inhalte festzulegen. Diese wurden anschließend zu Mid-Fidelity-Wireframes weiterentwickelt, um Layouts, Hierarchien und erste Interaktionen zu konkretisieren.
Der Fokus lag dabei auf:
klarer Event-Übersicht
verständlichen Event-Detailseiten
Orientierung innerhalb der Navigation
einem nachvollziehbaren Optimalpfad
High-Fidelity Prototyp
Auf Basis der getesteten Wireframes und der explorativen Gestaltung entstand ein High-Fidelity-Prototyp, der die zentralen Nutzer*innen-Flows realitätsnah abbildet. Dieser Prototyp diente als Grundlage für die anschließenden Usability-Tests.
Der High-Fidelity-Prototyp umfasste:
die wichtigsten Seiten des Portals
definierte UI-Komponenten
erste Zustände und Interaktionen
eine konsistente visuelle Gestaltung
Testing Phase
Ziel der Testing-Phase war es, den entwickelten High-Fidelity-Prototypen mit Vertreter*innen der Zielgruppe zu evaluieren und zu überprüfen, ob die zentralen Nutzerinnen-Flows verständlich, intuitiv und nutzbar sind. Besonderes Augenmerk lag dabei auf dem Optimalpfad, der Verständlichkeit von Funktionen sowie dem subjektiven Sicherheits- und Vertrauensgefühl.
Testvorbereitung
Die Usability-Tests wurden auf Basis eines strukturierten Testplans vorbereitet. Dieser definierte die Ziele der Tests, den Ablauf der Sessions sowie die zu testenden Aufgaben. Der Fokus lag auf realistischen Nutzungsszenarien entlang der wichtigsten Funktionen des Portals, etwa der Event-Entdeckung, der Navigation und dem Wiederfinden gespeicherter Inhalte.
Zur Vorbereitung gehörten außerdem:
die Definition konkreter Tasks entlang des Optimalpfads
die Festlegung qualitativer und quantitativer Beobachtungskriterien
die technische Vorbereitung des Prototypen für die Tests
Durchführung der Usability-Tests
Die Tests wurden mit mehreren Testpersonen aus der Zielgruppe durchgeführt und moderiert. Dabei arbeiteten die Teilnehmenden die vorgegebenen Aufgaben selbstständig am Prototypen ab. Währenddessen kam die Think-Aloud-Methode zum Einsatz, um Entscheidungsprozesse, Unsicherheiten und Verständnisprobleme direkt erfassen zu können.
Zur detaillierten Auswertung wurden zusätzlich:
Sprachaufnahmen der Testpersonen
sowie Bildschirmaufnahmen der Nutzung
erstellt. Diese ermöglichten es, Klickpfade, Interaktionsabfolgen und benötigte Zeiten im Nachhinein präzise nachzuvollziehen.
Auswertung
Die gesammelten qualitativen und quantitativen Daten wurden anschließend systematisch ausgewertet. Das Feedback der Testpersonen wurde gebündelt, thematisch gruppiert und hinsichtlich Häufigkeit, Relevanz und Umsetzbarkeit analysiert.
Dabei wurde bewusst unterschieden zwischen:
Optimierungen, die kurzfristig umsetzbar sind
Erkenntnissen, die den Projekt- oder Zeitrahmen überschreiten würden
Der Schwerpunkt der Auswertung lag auf:
der Verbesserung des Optimalpfads
der Reduktion von Unsicherheiten und Missverständnissen
der Steigerung von Verständlichkeit und intuitiver Nutzung
Erkenntnisse & Konsequenzen
Die Tests zeigten, dass die grundlegenden Nutzer*innen-Flows überwiegend verständlich waren, gleichzeitig jedoch an bestimmten Stellen Klarheit, visuelles Feedback und Vereinfachung notwendig sind. Besonders relevant waren Erkenntnisse zu Begrifflichkeiten, Statusanzeigen sowie zur Einordnung einzelner Funktionen.
Auf Basis der priorisierten Ergebnisse wurden konkrete Handlungsempfehlungen sowie User Stories abgeleitet, die als Grundlage für die anschließende Verfeinerung des Konzepts und die Implementierungsphase dienten.
»Der Anmeldeprozess war einfach, ich wusste immer, was als Nächstes passiert.«
»Ich wusste nicht genau, ob das Event jetzt gespeichert ist und wo ich es später wieder finde.«
Implement Phase
In der Implementierungsphase wurden die konzeptionellen und gestalterischen Ergebnisse aus den vorherigen Phasen final zusammengeführt und in einen funktionalen, responsiven Webprototypen überführt. Ziel war es, das entwickelte Konzept technisch umzusetzen und die wichtigsten Nutzer*innen-Flows realistisch erlebbar zu machen.
Überarbeitung von Task Flows & Struktur
Zu Beginn der Implementierungsphase wurden die bestehenden Task Flows nochmals überprüft und mit dem finalen Navigationskonzept abgeglichen. Dabei wurde festgelegt, welche Inhalte und Funktionen im Header sichtbar sind und welche in das Drop-Down-Menü ausgelagert werden.
Die grundlegenden Nutzungspfade blieben dabei erhalten, wurden jedoch an einzelnen Stellen vereinfacht und klarer strukturiert, um eine konsistente Umsetzung zu ermöglichen.
Verfeinerung des Style Guides
Parallel dazu wurde der bestehende Style Guide nochmals überarbeitet und präzisiert. Ziel war es, eine konsistente visuelle Umsetzung über alle Seiten hinweg sicherzustellen.
Dabei wurden unter anderem:
das Logo leicht angepasst und besser in das Gesamtsystem integriert
die Farbpalette reduziert und klar in Primär- und Sekundärfarben gegliedert
UI-Komponenten wie Buttons, Icons, Boxen und Formulare vereinheitlicht
Abstände, Hierarchien und Wiedererkennbarkeit verfeinert
Die grundlegende Designsprache blieb dabei erhalten, wurde jedoch klarer, ruhiger und konsistenter ausgearbeitet.
Technische Umsetzung
Der responsive Webprototyp wurde mit HTML und CSS in Visual Studio Code umgesetzt. Die Implementierung konzentrierte sich bewusst auf die wichtigsten Seiten und Kernfunktionen des Konzepts, um den Projektumfang realistisch zu halten.
Besonderer Wert wurde gelegt auf:
die Grundlegende Einhaltung des definierten Style Guides
eine konsistente Struktur über alle Seiten hinweg
eine responsive Darstellung für unterschiedliche Bildschirmgrößen
Während der Umsetzung wurde der Prototyp kontinuierlich getestet, um Layout-Probleme, Darstellungsfehler und Inkonsistenzen frühzeitig zu erkennen und zu beheben.
Ergebnisse
Flinta*Circle ist ein nutzerzentrierter Prototyp, der Sicherheit, Sichtbarkeit und Gemeinschaft in den Mittelpunkt stellt.
