UX Design: re:mind

Projektdokumentation

Dieses Projekt habe ich im Rahmen des Kurses "User Experience Design" (Sommersemester 2025) gemeinsam mit Natalie Schiechtele und Saskia Tröge erarbeitet. Unsere Aufgabe war es, ein zukunftsweisendes Produkt mit starkem Fokus auf User und Human Experience zu entwickeln. Wir entschieden uns für re:mind – einen intelligenten Handspiegel, der als empathischer Impulsgeber im Alltag fungiert. Meine Arbeit umfasste dabei vielfältige Aufgaben von der Grundlagenrecherche und Persona-Entwicklung über Wireframing bis hin zum erstellen des "Produkt-Showcase"-Videos und testen der finalen Landingpage.

---

1. Problemstellung & Recherche

Mentale Gesundheit ist eines der drängendsten Themen unserer Zeit. Die Krankschreibungen aufgrund psychischer Erkrankungen sind in den letzten 10 Jahren um über 40 % gestiegen. Gleichzeitig warten Betroffene oft bis zu sechs Monate auf einen Therapieplatz. Unsere Hypothese war: Künstliche Intelligenz kann diese Lücke schließen – nicht als Ersatz für professionelle Therapeuten, sondern als niederschwellige, präventive Unterstützung im Alltag.

In unserer Recherche haben wir uns stark auf die Megatrends Health und Connectivity fokussiert. Eine von uns durchgeführte Umfrage mit 44 Teilnehmern bestätigte den Bedarf: 70,4 % zeigten Interesse an KI-gestützter mentaler Unterstützung, und 61,4 % könnten sich vorstellen, mit einem smarten Spiegel über ihre Gefühle zu sprechen. Die größte Sorge der Nutzer war jedoch der Datenschutz.

Nutzerprofile: Für wen gestalten wir?

Basierend auf unseren Daten haben wir zwei primäre Personas entwickelt, die völlig unterschiedliche Bedürfnisse an das Produkt stellen:

• Tobias (42, Softwareentwickler): Stark rational geprägt, steht unter beruflichem Druck. Er braucht datenbasierte, strukturierte Reflexion ohne Esoterik und legt höchsten Wert auf Diskretion.
• Lina (39, Teamleiterin): Funktioniert im Alltag nur noch auf Autopilot und ist akut Burnout-gefährdet. Sie benötigt sanfte Entschleunigung, Atemübungen und emotionale Entlastung.

---

2. Ideation & Konzept

Unsere Leitidee lautete: "Ein Spiegel, der nicht nur zeigt, was ist – sondern was werden kann."

re:mind ist ein smarter Spiegel, der den emotionalen Zustand der Nutzer anhand von Tonfall und Mimik analysiert. Er erkennt Stress oder Niedergeschlagenheit und reagiert proaktiv – etwa mit gezielten Reflexionsfragen („Was beschäftigt dich gerade?“) oder angeleiteten Atemübungen. Um die Einstiegshürde so gering wie möglich zu halten, erfolgt die Interaktion primär über Sprache (Voice UI) und reduzierte visuelle Impulse.

Privacy-by-Design: Da mentale Gesundheit ein hochsensibles Thema ist, war Datensicherheit unsere oberste Prämisse. Alle KI-Berechnungen finden lokal auf dem Gerät statt (Edge AI). Kameras und Mikrofone lassen sich physisch deaktivieren, und es gibt keinen Cloud-Zwang.

---

3. Design & Prototyping

Das Designkonzept sollte Vertrauen, Ruhe und Empathie ausstrahlen, ohne dabei klinisch zu wirken. Wir entschieden uns für eine organische Formsprache und eine beruhigende Farbpalette: Violett steht für Kreativität, Ruhe und das Unterbewusstsein, während Grün Heilung, Natur und Hoffnung symbolisiert. Für die Typografie wählten wir Poppins für freundliche, runde Überschriften und Inter für saubere, gut lesbare Fließtexte.

Das zentrale Interface-Element des Spiegels ist der Voice Visualizer. Statt eines starren Bildschirms pulsiert ein organischer Kreis passend zur Stimme. Für den Prototypen habe ich dies technisch mit p5.js und p5.sound programmiert, sodass der Kreis dynamisch auf Mikrofon-Input reagiert.

Mockup Showcase

Auszüge aus unserem High-Fidelity Prototypen und der finalen Interface-Gestaltung für App und Spiegel.

---

4. Fazit & Learnings

Dieses Projekt war eine enorme Herausforderung, da wir ein hochsensibles Thema wie mentale Gesundheit technologisch adressieren mussten, ohne dabei dystopisch oder bevormundend zu wirken. Ich habe gelernt, wie wichtig Ethical Design und Datensouveränität in der modernen UX sind. Das finale Ergebnis beweist, dass Technologie – richtig eingesetzt – nicht nur effizient sein kann, sondern auch zutiefst menschliche Bedürfnisse nach Reflexion, Ruhe und Gehör erfüllen kann.

---

5. Live Demo: Landingpage

Als Teil der Abgabe haben wir eine responsive Landingpage in HTML, CSS und JavaScript umgesetzt. Man kann den interaktiven Prototypen direkt hier im Browser testen. (Hinweis: Aus Datenschutzgründen und aufgrund von Browser-Restriktionen ist die Mikrofon-Freigabe für den Voice Visualizer in dieser Demo-Ansicht blockiert.)