In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
UX_Dokumentation
Im Laufe dieses Projektes wurde ein Prototyp einer interaktiven Touchanwendung für Weltläden entwickelt. Mithilfe dieser Anwendung ist es möglich, sich anschaulich über Weltläden im Allgemeinen und die dort verkauften Produkte im Detail zu informieren. Bei der Entwicklung des Prototyps kamen grundlegende Methoden des UX-Designs zum Einsatz.
Erstes Brainstorming
- https://sirplus.de/
- https://www.toogoodtogo.com/de/about-us
-> Ich habe Too Good To Go im weiteren Verlauf noch weiter verfolgt,
dann aber verworfen, da sie alle Ideen, die ich hatte, schon
umgesetzt hatten.
- https://www.forestgum.de/
- https://cupverde.coffee/?srsltid=AfmBOoq-0G3R-hLiIg-c3cTc5QbwSNYB9Xtqq5Q11dPQX0OMvgqElCWW
- https://got-bag.com/
- https://www.lush.com/de/de
3 nachhaltige Unternehmen
3 Potenziale für den Weltladen
Idee: Interaktive Touch-Anwendung
Eine interaktive Informationsstation informiert Besucherinnen und Besucher über die Fairness-Aspekte der Produkte im Weltladen – auf verständliche und visuelle Weise. Sie entlastet das oft allein arbeitende, ehrenamtliche Personal, da Informationen zu Herkunft, Produktion und Siegeln nicht mehr erfragt werden müssen. Gleichzeitig stärkt sie den Bildungsauftrag der Weltläden, modernisiert deren Image und macht das Einkaufserlebnis interessanter. Durch ihren mobilen Einsatz eignet sie sich auch für Schulen und Veranstaltungen.
Bestandteile
- Siegel-Check
- interaktive Weltkarte
- Produkt-Explorer
- verschiedene Themenbereiche / Lernpfade
- Faktenwand
Why: Warum ist euer Thema relevant? Welchen Sinn oder Wert wollt ihr schaffen?
Viele KundInnen wissen nicht, warum die Produkte im Weltladen fair sind. Informationen zu Herkunft, Produktion und Siegeln sind oft schwer zugänglich, und das Personal kann nicht immer Auskunft geben.
Die Anwendung soll Transparenz schaffen, das Bewusstsein für nachhaltigen Konsum stärken und Fairness im Handel sichtbar und verständlich machen. Damit leistet sie einen Beitrag zum Bildungsauftrag der Weltläden.
How: Wie wollt ihr das erreichen (Gestaltungsansatz, Prinzip, Haltung)
Durch eine intuitive, visuell ansprechende und interaktive Informationsgestaltung.
Kurze, verständliche Inhalte und emotionales Storytelling vermitteln Wissen, das sowohl für EinsteigerInnen als auch für bereits informierte KundInnen geeignet ist.
What: Was plant ihr konkret zu entwickeln (Website, Plattform, App, Service, Anwendung)?
Eine interaktive Touch-Anwendung (Web-App), die im Weltladen, bei Veranstaltungen und in Schulen eingesetzt werden kann, um BesucherInnen anschaulich über Fairtrade-Produkte und deren Hintergründe zu informieren.
Zielgruppe
Im Experteninterview habe ich erfahren, dass im Weltladen hauptsächlich KundInnen im Alter von 26 bis 60 Jahren einkaufen. Dabei handelt es sich vorwiegend um Stammkunden. Als potenzielle Neukunden würde ich die Altersspanne von 18 bis 25 Jahren hinzuzählen. Zudem stellt sich die Frage, ob die Zielgruppe wirklich bei 60 Jahren endet.
Allgemein würde ich meine Zielgruppe als sehr breit beschreiben, den Fokus aber auf potenzielle Neukunden legen.
Sinus-Milieus
Weiter unten habe ich drei Personas formuliert. Sie lassen sich dem „Neo-Ökologischen Milieu” und dem „Postmateriellen Milieu„ zuordnen.
Daraus schließe ich, dass sich der ältere Teil der Zielgruppe eher dem „Postmateriellen Milieu” und der jüngere Teil dem „Neo-ökologischen Milieu” zuordnen lässt.
Research zum Weltladen
1. Welche digitalen Angebote oder Prozesse gibt es bereits?
- Website des Weltladens Halle (Saale)
-> Informiert über Sortiment, Fairtrade-Prinzipien & Veranstaltungen,
aber ohne interaktive Elemente
- Social Media (Facebook, Instagram)
-> Beiträge zu neuen Produkten, Aktionen & Bildungsarbeit
- Weltladen-Dachverband
-> Bietet überregionale Infos, Bildungs-Materialien & Kampagnen
online, jedoch nicht lokal oder produktspezifisch auf den Laden
angepasst
- digitale Fairtrade-Angebote allgemein
-> einige Fairtrade-Organisationen (z. B. GEPA, El Puente) zeigen auf
ihren Websites Produktgeschichten & ProduzentInnen-Porträts, meist
außerhalb des konkreten Verkaufskontexts
- im Laden
-> bisher keine digitalen Informationsstationen oder Touchpoints
-> Informationsvermittlung erfolgt ausschließlich über persönliche
Beratung, Plakate & Produktverpackungen
2. Wo liegen Schwächen, Lücken oder Chancen für Verbesserung oder Erweiterung?
- Informationslücke im Laden
-> KundInnen erfahren selten spontan etwas über Herkunft oder soziale
Wirkung der Produkte
- Zeitmangel bei Personal
-> VerkäuferInnen können während des Ladendienstes nicht immer alle
Fragen ausführlich beantworte
- fehlende Verbindung von Online- und Offline-Erlebnis
-> die digitale Kommunikation (Website, Social Media) ist vom
Einkaufserlebnis vor Ort getrennt
- Chancen:
- digitale Touch-Anwendung kann Transparenz schaffen &
Bildungsauftrag unterstützen
- Möglichkeit zur Entlastung des Personals
- niedrigschwelliger Zugang zu Informationen über Fairness, Herkunft,
Nachhaltigkeit
- Modernisierung des Markenauftritts des Weltladens
-> jüngere Zielgruppen ansprechen
- erweiterbar für Workshops / Schulprojekte
3. Welche NutzerInnen oder Zielgruppen sind betroffen?
- Hauptzielgruppe = KundInnen im Laden
-> interessiert an nachhaltigem, fairem Konsum, oft mit
Bildungsinteresse
-> Potenziell neue KundInnen
-> StammkundInnen
- Lehrkräfte / Schulgruppen
-> Workshops, die der Weltladen für Schulen anbietet
- Ehrenamtliche / VerkäuferInnen
-> Profitieren von Unterstützung durch digitale Erklärhilfen
- ProduzentInnen (indirekt)
-> ihre Geschichten & Perspektiven werden sichtbarer vermittelt
Allgemeine Recherche zum Weltladen
Benutzerumfrage
Um herauszufinden, wie potenzielle Kunden eine solche Anwendung finden würden und welche Informationen bzw. welchen Aufbau sie sich wünschen würden, habe ich eine Benutzerumfrage durchgeführt.
An der Umfrage haben 26 Personen teilgenommen (04.11.2025). Folgende Erkenntnisse habe ich daraus gewonnen:
- die meisten gehen im Discounter einkaufen (egal wo sie wohnen)
--> niemand geht in Bioläden einkaufen
- Personen die in Stadt / eher städtisch wohnen gehen eher auf
Wochenmärkte / bei regionalen Anbietern einkaufen, als Personen die
ländlich wohnen
- die meisten stehen Fairtrade beim Einkaufen neutral gegenüber
--> mit einer leichten Tendenz Richtung wichtig
- die meisten informieren sich auf der Verpackung über Produkte
--> danach Social Media & gar nicht
- viele schätzen an kleinen Geschäften, die Nachhaltigen Produkte & die
Atmosphäre
- die meisten finden eine digitale Informationsstation sehr interessant &
nützlich
- gewünschte Informationen: Herkunft & Produktionsbedingungen,
Vergleich mit konventionellen Produkten,
ProduzentInnen,
Fairtrade-Siegel
- Gestaltung: kurze & leicht verständliche Texte, Bilder, Illustrationen,
interaktive Karte
- Aufbau: Produkte auswählen, Übersicht typischer Siegel, interaktive
Weltkarte, verschiedene Themenbereiche
- Wünsche: - Produkte nach Allergien filtern
- Beschreibung, wo im Laden Produkt zu finden ist
Experteninterview
Außerdem habe ich ein Experteninterview mit einem Mitarbeiter des Weltladens geführt. Leider konnte ich das Gespräch nicht aufnehmen, weshalb ich nur handschriftliche Notizen habe. Diese habe ich zu Hause noch einmal ordentlich aufgeschrieben.
Erkenntnisse:
- Ziel: Umsetzung der 10 Grundsätze des Fairen Handels
- Kundschaft: vor allem Stammkunden zwischen 26 & 60 Jahren
- Neukunden sind seltener & benötigen mehr Erklärung
- Ladenatmosphäre: ruhig, persönlicher Umgang, viele bekannte
Gesichter
- Stammkunden bereits gut informiert
- Neukunden häufig überfordert
- kein Mangel an Informationen, aber Zeitproblem bei großem Andrang
- Häufige Fragen: Herkunftsland, Kaffeesorten, Schokoladensorten,
Zertifizierungen
- Besonders gefragt: faire Schokolade (fairafric) & Mangoprodukte (PREDA,
Philippinen)
- Idee grundsätzlich interessant, aber müsste getestet werden
- Momentan: Informationsbedarf wird über Computerrecherche im Laden
gedeckt
- Anwendung wäre zusätzlicher Mehrwert, wenn sie kompakt &
informativ ist
- Herkunft, Kooperative, Zusammensetzung, Qualitätsparameter
- Darstellung: Texte, Fotos, Zitate von ProduzentInnen
- Fokus auf kurze, verständliche Informationen
- Barrierefreiheit & einfache Bedienung
- Design des Weltladen-Dachverbands für Wiedererkennung empfohlen
- Platzierung: nahe der Bildungsecke, aber kompakt (Laden ist klein)
Persona 1
Jonas Becker, 23, Student
--> Neukunde im Weltladen
Persona 2
Maria Schneider, 62, Gymnasiallehrerin
--> Stammkundin im Weltladen
Persona 3
Wolfgang Würl, 69, Rentner
--> ehrenamtlicher Mitarbeiter im Weltladen (Verkäufer)
Wolfgang Würl (Verkäufer)
Die folgende User Journey bezieht sich darauf, dass Wolfgang einer Neukundin, die den Weltladen zum ersten Mal betritt, mithilfe der Anwendung alle relevanten Informationen vermittelt.
Maria Schneider (Stammkundin)
Das folgende User Journey bezieht sich darauf, dass Maria ein neues Produkt im Weltladen entdeckt. Da die einzige Verkäuferin ein Beratungsgespräch führt, benutzt Maria die Anwendung, um ihre Fragen zu beantworten.
Wolfgang Würl (Verkäufer)
Maria Schneider (Stammkundin)
Handgezeichnete Wireframes
Diese Wireframes basieren auf den User Journeys des Verkäufers und der Stammkundin.
Wireframes in Figma
Anschließend habe ich die Wireframes in Figma übertragen.
Zudem habe ich die handgezeichneten Wireframes in Figma klickbar gemacht. Des Weiteren habe ich einen High-Fidelity-Prototypen in Figma erstellt.
Gesamter-Prototype:
©Laura Beier
©Laura Beier
Dadurch war es möglich, sich durch die jeweilige User Journey zu klicken und eventuelle Logikfehler anzupassen.
User Journey Verkäufer:
©Laura Beier
©Laura Beier
User Journey Stammkundin:
©Laura Beier
©Laura Beier
Ich habe vier verschiedene Moodboards erstellt. Das erste Moodboard bezieht sich auf den Stil des Weltladen-Dachverbands. Das zweite Moodboard zeigt einen Organic-Shape-Stil, der vorwiegend mit organischen Farbflächen arbeitet. Das dritte Moodboard bezieht sich auf einen topografischen Linienstil, bei dem Karten mit Linien dargestellt werden. Das vierte Moodboard schließlich zeigt einen Glas-Stil, bei dem Elemente transparent wie Glas sind. Dies soll die Transparenz der Produktionsbedingungen der im Weltladen angebotenen Produkte widerspiegeln.
Da sich alle Moodboards farblich kaum unterscheiden, habe ich zusätzlich ein Moodboard mit verschiedenen Farbpaletten erstellt.
Ich habe alle vier Moodboards umgesetzt.
Mir fielen die Weltladen-Stilvarianten am leichtesten, danach die Global-Contur-Variante. Bei Letzterer hatte ich Schwierigkeiten, den Stil im Verlauf einer längeren Seite wieder aufzugreifen.
Die „Organic Shapes“-Variante finde ich so, wie sie gerade ist, zu viel. Vielleicht wird es besser, wenn man die braunen Rahmen um die Bilder weglässt. Dann bin ich mir jedoch unsicher, ob der Stil nicht verloren geht.
Mit der Glas-Variante bin ich gar nicht zurechtgekommen. Damit dieser Effekt gut wirkt, fehlen mir im Hintergrund Elemente. Zwar wirkt der Effekt, wenn man ein Bild in den Hintergrund setzt, aber ich sehe darin keinen Mehrwert.
Ich habe diese Variante dann trotzdem noch einmal verfeinert, wodurch sie besser wurde, aber immer noch nicht gut genug, sodass ich sie schließlich verworfen habe.
Schlussendlich habe ich dann mit der Global Kontur Variante weiter gemacht. Außerdem habe ich verschiedene Varianten ausprobiert wie ich Produkte in einer Produktliste darstellen kann.
Umsetzung des Designs
Aktueller Stand 08.01.2026
Zunächst habe ich damit begonnen, den High-Fidelity-Prototyp im ausgewählten Global-Kontur-Stil umzusetzen.
Aktueller Stand 15.01.2026
Neben dem Ergänzen fehlender Unterseiten und der Überarbeitung der bisherigen Seiten habe ich zwei Varianten für die Startseite ausprobiert. Mit diesen bin ich jedoch nicht wirklich zufrieden.
Aktueller Stand 21.01.2026
Ich habe vier weitere Varianten für die Seitengliederung ausprobiert, da die rechtsseitige Positionierung etwas verwirrend sein kann. Allerdings stört es das Design der Unterseiten etwas, wenn ich die Seitengliederung jetzt links platziere.
Außerdem habe ich die Grundlogik der Anwendung noch einmal geändert. Der Punkt „Siegel” wurde aus der Navigation entfernt und durch den Punkt „Herkunft” ersetzt. Die Unterseite „Siegel” ist jetzt nur noch über die Detailseite der Produktkategorien bzw. Produkte zu erreichen, da sie nicht so wichtig ist. Unter dem Punkt „Herkunft” findet man eine Weltkarte, auf der die ProduzentInnen eingetragen sind. Über diese gelangt man dann zur Detailseite der Produktkategorien.
©Laura Beier
©Laura Beier
©Laura Beier
Neben der Verwendung der Anwendung im Weltladen soll diese langfristig auch als App auf dem Handy verfügbar sein und über einen Online-Shop verfügen. Dafür habe ich einige Screens erstellt, um einen Eindruck davon zu bekommen, wie das aussehen könnte.
Screencast:
©Laura Beier
Ein Projekt von
Laura Beier
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
User-Experience-DesignEntstehungszeitraum
Wintersemester 2025 / 2026