1. Projektkontext und Zielsetzung

1.1 Situation im Jahr 2030

Wie sieht eine Banking-App im Jahr 2030 aus?

Unsere Ausgangsfrage lautete: Wird es in Zukunft überhaupt noch einzelne Apps geben oder steuert ein intelligenter Assistent alle Funktionen zentral?

Dieses Projekt ist eine spekulative Designarbeit, die sich mit neuen Formen des digitalen Bankings im Jahr 2030 beschäftigt.
Es simuliert eine mögliche Zukunft, in der Menschen und KI-Assistenten gemeinsam eine neue, sichere und menschlichere Nutzererfahrung im Bereich Finanzen gestalten.

Für viele Menschen, insbesondere ältere Personen oder Menschen mit Einschränkungen, stellen Smartphones und Apps nach wie vor eine Einstiegshürde dar.
Deshalb stellt sich die Frage: Wie kann ein KI-Assistent diese Nutzer*innen sinnvoll im Alltag unterstützen?

Die Idee: Nicht mehr die einzelne App steht im Mittelpunkt, sondern ein digitaler Assistent, der alle Funktionen intelligent vernetzt und situationsabhängig passende Vorschläge macht.
Anstelle aktiver Suche reagiert der Mensch auf passende Empfehlungen – bleibt dabei jedoch selbstbestimmt.

1.2 Persona – Klaus

Der Protagonist dieser Simulation ist Klaus, 71 Jahre alt.
Er lebt seit über 40 Jahren in Brandenburg und war früher technischer Zeichner. Heute ist er im Ruhestand und engagiert sich im Heimatverein seiner Gemeinde.

Klaus ist traditionsverbunden, schätzt Generationengerechtigkeit und interessiert sich für seine regionale Umgebung.
In seiner Freizeit gärtnert er gerne, liest die Lokalzeitung und verbringt Zeit mit seinen Enkelkindern.

Technik nutzt er eher zurückhaltend, ist aber offen für digitale Lösungen, wenn sie ihm wirklich das Leben erleichtern.

1.3 Use Cases & Szenarien

Das Projekt simuliert drei Alltagssituationen, in denen der KI-Finanzassistent Klaus gezielt unterstützt:

(1) Geburtstagsüberweisung

Der Assistent erkennt den Geburtstag der Enkelin im Kalender und schlägt eine Überweisung mit Grußtext vor.

→ Use Case: Geld überweisen + Überweisung bestätigen

(2) Reisevorbereitung bei Aufregung

Anhand von Kalender- und Gesundheitsdaten erkennt der Assistent Stress vor einer Reise.

Er bietet Hilfe bei Notfallkontakten, Versicherungen und Budgetplanung an.

→ Use Case: Budget planen + Erinnerungen setzen

(3) Voice-Phishing erkennen und stoppen

Der Assistent erkennt hohen Stress durch Vitaldaten und warnt vor potenziellem Betrug.

Er hilft Klaus, die Situation einzuordnen und ruhig zu bleiben.

→ Use Case: Sicherheitswarnung + Entscheidungshilfe bei Betrugsverdacht

2. User Flow

Der User Flow orientiert sich an der Persona des Projekts Klaus und stellt ihn in den Mittelpunkt der Interaktion.

Ziel ist es, dass die Nutzer*innen der Simulations-Website in die Rolle von Klaus schlüpfen und die Szenarien aus seiner Perspektive erleben. So wird die Projektintention nicht nur kognitiv, sondern auch emotional und interaktiv erfahrbar.

2.1 Ablauf der Interaktion

Beim Besuch der Website startet die Interaktion mit einem Intro-Screen:

• Klaus’ Smartwatch vibriert.
• Eine Benachrichtigung erscheint auf seinem Smartphone.
• Eine erste Nachricht vom KI-Assistenten wird eingeblendet.
• Danach erfolgt die Weiterleitung zur Szenario-Auswahl.

2.2 Auswahlmöglichkeiten

Die Nutzer*innen können aus folgenden drei Szenarien wählen:

1. Geldüberweisung zum Geburtstag der Enkelin Anna
2. Reisebudget planen
3. Voice-Phishing erkennen und verhindern

2.3 Interaktive Entscheidung

Nach der Szenario-Auswahl sehen die Nutzer*innen ein Video, in dem Klaus mit dem KI-Assistenten interagiert.
Sie übernehmen die Rolle von Klaus und treffen Entscheidungen, die den weiteren Verlauf beeinflussen.

Beispiel:

Der Assistent fragt:
„Möchten Sie Anna zum Geburtstag Geld überweisen?“

Mögliche Antworten:

• Ja: Ein Video startet, in dem Klaus die Überweisung durchführt (inkl. Authentifizierung).
• Nein: Ein alternatives Video wird gezeigt. Klaus erklärt, dass er lieber persönlich ein Geschenk überreichen möchte.

2.4 Ziel des User Flows

Durch diesen interaktiven Aufbau erleben die Nutzer*innen das Projekt nicht als rein informative Präsentation, sondern als partizipatives Erlebnis.
Sie treffen eigene Entscheidungen und können dadurch die Projektidee intuitiv nachvollziehen.

3. Konzeptentwicklung

3.1 Anfang – Einzelprojekt (Ideenphase)

Die ersten Ideen im Einzelprojekt konzentrierten sich auf das Thema Barrierefreiheit.

Im Fokus stand:

• die Möglichkeit, die Schriftgröße individuell anzupassen,
  z. B. über Buttons oder eine Finger-Zoom-Geste
• ein personalisierbares Footer-Menü,
  bei dem Nutzer*innen nur die für sie relevanten Funktionen auswählen und anzeigen lassen können

Ziel: Die oft als komplex empfundene Struktur von Banking-Apps vereinfachen und die Einstiegshürde senken

3.2 Teamprojekt – erste Recherchen und Interviews

Im Teamprojekt lag der Fokus auf den Use Cases:

• Login
• Überweisung
• Authentifizierung

Diese wurden gewählt, weil sie für unsere Persona Klaus (71 Jahre) realistische, alltägliche Anwendungsfälle darstellen.
Da Klaus eher konservativ eingestellt ist, waren Vertrauen und einfache Bedienbarkeit zentrale Anforderungen.

Durchgeführte Recherchen:

• Tiefeninterviews mit:
  • einem 77 jährigen Mann
  • einer 48 jährigen Frau
• Gruppendiskussion mit ca. 7 Teilnehmenden

Erkenntnisse aus den Interviews:

• Nutzer*innen verwenden unterschiedliche Anmeldeverfahren
• Sicherheit wird oft höher bewertet als Schnelligkeit
• Sprachunterstützung könnte helfen, Unsicherheiten zu verringern

Basierend auf diesen Erkenntnissen entwickelte unser Team ein authentifizierungsbasiertes System,
das sich an Betrag und Empfänger der Überweisung orientiert:

Authentifizierungsstufen:

(1) Leicht

• kleine Beträge an Familie oder Freunde
  → Nur PIN-Eingabe erforderlich

(2) Mittel

• größere Beträge an bekannte Personen
  → PIN + Sicherheitsfrage

(3) Hoch

• unbekannte Empfänger oder Auslandsüberweisungen
  → PIN + Sicherheitsfrage + Selfie-Authentifizierung

3.3 Vertiefung – Einzelprojekt

Basierend auf diesen Erkenntnissen stellte sich die Frage:

Wie lassen sich die drei Themen Barrierefreiheit, Personalisierung und Authentifizierung in einem System vereinen?

Die Idee einer Sprachunterstützung durch einen KI-Assistenten erschien besonders geeignet,
um diese Aspekte zu kombinieren.

So entstand der Ansatz, das Projekt um einen intelligenten digitalen Assistenten zu erweitern,
der:

• personalisiert reagiert
• bei Bedarf unterstützt
• eine natürliche, dialogbasierte Interaktion ermöglicht

4. Designsystem

Ein zentrales Ziel dieses Projekts war die Frage:

„Wie kann ein KI-Assistent und insbesondere seine Stimme visuell dargestellt werden?“

Diese Frage führte zur Entwicklung eines Designsystems, das Form, Farbe, Typografie und Stimme in einem konsistenten visuellen und auditiven System vereint.

4.1 Form

Die Form des KI-Assistenten basiert auf einer Kugel (Sphäre), wie man sie aus Anwendungen wie Siri oder ChatGPT kennt.

Diese abstrakte Darstellung wurde bewusst gewählt, um eine allgemein verständliche Form zu schaffen, die nicht an ein bestimmtes Geschlecht, Alter oder Aussehen gebunden ist.

Um dem Nutzer zu signalisieren, ob der Assistent gerade spricht oder nicht, reagiert die Kugel auf die Frequenz der Stimme:

Sie verändert ihre Größe entsprechend den akustischen Schwingungen.
Dadurch entsteht ein direkter visueller Hinweis darauf, dass der Assistent aktiv ist – auch wenn gerade kein Ton zu hören ist.

4.2 Farbsystem

Farbe spielt in diesem Projekt eine entscheidende Rolle, da sie nicht nur der Orientierung dient, sondern auch emotionale Rückmeldungen gibt und Kontextinformationen visuell vermittelt.

• Im Normalzustand wurde ein neutrales Grün als Hauptfarbe verwendet.
  Grün wirkt ausgeglichen und signalisiert Sicherheit.
  In Kombination mit Blau, das Vertrauen vermittelt, entsteht ein ruhiges, neutrales Grundfarbschema, das dem Nutzer ein Gefühl von Stabilität gibt.

• Bei Warnungen oder sicherheitskritischen Situationen kam Rot zum Einsatz , eine klassische Signalfarbe, die sofortige Aufmerksamkeit erzeugt.

• In anderen Situationen analysiert der Assistent Gesundheitsdaten, Kalender oder den emotionalen Zustand des Nutzers und passt die Farbe basierend auf Farbtherapie an:
  (1) Bei Stress oder Aufregung → Blau- und Violetttöne, die beruhigend wirken.
  • Blau: Kühle, Rationalität, Konzentration
  • Violett: Meditation, innere Ruhe

  (2) Bei positiver Stimmung → Orange, Gelb, Magenta
  Diese Farben sind energetisch, leuchtend und unterstützen ein Gefühl von Lebendigkeit.

Diese Farbwahl verstärkt das emotionale Feedback und erzeugt den Eindruck, dass der Assistent mitfühlt und empathisch reagiert.

4.3 Typografie

Bei der Wahl der Schrift lag der Fokus auf Zugänglichkeit und Klarheit.

Verwendet wurde die Schriftart „Atkinson Hyperlegible“, die speziell für barrierefreie Lesbarkeit entwickelt wurde.

Sie unterscheidet deutlich ähnlich aussehende Zeichen, z. B.:

• Großbuchstabe „I“, Kleinbuchstabe „l“ (kleines L) und Zahl „1“

Für ältere Nutzer*innen oder Menschen mit eingeschränkter Sehkraft ist das ein wichtiger Vorteil, der Vertrauen und Orientierung stärkt.

Ein weiteres gestalterisches Mittel war der Einsatz von Großbuchstaben für betonte Aussagen.

Wenn der Assistent in einem bestimmten Tonfall spricht, z. B. energisch, deutlich oder beruhigend 
→ wird dieser Tonfall durch Großschreibung visuell hervorgehoben.

So erkennen Nutzer*innen auch ohne Ton den emotionalen Modus des Assistenten.

4.4 Stimme

Die Stimme des Assistenten wurde mithilfe der Plattform „ElevenLabs“ generiert, die Text-to-Speech mit emotionaler Modulation kombiniert.

In den Texten konnten bestimmte Befehle integriert werden, um:

• Tonhöhe
• Geschwindigkeit
• Emotionen
• Betonungen

gezielt zu steuern.

Der gestalterische Ausgangspunkt war die Frage:

„Wie würde ich selbst sprechen, wenn ich dieser Assistent wäre?“

• In freudigen oder leichten Momenten:
  → hellere, fröhlichere, rhythmischere Stimme

• In angespannten oder ernsten Situationen:
  → ruhigere, tiefere, langsamere Stimme für Vertrauen und Sicherheit

In vielen Fällen gelang es, die beabsichtigte Wirkung emotional stimmig umzusetzen.
Allerdings stieß ich auch an technische Grenzen – z. B. bei feiner emotionaler Abstufung.

Trotzdem ermöglichte diese Technologie eine überzeugende und empathische Kommunikation mit dem Assistenten.

5. Reflexion des Entwicklungsprozesses

Eine der größten Herausforderungen dieses Projekts bestand darin, wie man einen KI-Assistenten, insbesondere seine Stimme, visuell darstellen kann.

Design-Tools wie Figma oder Adobe XD sind hervorragend für statische oder klickbare Prototypen geeignet, bieten aber kaum Möglichkeiten, sprachliche Interaktionen realistisch abzubilden.

Vor allem Aspekte wie Stimmfarbe, Tonfall, Emotionen oder der dialogische Charakter eines Assistenten lassen sich in diesen Tools nicht überzeugend simulieren.
Daher kam ich zu dem Schluss, dass eine filmische Darstellung die geeignetste Methode wäre, um das Konzept umfassend und erfahrbar zu machen.

5.1 Videoproduktion

Nachdem die Entscheidung gefallen war, die Szenarien per Video zu präsentieren, stellte sich eine ganz praktische Frage:

Wie kann ich Sprecherstimmen und eine Figur wie Klaus, einen 71-jährigen deutschen Mann, realistisch darstellen?

Gerade als ausländische Designerin war dies eine erhebliche Hürde.
Durch intensive Recherche stieß ich jedoch auf mehrere KI-basierte Tools, die mir bei dieser Aufgabe wesentlich helfen konnten.

• Die Stimme des Erzählers bzw. Assistenten wurde mit der Plattform „ElevenLabs“ realisiert.
  Dort wählte ich aus zahlreichen Stimmmustern eine passende aus und ließ Texte per Text-to-Speech umwandeln.
  Für mich, die keinen direkten Zugang zu deutschsprachigen Senioren hatte, war dies eine äußerst hilfreiche Lösung.

• Die Darstellung der Figur „Klaus“ im Video wurde mit Hilfe der App PIKA umgesetzt, die mithilfe von KI Gesichter in Videos einfügt.

Beispielsweise bei Szenen, in denen Klaus ein Selfie zur Verifizierung macht oder einen Videoanruf mit seiner Tochter führt, filmte ich mich zunächst selbst und lud das Video in die App hoch.
Anschließend ersetzte die App mein Gesicht durch das von Klaus oder seiner Tochter – basierend auf vorher hochgeladenen Porträtbildern.

Mit diesen Materialien konnte ich in Adobe After Effects die finalen Videos erstellen – inklusive Schnitt, Animation und Effekten.

5.2 Entwicklung der Simulations-Website

Nach der Videoproduktion stellte sich die nächste konzeptionelle Frage:

Sollte man das Video nur passiv zeigen oder den Nutzer aktiv einbinden?

Natürlich hat ein linear aufgebautes Video den Vorteil, dass man bestimmte Inhalte gezielt hervorheben und die Wirkung stärker steuern kann.

Doch ich wollte eine überzeugendere, interaktivere Nutzererfahrung schaffen, bei der der Betrachter selbst Entscheidungen trifft.
Denn genau darum geht es in meinem Projekt: um die Interaktion zwischen Mensch und Technologie.

So entstand die Idee, eine kleine interaktive Videowebsite zu entwickeln – realisiert mit React.

• Die Seite wurde im Smartphone-Format gestaltet, damit sie auch am Desktop den Eindruck einer mobilen Anwendung vermittelt.
• Nutzer*innen wählen dort ein Szenario aus und treffen im Verlauf mehrere Entscheidungen als Klaus.
• Je nach Auswahl werden unterschiedliche Videos abgespielt, sodass eine individuelle, mitgestaltbare Erfahrung entsteht.

Diese Struktur soll zeigen:
Technologie ist nicht eindimensional – sie reagiert auf den Menschen und wird durch ihn mitgestaltet.

5.3 Untertitel-Strategie

Von Anfang an war klar, dass dieses Projekt für die Werkschau konzipiert wurde.

Da es auf solchen Ausstellungen nicht immer ruhig ist, musste ich davon ausgehen, dass viele Besucher*innen die Tonspur der Videos nicht gut hören können.

Daher ergänzte ich die Videos auf der Simulations-Website um Untertitel.
Diese sind jedoch nicht im Videoplayer selbst oder in der Ausstellungsversion zu sehen, sondern erscheinen nur für Online-Nutzer*innen, die die Website zu Hause aufrufen.

Die Untertitelstruktur ist folgendermaßen aufgebaut:

• Soundeffekte wurden in Klammern dargestellt und farblich vom gesprochenen Text unterschieden.
• Die Sprachinhalte des KI-Assistenten wurden nicht untertitelt, da diese bereits visuell auf dem Display erscheinen.
• Untertitel wurden nur für die Dialoge zwischen Klaus und seiner Tochter eingefügt, um sie auch bei lauter Umgebung verständlich zu machen.

Diese Lösung trägt dazu bei, die Inhalte auch in herausfordernden Ausstellungssituationen barrierefrei und zugänglich zu präsentieren –
ohne die ästhetische Wirkung der Videos zu beeinträchtigen.

6. Finaler Entwurf

Der finale Entwurf dieses Projekts ist eine interaktive Simulations-Website, die – wie im User Flow beschrieben – aufgebaut ist.

Die Seite beginnt mit einer Intro-Sequenz, führt zur Szenario-Auswahl und anschließend zum entsprechenden Story-Verlauf, je nachdem, welches Szenario die Nutzer*innen ausgewählt haben.

Während der Videosequenzen gibt es mehrere Entscheidungspunkte, an denen die Nutzer*innen aktiv zwischen verschiedenen Handlungsoptionen wählen können.

Abhängig von der getroffenen Auswahl wird das jeweils passende Video automatisch abgespielt.

Die Website wurde für mobile Nutzung optimiert, funktioniert aber auch auf dem Desktop im Smartphone-Format, um eine realitätsnahe Simulation zu ermöglichen.

Zugang zur Website:

URL:  https://2030future.netlify.app/

Ich empfehle besonders den Zugriff über den QR-Code, da das Projekt auf mobilen Geräten eine intensivere, immersivere Erfahrung bietet.

7. Fazit

Während der Abschlusspräsentation dieser Lehrveranstaltung erhielt ich nach der Vorstellung meiner Simulation eine interessante Frage:

„Wäre es nicht einfacher für die Nutzer*innen, einfach mit Ja oder Nein zu antworten?“
„Warum sollte eine KI den Menschen überhaupt überzeugen wollen?“

Diese Fragen waren für mich besonders bedeutsam, weil sie die grundlegende Frage aufwerfen, wie wir als Designer*innen künftig die Beziehung zwischen Mensch und Technologie gestalten wollen.

Ich habe mich selbst in diese Beziehung zwischen Nutzer*in und KI hineinversetzt.

Und ich stellte mir die Frage:

Antworte ich in Gesprächen mit anderen Menschen immer nur mit Ja oder Nein?
→ Nein.

Wenn ein Freund oder eine Freundin einen falschen Weg einschlägt, akzeptiere ich das einfach?
→ Nein, ich versuche, ihn oder sie zu überzeugen.

Künstliche Intelligenz wird sich weiterentwickeln und in der Zukunft wahrscheinlich noch viel differenzierter reagieren.

Doch wie sollen wir als Designer*innen mit dieser Entwicklung umgehen?

• Sollen wir diese Beziehung so einfach wie möglich gestalten – rein funktional, pragmatisch?
• Oder sollen wir sie bewusst komplex gestalten, wie eine menschliche Beziehung mit Emotionen, Missverständnissen, Überzeugungsarbeit?

Ich kann heute noch keine eindeutige Antwort darauf geben.
Aber ich bin mir sicher: Diese Fragen zu stellen ist bereits ein wertvoller und notwendiger Prozess.

Und zum Schluss möchte ich Ihnen eine Frage stellen:

Wenn Sie Designer*in wären, wie würden Sie die Beziehung zwischen Mensch und KI gestalten?