MARKETPLACE · UX/UI Case Study
EventMatrix
Eine Plattform, auf der Menschen ein Event als Projekt anlegen, mehrere Dienstleister wie Catering, Musik oder Fotografie anfragen und sich mit den zugesagten Anbietern direkt im Projekt abstimmen.
- UX/UI
- Full Stack
- Marketplace
- Projekt
- Konzeptprojekt für eine Event-Plattform mit zwei Nutzergruppen
- Meine Rolle
- Product Concept, UX/UI Design und Product Decisions
- Technische Umsetzung
- AI assisted development mit Claude Code auf Basis von Next.js, Fastify, Supabase und TypeScript.
- Plattform
- Responsive Web-App für Kund:innen und Dienstleister
- Technologie & Tools
- Next.js, Fastify, Supabase, TypeScript, Tailwind CSS
01 · Ausgangslage
Worum es geht
Wer ein Event organisiert, braucht selten nur einen Dienstleister. Catering, Musik, Fotografie und Location werden einzeln angefragt, per E-Mail oder Telefon. Wer schon zugesagt hat und wer noch antworten muss, geht dabei leicht verloren.
Auf der anderen Seite stehen Dienstleister, die Anfragen sichten, annehmen oder ablehnen müssen und dafür genug Kontext brauchen, ohne gleich Zugriff auf das ganze Projekt zu bekommen.
02 · Ziel
Was das Produkt erreichen soll
Ein Event als ein gemeinsames Projekt abbilden, in dem alle Anfragen gebündelt sind, jede Anfrage einen klaren Status hat und die Abstimmung mit zugesagten Dienstleistern direkt im Projekt stattfindet.
Dabei beide Perspektiven ernst nehmen: Kund:innen, die koordinieren, und Dienstleister, die auf Anfragen reagieren.
03 · Vorgehen
Vom Konzept zum Produkt
Schritt 1
Rollen klären
Es gibt zwei Perspektiven: Kund:innen legen Projekte an, Dienstleister pflegen ein Anbieterprofil mit Leistungskategorien und sehen ihre eingehenden Anfragen.
Schritt 2
Das Projekt als Klammer
Ein Projekt beschreibt den Anlass: Art des Events, Datum, Ort, Gästezahl, Budget, privat oder als Firma. Alle Anfragen und Nachrichten hängen an diesem Projekt.
Schritt 3
Den Lebenszyklus einer Anfrage modellieren
Eine Anfrage durchläuft klar benannte Status: Entwurf, Angefragt, Angenommen, Abgelehnt, Storniert, Abgeschlossen. Für jede Rolle ist festgelegt, welche Übergänge sie auslösen darf.
Schritt 4
Zugriff an Zusagen koppeln
Erst wenn ein Dienstleister eine Anfrage annimmt, wird er Teil des Projekts und kann an der Projektkommunikation teilnehmen.
Schritt 5
Eine eigene visuelle Grundlage
Der erste Stand war funktional, aber visuell generisch. EventMatrix bekam deshalb ein eigenes Designsystem: warmes Off-White, weiße Karten, eine ruhige Typografie und ein gedecktes Coral als sparsamer Akzent. Dieselben Tokens und Komponenten gelten für Startseite, Dienstleister, Projekte und Anbieterprofil.
Schritt 6
Aus der Umsetzung lernen
Bei der Überprüfung der ersten Umsetzung zeigte sich, dass Dienstleister ihre erste Anfrage gar nicht annehmen konnten, weil sie dafür schon Zugriff auf das Projekt gebraucht hätten. Die Berechtigung wurde daraufhin direkt an die Anfrage gebunden.
04 · Zentrale UX Entscheidungen
Entscheidungen, die das Erlebnis prägen
01
Projekt statt Einzelanfragen
Eine zentrale Designentscheidung war, nicht einzelne Anfragen, sondern das Event in den Mittelpunkt zu stellen. So sieht man auf einen Blick, welche Leistungen schon zugesagt sind und welche noch fehlen.
02
Status mit klaren Zuständigkeiten
Kund:innen können anfragen und stornieren, Dienstleister annehmen, ablehnen und abschließen. Ist ein Schritt nicht möglich, erklärt die Meldung in klarer Sprache, warum.
03
Kontext ohne vollen Zugriff
Vor einer Zusage sehen Dienstleister nur eine Zusammenfassung des Projekts: Titel, Anlass, Datum und Ort. Genug, um zu entscheiden, ohne alle Projektdetails offenzulegen.
04
Kommunikation erst nach der Zusage
Der Projektchat steht nur Kund:innen und zugesagten Dienstleistern offen. So bleibt die Abstimmung bei denen, die tatsächlich am Event beteiligt sind.
05
Anfragen auch ohne festen Anbieter
Eine Anfrage braucht eine Leistungskategorie, ein konkreter Anbieter ist optional. Wer noch niemanden kennt, kann trotzdem beginnen.
06
Anfrage, keine Buchung
EventMatrix bildet bewusst Anfragen ab, keine verbindlichen Buchungen oder Zahlungen. Die Sprache in der Oberfläche bleibt dabei.
07
Emotional, aber strukturiert
Eventfotografie für die wichtigsten Kategorien gibt der Startseite die Atmosphäre besonderer Anlässe. Darunter bleibt die Oberfläche ruhig: klare Karten, feine Linien, ein Akzent nur für Hauptaktionen und Status. So wirkt die Plattform weder wie ein Admin-Dashboard noch verspielt.
08
Nur echte Angaben auf den Karten
Dienstleisterkarten zeigen Kategorie, Name, Ort und Beschreibung. Bewertungen, Preise oder Bilder einzelner Anbieter gibt es im System noch nicht, deshalb werden sie auch nicht vorgetäuscht.
Vorher und nachher: die Startseite
Im ersten Stand war die Startseite ein Absatz Text mit zwei Buttons. Im Redesign erzählt sie die Idee in einer klaren Reihenfolge: eine starke Headline, die wichtigsten Kategorien als Bildkarten, drei kurze Vorteile, Eventtypen und der Ablauf in drei Schritten. Funktionen und Abläufe blieben dabei unverändert.
Früher: ein Absatz Text und zwei Buttons. Heute: Headline, Kategorien mit Fotos, klare Hauptaktion.
05 · Verworfene Ansätze
Was ausprobiert und wieder verworfen wurde
Nicht jede Idee hat es ins Produkt geschafft. Diese Ansätze gab es in früheren Ständen; daneben steht jeweils, warum sie ersetzt wurden.
01
Eine generische Standard-Oberfläche
- Früher
- Der erste Stand nutzte die gemeinsamen Standard-Bausteine und einen Design-Umschalter. Dienstleister standen als einfache Liste mit Tags.
- Warum verworfen
- EventMatrix sollte hochwertig, ruhig und strukturiert wirken, nicht verspielt, pastellig, typisch SaaS-Blau, generisch oder wie ein Admin-Dashboard.
- Heute
- Eine eigene visuelle Grundlage: warmes Off-White, weiße Karten, Manrope und ein gedecktes Coral als sparsamer Akzent. Dienstleister mit Kategorien links, Suche und Karten.
Früher: Standard-Liste mit Tags. 
Heute: Kategorien, Suche und Karten. 02
„Geprüfte Dienstleister“
- Früher
- Das Redesign-Konzept sah einen Bereich vor, der Dienstleister als geprüft hervorhebt.
- Warum verworfen
- EventMatrix prüft keine Anbieter. Die Aussage wäre falsch und würde ein Vertrauen versprechen, das es nicht gibt.
- Heute
- Der Bereich wurde weggelassen. Die Startseite zeigt stattdessen Kategorien, Vorteile und den Ablauf.
03
Bewertungen, Preise und Sortierung auf den Karten
- Früher
- Für das Verzeichnis waren Bewertungen, Preisangaben und eine Sortierung vorgesehen.
- Warum verworfen
- Dafür gibt es keine Daten. Erfundene Bewertungen oder Preise kamen nicht infrage, und ohne sie gibt es nichts Sinnvolles zu sortieren.
- Heute
- Die Karten zeigen nur echte Angaben: Kategorie, Name, Ort und Beschreibung. Die Suche filtert die geladenen Ergebnisse.
04
Kategoriefotos auch auf den Anbieterkarten
- Früher
- Die Fotos der Startseite hätten auch die Bildflächen der Anbieterkarten füllen können.
- Warum verworfen
- Sie würden wirken wie Fotos genau dieses Anbieters.
- Heute
- Anbieterkarten zeigen eine ruhige Fläche mit Initial, bis es eigene Fotos gibt.
05
Zugriff erst mit Projektzugang
- Früher
- Ein Dienstleister sollte eine Anfrage erst bearbeiten können, wenn er schon Zugriff auf das Projekt hat.
- Warum verworfen
- Zugriff auf das Projekt bekommt er aber erst, wenn er annimmt. Bei der Überprüfung der ersten Umsetzung zeigte sich: So hätte niemand je eine erste Anfrage annehmen können.
- Heute
- Die Berechtigung hängt an der Anfrage selbst. Vor der Zusage sieht der Dienstleister nur eine Zusammenfassung des Projekts.
06 · Lösung
Funktionen und Bereiche
EventMatrix verbindet ein öffentliches Anbieterverzeichnis mit Projekten, in denen Kund:innen und Dienstleister zusammenarbeiten.
Für Kund:innen
- Projekte mit Anlass, Datum, Ort, Gästen und Budget anlegen
- Anfragen pro Leistungskategorie stellen, optional an einen bestimmten Anbieter
- „Anfrage stellen“ direkt von der Seite eines Anbieters
- Status aller Anfragen im Projekt verfolgen
- Projektkommunikation mit zugesagten Anbietern
Für Dienstleister
- Anbieterprofil mit Leistungskategorien, Ort und Website
- Eingehende Anfragen mit Projektzusammenfassung
- Anfragen annehmen, ablehnen oder abschließen
- Nach Zusage Zugang zum Projekt und zur Kommunikation
Öffentlich
- Startseite mit den wichtigsten Kategorien und dem Ablauf
- Anbieterverzeichnis mit Kategoriefilter und Suche
- Öffentliche Anbieterprofile
Demo
- „Demo starten“ ohne Konto: ein Beispiel-Event mit Anfragen in drei Status
- Ansicht als Kundin oder als Dienstleister, mit denselben Regeln wie mit Konto
- Nichts wird gespeichert oder verschickt
Browser
Mobile
07 · Evaluation
Wo man hängen bleibt
Vor Tests mit echten Nutzer:innen wurde EventMatrix heuristisch evaluiert: ein Walkthrough durch die Live-Seite, aus Sicht einer Erstbesucherin am Smartphone, am Desktop und mit Tastatur, dazu mit einem fiktiven Anbieterkonto. Die Aufgaben: eine Fotografin finden, einen Dienstleister anfragen und ein Projekt anlegen.
Das ersetzt keinen Nutzertest, findet aber zuverlässig Stellen, an denen der Ablauf stockt. Die fünf wichtigsten wurden direkt behoben.
- Kritisch
Anfragen endete in einer Sackgasse
Auf der Seite eines Dienstleisters stand nur, man solle das eigene Projekt öffnen und dort eine Anfrage hinzufügen, ohne Button und ohne Link.
Geändert: „Anfrage stellen“ führt zur Projektauswahl, das gewählte Projekt öffnet das Anfrageformular mit diesem Anbieter vorausgewählt. Ohne Konto geht es über die Anmeldung zurück an genau diese Stelle.
- Kritisch
Ohne Konto war der Kern nicht erlebbar
Projekt, Anfragen und Status ließen sich nur mit eigenem Konto ansehen, auch für Besucher:innen dieser Case Study.
Geändert: „Demo starten“ öffnet ein Beispiel-Event mit Anfragen in drei Status, wahlweise aus Sicht der Kundin oder des Dienstleisters. Alles bleibt in der Browser-Sitzung.
- Mittel
Die Anmeldung vergaß das Ziel
Wer „Projekt erstellen“ antippte und sich anmeldete, landete danach nicht beim Projekt.
Geändert: Anmeldung und Registrierung führen zurück zu dem Schritt, von dem man kam.
- Mittel
Dienstleister landeten in der Kundensicht
Nach der Anmeldung sahen Anbieter „Noch keine Projekte“. Ihre Anfragen standen unter dem langen Profilformular.
Geändert: Anbieter landen in ihrem Bereich, eingehende Anfragen stehen oben.
- Mittel
Langes Laden ohne Erklärung
Beim ersten Aufruf stand oft mehrere Sekunden nur „Dienstleister werden geladen …“, weil der Server erst aufwacht.
Geändert: Nach vier Sekunden erklärt ein Hinweis, dass der Server startet und das bis zu einer Minute dauern kann.
- Kosmetisch
Große leere Bildfläche auf der Anbieterseite
Ohne Fotos nimmt eine leere Fläche fast die Hälfte der Seite ein.
Noch offen.
- Kosmetisch
Registrierung ohne Hinweis auf die zwei Rollen
Sie erklärt nicht, dass ein Konto für Kund:innen und Dienstleister gilt.
Noch offen.
- Kosmetisch
„Projekt erstellen“ doppelt im Handy-Menü
Der Eintrag steht im Menü und zusätzlich als Button darunter.
Noch offen.
08 · Reflexion
Was trägt und was als Nächstes kommt
Bei EventMatrix habe ich gelernt, wie gut ein Ablauf auf dem Papier aussehen und in der Benutzung trotzdem haken kann: Ausgerechnet die wichtigste Aufgabe, einen Dienstleister anzufragen, endete auf der Anbieterseite in einer Sackgasse.
Wichtig war mir auch, nichts zu versprechen, was es nicht gibt. Deshalb zeigt EventMatrix keine Bewertungen, keine Preise und kein „geprüft“, solange es dafür keine echte Grundlage gibt.
Was bereits funktioniert
- Das Projekt bündelt Anfragen, Status und Kommunikation an einem Ort.
- Die Statuslogik ist für beide Rollen eindeutig und wird serverseitig durchgesetzt.
- Das neue Designsystem gibt allen Seiten einen gemeinsamen, ruhigen Auftritt.
- Ohne Konto lässt sich der ganze Ablauf in der Demo ausprobieren, aus beiden Perspektiven.
Was als Nächstes getestet und weiterentwickelt wird
- Mit Kund:innen und Dienstleistern testen, ob die Statusbezeichnungen und Übergänge verständlich sind.
- Eine eigene Übersicht für Dienstleister mit allen Anfragen und Projekten prüfen.
- Benachrichtigungen bei neuen Anfragen oder Nachrichten gibt es noch nicht, Nachrichten aktualisieren sich beim Neuladen.
- Bilder, Preisstufen und Bewertungen für Dienstleister vorsehen; die Karten sind dafür vorbereitet.
EventMatrix