Projekt
Das Zentrum ist ein smarter Handspiegel, der als empathischer Impulsgeber die Nutzer*innen im Alltag begleitet ohne zu therapieren, zu bewerten oder zu überfordern.
Der Spiegel reagiert sensibel auf Sprache, Stimmung und Routinen. Er erkennt emotionale Zustände anhand von Tonfall und Ausdruck und bietet situationsabhängige Unterstützung, etwa durch Reflexionsfragen, beruhigende Atemübungen oder kleine, alltagstaugliche Impulse. re:mind ersetzt keine Therapie, sondern schafft einen niedrigschwelligen, jederzeit verfügbaren Reflexionsraum, der entlastet und zur Selbstwahrnehmung stärkt, frei von Wartezeiten, Stigmatisierung oder Diagnosen.
Prozess
Ideenentwicklung
Die Ideenentwicklung begann bei uns zunächst mit der Auseinandersetzung der aktuellen Megatrends. Besonders der Bereich Gesundheitswesen interessierte uns hier. Bei genaueren Überlegungen tauchte das Thema Selbstoptimierung immer öfter auf und erweckte unser Interesse.
Aufgrund von persönlichen Erfahrungen dachten wir sofort an das Thema Therapie und die damit verbundenen Hürden. Insbesondere das Thema KI und die immer größeren Möglichkeiten, die die Thematik mit sich bringt, wollten wir für unser Produkt diese Technologie mit aufgreifen.
Wir beschätigten uns auch sehr damit, wie unser Produkt letzendlich aussehen soll im Bezug darauf, ob es ein Wearable sein wird, eine Home-Station wie Alexa oder eine App.
Am Ende entschieden wir uns für die Thematik Selbstoptimierung, Therapie und wie KI das Ganze unterstützen kann.
KI in der Therapie
Die psychische Gesundheitsversorgung in Deutschland steht vor großen Herausforderungen. Steigende Fallzahlen, lange Wartezeiten und eine veraltete Bedarfsplanung führen zu Versorgungslücken, unter denen Patient*innen erheblich leiden.
Was sind die Chancen und Risiken, wenn KI ein fester Bestandteil in der psychotherapeutischen Versorgung wird?
Chancen
1. Verbesserter Zugang zur Versorgung
2. Prävention statt Reaktion
3. Kontinuierliche Begleitung
4. Entlastung des Versorgungssystems
5. Personalisierung von Interventionen
Risiken
1. Fehlende emotionale Tiefe
2. Kein Ersatz für menschliche Therapie
3. Datenschutz und ethische Bedenken
4. Risiko der Übertechnologisierung
5. Abhängigkeit und Fehleinschätzung
Konzept
Leitidee: Der Spiegel als Raum für Entwicklung
Die zentrale Idee: Ein Spiegel, der nicht das zeigt, was ist – sondern was werden kann. Das Leitmotiv: Eine Raupe sieht im Spiegel einen Schmetterling. Es steht sinnbildlich für selbstbestimmte Veränderung und persönliche Entwicklung. Wie in einer Therapie liegt der Fokus nicht auf Bewertung, sondern auf Potenzial. Die KI agiert als Spiegel innerer Prozesse.
Interaktion & Technologie
Die Interaktion erfolgt primär über Sprache: Der Spiegel erkennt Tonfall, Ausdruck und emotionale Signale. Über einfache visuelle Elemente lassen sich Themen oder Stimmungen auswählen, ohne kognitive Hürden oder technische Barrieren. Die KI reagiert kontextsensibel, mit Impulsen, Fragen oder Übungen, und respektiert auch die Entscheidung, nicht zu antworten. Stille ist erlaubt. Der Fokus liegt stets auf Entlastung, nicht auf Leistung.
Vertrauensvolle Mensch-KI-Beziehung
re:mind setzt auf eine reflektierende, nicht wertende Beziehung zwischen Mensch und Maschine. Die KI gibt Impulse, aber keine Diagnosen. Alle Daten werden lokal gespeichert, die Nutzer*innen behalten jederzeit die volle Kontrolle. Eine optionale App dient ausschließlich der Verwaltung und Transparenz, nicht zur Auswertung oder Analyse.
Zentrale Werte von re:mind:
Sicherheit: Keine Cloud, volle Datensouveränität
Zugang: Unterstützung in belastenden Momenten – sofort und ohne Hürde
Selbstwirksamkeit: Die Nutzer*innen bestimmen über Zeit, Tiefe und Art der Interaktion
re:mind versteht mentale Gesundheit als persönlichen, alltäglichen Prozess. Es schafft Raum für Selbstreflexion, Entwicklung und emotionale Begleitung, leise, respektvoll und individuell. Ein smarter Spiegel für echte Veränderung – von innen heraus.
Audio Visualizer:
HTML-Datei:
Einbindung p5.js-Bibliothek sowie das p5.sound-Addon (für Audioverarbeitung)
Funktion:
Sketch.js erzeugt eine visualisierte Darstellung von Mikrofoneingaben:
In der Mitte des Bildschirms erscheint ein pulsierender Kreis, der auf Lautstärke reagiert.
Um den Kreis herum entsteht ein "Glow"-Effekt, der sich je nach Lautstärke ausdehnt.
Die Vorderseite des Kreises hat eine organische, flüssige Bewegung, die mithilfe von sin() und curveVertex() realisiert wird.
Wichtige Elemente:
Audioeingang:
let mic;
mic = new p5.AudioIn();
mic.start();
Das Mikrofon wird gestartet und später wird mit mic.getLevel() die Lautstärke (Volume) abgefragt.
Diese Lautstärke bewegt sich zwischen 0 (Stille) und etwa 1 (sehr laut).
Sensitivität und Radius:
let radius = 100;
let sensitivity = 200;
radius: Grundradius des Kreises.
sensitivity: Wie stark sich die Lautstärke auf die Größe/Bewegung des Kreises auswirkt.
Hintergrund-Glow:
for (let i = 1; i <= 10; i++) {
let glowRadius = radius + i 30 + vol (sensitivity * 33);
...
ellipse(0, 0, glowRadius * 0.66);
}
Es werden 10 Kreise mit wachsendem Radius gezeichnet.
Die Kombination aus fill und stroke mit transparenter Farbe (alpha) erzeugt einen weichen Glow. Der Glow reagiert subtil auf die Lautstärke.
Vorderer „liquid“-Kreis:
for (let angle = 0; angle < 360; angle += 5) {
let offset = sin(angle 3 + frameCount 2) vol sensitivity;
let r = radius + offset;
...
curveVertex(x, y);
}
Der Kreis ist animiert und wellenförmig, da sich der Radius bei jedem Punkt anhand einer Sinus-Funktion verändert.
Die Animation wird durch frameCount gesteuert → jede Frame erzeugt leicht
andere Werte → flüssige Bewegung.
curveVertex() macht die Form weich und fließend.
User-Journey-Map
Die User Journey Map stellt eine zentrale Methode dar, um die alltägliche Interaktion zwischen den Nutzer*innen und unserem Produkt, dem Smart-Spiegel als KI-Begleiter, greifbar und nachvollziehbar zu machen. Sie zeigt die Situation, die emotionalen Zustände, Touchpoints sowie die Reaktionen des Systems entlang verschiedener Tagesphasen.
Die User Journey Map zeigt, wie der Smart-Spiegel auf unterschiedliche Phasen des Tages reagiert. Für Nutzer*innen in stressbelasteten Lebensphasen entsteht dadurch ein sanfter, vertrauenswürdiger Begleiter, der sie in ihrem Tempo begleitet und entlastet.
Flow-Chart
Das Flow-Chart zeigt, wie ein typischer Ablauf nach Installation der App aussieht.
Styleguide
Farbgebung
Bei den Farben entschieden wir uns hauptsächlich für Lila- und Grüntöne.
Violett: steht für Kreativität und Ruhe
Grün: symbolisiert Heilung und Hoffnung
Zusätzlich entschieden wir uns für schwarz und weiß, sodass die Farben als Akzente besser zur Geltung kommen.
Typographie
Als Typographie entschieden wir uns für die Schritart Poppins für Überschriften und Inter für Fließtexte, da sie beide sehr gut leserlich sind und nicht zu aufdringlich wirken.
Die Grafik links zeigt die Schriftgrößen für die mobile Anwendung.
Die Grafik rechts zeigt die Schriftgrößen für die Web Anwendung.
Logo
Der Name entstand aus der Idee "Reflect your mind" und daraus machten wir dann re:mind. Im Logo haben wir ebenfalls das Motiv des Schmetterlings mit aufgegriffen, um ein Symbol für Transformation im Logo darzustellen.
Entwürfe
Zu Beginn erstellten wir Wireframes für die mobile und die web Anwendung. Im Verlauf erstellten wir dann Mockups für die Landingpage sowie für die App.
Die Wireframes dienen als strukturierte Blaupause für die responsive Landingpage unserer Anwendung. Ziel ist es, eine klare, intuitive und emotional ansprechende Nutzerführung zu schaffen, die sowohl auf Mobilgeräten als auch auf Desktops eine optimale User Experience bietet.
Designprinzipien:
Klarheit & Minimalismus: Fokus auf einfache Struktur, wenig Ablenkung
Wiedererkennbarkeit: Konsistente Platzierung von Logo und Navigationspunkten
Responsivität: Inhalte und Komponenten skalieren je nach Viewportgröße
Nutzerzentrierung: Emotionale Ansprache (Visuals, Texte) im Zentrum der Gestaltung
Landing Page
Projektziel
Die Landingpage wurde konzipiert, um Nutzer*innen einen ersten Eindruck der Anwendung zu vermitteln. Ziel war es nicht, eine vollständige App-Nutzung abzubilden, sondern eine emotionale, verständliche und überzeugende Produktvorstellung zu ermöglichen – mit klarem Fokus auf die Funktionsweise, den Nutzen und die ethischen Werte der Anwendung.
Auf Basis der Wireframes wurden Mockups in Figma erstellt, die das endgültige Look & Feel abbilden. Hier stand im Mittelpunkt:
Produktidentität: Klare Corporate Identity mit sanften Violetttönen, minimalistischer Typografie und viel Weißraum.
Voice Visualizer: Der violette Kreis ist eine stilisierte Darstellung des KI-basierten Voice-Visualizers, der ein zentrales Element der Anwendung darstellt. Er gibt visuell eine Vorschau auf die spätere Interaktion mit der KI.
Emotionalität durch Sprache: Die Headlines sprechen empathisch an („KI, die mehr sieht als nur dein Spiegelbild.“), während die Textinhalte konkrete Anwendungsszenarien beschreiben.
Datenschutz & Ethik: Klare Botschaften zu Datenschutz und individueller Kontrolle betonen die Nutzerorientierung.
Spiegel
Beispielhafte Interaktion mit dem Spiegel auf der Unterseite wird der Voice Visualizer angezeigt und auf der oberen die folgenden Mock-Ups.
Atemübung
Hier wird eine Atemübung Schritt für Schritt angeleitet. In unserem Fall hier haben wir nur die wichtigsten Schritte dargestellt.
Abschluss
Nach Abschluss der Atemübung werden Nutzer*innen nach Feedback gefragt und können sich so selbst nochmals reflektieren und sich mit ihren Gefühlen auseinandersetzen.
Mockups
Fazit
Unser Projekt stellte uns vor inhaltliche und organisatorische Herausforderungen. Ursprünglich verfolgten wir die Idee eines implantierten KI-Gehirnchips, verwarfen diese jedoch wegen einer zu dystopischen Richtung. Stattdessen fokussierten wir uns auf die Themen Selbstoptimierung, mentale Gesundheit und KI – mit dem Ziel, emotionale Entlastung im Alltag zu ermöglichen. So entstand die Idee von re:mind.
Auch als Team sind wir gewachsen: Trotz der Recherchearbeit, Konflikten und Zeitdruck gelang es uns, klare Strukturen zu finden und gemeinsam das Projekt zu gestalten.
Insgesamt konnten wir uns intensiv mit dem Thema KI sowie den derzeitigen Standpunkten der Therapie auseinandersetzen. Dadurch konnten wir uns nicht nur inhaltlich sondern auch gestalterisch weiterentwickeln und lernten wie wichtig Flexibilität auch in der Gruppenarbeit ist.
Betreuung:
Prof D. Gerbaulet
Autoren:
Saskia Tröge, Natalie Schiechtele, Fabian Knabel
