Projekte / UX/UI Design / banda ✕

Mehr Gemeinschaft, weniger Zusatzarbeit.

Ehrenamtliche in Santa Fe haben wenig Zeit und wenige Ressourcen. banda hilft ihnen, Workshops vorzubereiten, zu koordinieren und zu teilen, ohne zusätzlichen Aufwand.

Projektart
Mobile Web-App (PWA) · Neues Produkt
Kontext
Einzelprojekt · UX/UI Design, Mediadesign Hochschule · 2 Monate · 2026
Rolle
UX/UI Designerin, von Anfang bis Ende
Tools
Figma · Miro
Screens der App banda auf Smartphones, mit den illustrierten Maskottchen
  • 6 Research-Themen → 4 Designprinzipien
  • 5 Produktbereiche → 3 Kern-Flows als Prototyp

01Überblick

banda ist eine mobile Web-App für Ehrenamtliche in sozialen Einrichtungen in Santa Fe, Argentinien. Neben einer Nachmittagsmahlzeit (merienda) bieten diese Einrichtungen Workshops an, in denen Ehrenamtliche Zeit und Aktivitäten mit Kindern, Jugendlichen und Erwachsenen teilen. banda bietet ihnen fertige Aktivitätsideen, Koordination und einen gemeinsamen Raum zum Erfahrungsaustausch. Der Name kommt aus dem argentinischen Spanisch: „banda“ bedeutet „deine Gruppe, deine Leute“.

02Kontext & Research

Der Kontext

In der Stadt Santa Fe versorgen 164 Gemeinschaftsküchen 28.922 Menschen (offizielle Liste der Stadt). Neben dem Essen bieten viele Workshops in Handwerk, Sport und Kultur an, fast immer geleitet von Ehrenamtlichen mit sehr wenig Geld, Material oder Stauraum.

Wie alles begann

banda baut auf meiner Forschung an der Universidad Nacional del Litoral auf (Cientibeca-Stipendium, 2017–2018). Ich arbeitete mit La Funda, einer Stiftung im Viertel Chalet mit mehr als 20 Ehrenamtlichen und rund 75 Kindern. Ziel dieser Forschung war es, eine Erfahrung aus dem Industriedesign heraus vorzuschlagen, deshalb wurde die Idee einer gemeinsamen Plattform nicht weiterentwickelt. Mit banda habe ich daraus ein Produkt gemacht.

Methoden

  • Neuauswertung meines Interviews mit der Koordinatorin von La Funda
  • Umfrage mit 10 Ehrenamtlichen: verfügbare Zeit, Umgang mit fehlendem Material, Einfluss von Themen wie Armut
  • Aktuelle Kontextdaten zum Ehrenamt in Argentinien
  • Empathy Map und 3 Personas

Personas

Porträt von Lucía
Lucía, 34Koordinatorin

“Wir geben keine Workshops, wir machen sie gemeinsam mit den Kindern.”

Leitet 20 Ehrenamtliche. Braucht einen Überblick über das Material und verlässliche Kommunikation.

Porträt von Sofía und Tomás
Sofía & Tomás, 21 / 24Studierende

“Ich helfe ein paar Stunden pro Woche, wann immer ich neben dem Studium Zeit habe.”

Brauchen flexible Zeiten und klare Informationen.

Porträt von Marta
Marta, 58Im Ruhestand

“Meine Kinder sind erwachsen, jetzt habe ich Zeit, etwas für andere zu tun.”

Braucht einfache, große Bedienelemente und klare Anleitungen.

Empathy Map

Die Koordinatorin ist der Engpass: Alles hängt von ihrem Gedächtnis ab. Deshalb habe ich bei ihr angefangen. Wenn Ehrenamtliche den Plan, das Material und das Tagesthema selbst finden, wird sie entlastet.

Empathy Map der Koordinatorin Lucía: denkt und fühlt, hört, sieht, sagt und tut, Pains, Gains und Ursache

03Insights

Ich habe die Ergebnisse in sechs Themen gruppiert. Jedes führte zu einer zentralen Erkenntnis.

  1. 1Workshop-PlanungDie Wochenstruktur gibt es schon. Was fehlt, sind fertige Inhalte für jeden Tag.
  2. 2MaterialWissen und Material hängen vom Gedächtnis einer Person ab. Ein gemeinsames System würde Stabilität schaffen.
  3. 3Koordination der EhrenamtlichenEhrenamtliche sind engagiert, aber strukturell unzuverlässig. Die Lösung ist flexible Koordination, nicht mehr Verpflichtung.
  4. 4WissensaustauschDie Einrichtungen lösen dieselben Probleme jede für sich. Das Interesse am Austausch muss noch mit weiteren Interviews bestätigt werden.
  5. 5Schwierige ThemenEhrenamtliche ohne pädagogische Ausbildung nutzen schon Filme und Zeichnungen als Gesprächseinstieg, aber ihnen fehlen Werkzeuge für das Gespräch selbst.
  6. 6SpendenDer Geldmangel ist strukturell, aber wie die Einrichtungen damit umgehen (etwa bei einer fairen Verteilung), können sie voneinander lernen.

04Definieren

Vier Designprinzipien

  1. 1Wenig ZeitJede Aktion muss schnell gehen.
  2. 2Keine VerpflichtungDie App soll motivieren, nicht unter Druck setzen.
  3. 3Keine KonflikteEs gibt keinen offenen Chat.
  4. 4Menschliche WärmeDie App soll sich warm und freundlich anfühlen.

Umfang

Das vollständige Produkt hat zwei Rollen (Koordination und Ehrenamt) und fünf Bereiche. In diesem zweimonatigen Projekt habe ich mich auf die Ansicht der Ehrenamtlichen und ihre drei wichtigsten User Flows konzentriert. Die Ansicht für die Koordination ist geplant.

05Informationsarchitektur

Die Sitemap umfasst fünf Bereiche: Heute, Workshops, Profil, Erfahrungen und Material. Ich habe sie für beide Rollen im Detail ausgearbeitet, aber das Projekt wurde für zwei Monate zu groß. Deshalb habe ich nur die markierten Bereiche als Prototyp umgesetzt.

Sitemap von banda: Start, Login und fünf Bereiche, Heute und Workshops als Prototyp markiert

User Flows

  1. 1Die heutige Aktivität auswählen
  2. 2Ein Workshop-Ergebnis festhalten
  3. 3Einen Workshop erstellen und zur Prüfung einreichen
Die drei User Flows Schritt für Schritt, mit Entscheidungen und alternativen Wegen

06Design

Wichtige Entscheidungen

Eine Progressive Web App statt einer nativen App
Günstiger in Entwicklung und Pflege als eine native App, was für gemeinnützige Einrichtungen wichtig ist. Geteilt über einen Link auf der Website der Stadt, ohne Download: eine niedrigere Hürde für Ehrenamtliche wie Marta. In den Einrichtungen gibt es oft kein Internet, deshalb nutzen Ehrenamtliche die App unterwegs oder zu Hause.
Fokus auf die Ehrenamtlichen, gebaut für die Gemeinschaft
Jede Funktion unterstützt die einzelne Person und verbindet sie mit anderen.
Klare Workshop-Status
Entwurf, In Diskussion und Freigegeben: So weiß jede:r, wo ein Workshop steht. Ehrenamtliche können unfertige Ideen als Entwurf speichern.
Kein offener Chat
Vertrauliche Notizen sieht nur das Koordinationsteam.

Design System

Von Grund auf entwickelt und als Developer Handoff dokumentiert.

  • Farben: Salbeigrün als Primärfarbe, Terrakotta als Sekundärfarbe und ein Rotorange als Akzent, jeweils in einer hellen, mittleren und dunklen Stufe, dazu Statusfarben und warme Neutraltöne.
  • Typografie: Poppins für Überschriften, Lato für Fließtext und UI.
  • Abstände auf 4-px-Basis, 5 Elevation-Stufen, Layout-Grid für Mobile, Tablet und Desktop.
  • Komponenten mit allen Zuständen: Buttons, Cards, Status-Tags, Formulare, Navigation.
Überblick über das Design System von banda: Farben, Typografie und Komponenten

Maskottchen

Eine Familie von Figuren, die ich illustriert habe, inspiriert von der Tierwelt am Fluss Paraná rund um Santa Fe: ein Wasserschwein (Gemeinschaft), ein Breitschnauzenkaiman (Schutz und Fürsorge) und ein Hornero, der Vogel, der sein Nest aus Lehm baut (Arbeit und Zuhause). Sie erscheinen nur in emotionalen Momenten, etwa auf Erfolgs- und Danke-Screens.

Die drei Maskottchen: ein Wasserschwein, ein Kaiman und ein Hornero

07Finale Lösung

  1. 01Die heutige Aktivität auswählen

    Mit wenigen Taps eine fertige Aktivität für den heutigen Workshop auswählen.

  2. 02Ein Workshop-Ergebnis festhalten

    Festhalten, wie der Workshop gelaufen ist, damit die nächste Person darauf aufbauen kann.

  3. 03Einen Workshop erstellen und zur Prüfung einreichen

    Eine Idee als Entwurf speichern und dem Koordinationsteam zur Freigabe schicken.

Die Fotos im Prototyp sind KI-generierte Platzhalter und werden durch echte Fotos der Einrichtungen ersetzt.

08Nächste Schritte & Learnings

Nächste Schritte

  • Usability-Tests mit Ehrenamtlichen aus gemeinnützigen Einrichtungen in Santa Fe, beginnend mit Martas Profil
  • Die Ansicht für die Koordination gestalten
  • Das Interesse am Austausch zwischen Einrichtungen prüfen
  • Die Bereiche Material und Erfahrungen umsetzen

Was ich gelernt habe

Die Rückkehr zu meiner Forschung von vor Jahren hat mir gezeigt, wie sehr eine solide Research-Basis spätere Entscheidungen erleichtert und wie sich Bedürfnisse mit der Zeit verändern. Ein Design System von Grund auf zu entwickeln, hat mich gelehrt, von Anfang an in wiederverwendbaren Komponenten zu denken. Und das Gestalten für Menschen zwischen Studium und Ruhestand hat mir gezeigt, dass die beste Entscheidung manchmal das ist, was man weglässt, wie einen offenen Chat.

Verbundenes Projekt · Industriedesign & Forschung Forschungsprojekt Cientibeca

Wo banda begann: Forschung mit Ehrenamtlichen in Santa Fe, 2017–2018

Zur Forschungs-Case-Study →