UX/UI-Fallstudie · Gemeinnützige Plattform · Live-Projekt
SAM

Eine Plattform für den Austausch und die Verwaltung von Hilfsgütern zwischen Hilfsorganisationen — gemeinsam mit einem Team aus 11 Personen für einen realen Kunden entwickelt und heute live im Web.

Meine Rolle
UI-Design, Video, High-Fidelity
Dauer
4 Monate
Team
11 Personen
Kunde
SAM e.V.
Tools
Figma, Slack, After Effects
SAM-Plattform

Problem

Hilfsorganisationen tauschen fortlaufend Hilfsgüter aus — doch die Koordination erfolgt über verstreute Telefonate, E-Mails und Tabellen. Gemeinnützige Organisationen verlieren den Überblick darüber, wer was benötigt, Anfragen gehen verloren und dringend benötigte Güter bleiben ungenutzt in Lagern, während andere Organisationen genau nach diesen Artikeln suchen.

Lösung

SAM ist eine digitale Plattform, auf der gemeinnützige Organisationen Artikel einstellen, eingehende Anfragen bearbeiten und mit Partnerorganisationen chatten können — alles an einem Ort. Mehrere Artikel lassen sich zu Paketen bündeln und die Logistik standortübergreifend koordinieren. So wird der Austausch von Hilfsgütern schnell, transparent und strukturiert.

SAM Profile
SAM Marktplatz
SAM Chat
SAM Merkliste
Ideenfindung

Auf Grundlage der Recherche-Erkenntnisse legten wir fest, wie sich Organisationen durch die Plattform bewegen — vom ersten Kontakt bis zu einem erfolgreichen Austausch — und überführten dies in eine klare Produktstruktur.

User flow

Wir haben die zentralen Abläufe einer Hilfsorganisation auf der Plattform abgebildet — damit jeder Schritt einen klaren Zweck erfüllt und es keine Sackgassen gibt.

SAM-Nutzerablauf 1

Nutzerablauf — 01

SAM-Nutzerablauf 2

Nutzerablauf — 02

Zum Erkunden wischen →

Informationsarchitektur

In einem Team-Workshop bündelten wir alle Funktionen in fünf Kernbereiche — Dashboard, Hilfsgüter-Marktplatz, Infopoint, Netzwerk und Konto. Funktionen ohne Beitrag zum eigentlichen Austausch haben wir entfernt, damit die Plattform fokussiert bleibt.

Team-Workshop zur Strukturierung der Plattformfunktionen in fünf Kernbereiche

Zum Erkunden wischen →

Feature-Mapping — Team-Workshop

Design

Nachdem die Struktur feststand, überführten wir die fünf Kernbereiche in Screens — zunächst als Wireframes, um Layout und Hierarchie zu testen, bevor wir das finale UI ausarbeiteten.

Wireframes

Für die zentralen Bereiche — Dashboard, Marktplatz, Chat und Konto — entwickelten wir Mid-Fidelity-Wireframes. Dabei standen Klarheit und ein einfacher Austauschprozess im Fokus. Scrolle innerhalb der einzelnen Screens, um die vollständigen Seiten zu erkunden.

SAM-Profil
SAM-Marktplatz
SAM-Chat
SAM-Merkliste
SAM-Wireframe

Styleguide

Um ein konsistentes Design im Team sicherzustellen, definierten wir einen gemeinsamen Styleguide — Farben, Typografie, Abstände und UI-Komponenten. Die Farbpalette basiert auf ruhigen, vertrauenswürdigen Tönen, die zum Non-Profit-Kontext passen, während eine klare Typografie komplexe Inhalte gut lesbar macht. Jedes Teammitglied gestaltete nach denselben Regeln, sodass sich die Plattform wie ein Produkt anfühlt — nicht wie die Arbeit von elf verschiedenen Personen.

SAM-Styleguide — Farben, Typografie und UI-Komponenten

Styleguide — Farben, Typografie & Komponenten

Prototype

We built a clickable prototype in Figma covering the core flows of the platform — browsing the marketplace, creating a request and getting in contact with another organization. Try it yourself below.

Tests

Wir testeten die Plattform in mehreren moderierten Usability-Test-Runden mit Dashboard, Marktplatz und Community. Zwischen den Runden überarbeiteten wir, was nicht funktionierte — die neuen Marktplatzanzeigen wurden in den späteren Tests deutlich besser verstanden als die erste Version.

01 — Dashboard

Formulierungen sorgten für Unsicherheit

Der Zweck der Plattform war klar und das Dashboard wirkte stimmig — doch Bezeichnungen wie „Deine Anfragen“ und „Deine Anzeigen“ verwirrten Nutzer:innen. Suchanfragen wurden sogar vollständig übersehen.

→ Wir präzisierten die Begriffe und verschoben Inhalte wie News in den Community-Bereich, wo Nutzer:innen sie erwarteten.

02 — Marktplatz

Filter ja — aber verständlicher

Filter wurden begrüßt, einzelne Details warfen jedoch Fragen auf: Entfernung von welchem Ort? Wie viele Artikel passen auf eine Palette? Nutzer:innen vermissten außerdem den Preis auf den Anzeigenkarten. Das „Verifiziert“-Badge erwies sich als entscheidend für Vertrauen zwischen Organisationen.

→ Wir gestalteten die Anzeigen zwischen den Test-Runden neu. Die neue Version wurde deutlich besser verstanden; außerdem machten wir den Anfrage-Button sichtbarer.

03 — Community

Weniger Überladung, mehr Identität

Der erste Eindruck war „zu viel, zu unübersichtlich“ — gleichzeitig fehlten den Organisationsprofilen genau die Informationen, die Vertrauen schaffen: Website, Ansprechperson, Fokus und Standorte. Offizielle Berichte wurden als Nachweis der Legitimität wahrgenommen.

→ Wir reduzierten die Startseite und ergänzten die Profile um die fehlenden Vertrauenssignale.

„Alle Testpersonen wollten, dass SAM Realität wird — viele sagten, sie würden die Plattform mehrmals pro Woche nutzen.“

Gesamtergebnis — eine klare Marktlücke

Das Ergebnis

SAM ist live — eine echte Plattform für einen realen Kunden. Im Rahmen des Projekts produzierten wir außerdem ein Präsentationsvideo, das SAM potenziellen Partnerorganisationen vorstellt. Sieh es dir unten an und erkunde anschließend die Plattform selbst.

hello-sam.eu besuchen

Live-Plattform — reales Kundenprojekt