Stepan Vedunov

Calmea

Calmea ist eine medizinische Plattform für Schlaftracking aus dem Sensory-Motor Systems Lab der ETH. Ich bin für meinen Zivildienst ins Lab gekommen und war vom Konzept bis zum Deployment für UX/UI verantwortlich.

Team
Alexander Breuss, Manuel Fuis, Levin Engeli, Stepan Vedunov
Leistungen
UX/UIDatenvisualisierungFull-Stack
Zeitraum
Sep. 2025 – Feb. 2026
Rolle
UX Engineer, ETH Sensory-Motor Systems Lab
KurzfassungGanze Geschichte

TL;DR

Problem
Schlaftracker muss man tragen, aufladen und daran denken. Und sie sehen nur die halbe Wahrheit. Calmea misst den Schlaf über das Bett selbst, ohne etwas am Körper.
Meine Rolle
UX Engineer im Sensory-Motor Systems Lab der ETH (Zivildienst). Ich war für UX/UI und die Entwicklung der App verantwortlich.
Was ich gemacht habe
Die App mit Visualisierung der Schlafdaten und Bettsteuerung gestaltet, die Architektur geplant und danach Full-Stack gebaut: Vue und TypeScript, FastAPI, PostgreSQL, Echtzeitdaten.
Ergebnis
Eine voll funktionsfähige App, bereit für Tests. Calmea ist inzwischen ein ETH-Spin-off.
Ein Handy auf einem hölzernen Bettrahmen, mit dem Calmea-Screen zum Einstellen der Schlafenszeit.
Eine Hand hält ein Handy mit dem Calmea-Insights-Screen, der eine wöchentliche Schlafqualität von 87 zeigt.
Die Wochenübersicht auf einen Blick.

Kontext

Calmea braucht nichts am Körper. Ein Sensormodul, versteckt im Bettrahmen, liest Herzschlag und Atmung über die Struktur des Betts (Ballistokardiografie) und erfasst den Raum drumherum: Temperatur, Luftfeuchtigkeit, Luftqualität und Licht. Daraus berechnet es Herzfrequenz, Atemfrequenz, Schlafphasen und Bewegung, jede Nacht, ohne dass man etwas tragen oder aufladen muss.

Meine Rolle

  • Verantwortung für UX/UI der ganzen App.
  • Die App von 0 auf 1 gestaltet, mit visualisierten Schlafdaten und der Steuerung des Betts.
  • Die Architektur geplant und Full-Stack umgesetzt: Vue, FastAPI und PostgreSQL mit Echtzeitdaten.

Die App

Die App macht aus den Signalen einer Nacht ein paar Dinge, die man auf einen Blick versteht: einen Qualitätswert, wie lange und wie regelmässig man geschlafen hat, und Empfehlungen in einfachen Worten. Tages-, Wochen- und Monatsansicht stellen dieselbe Nacht in einen Zusammenhang.

Mit derselben App steuert man das Bett. Man schaltet es ein, stellt Intensität und Vibration ein, startet ein Meditationsprogramm und legt die Schlafenszeit fest.

Das Calmea-Logo: ein pillenförmiges Icon mit geschlossenen, schläfrigen Augen in einem Verlauf von Indigo zu Violett, neben der Wortmarke.
Das Calmea-Logo.
Calmea-Insights, Wochenansicht: eine Schlafqualität von 87 von 100, 82 % Schlafdauer, 90 % Bettaktivität und ein Diagramm zur Regelmässigkeit der Bettzeiten.
Wochenübersicht.
Calmea-Zusammenfassung: durchschnittliche Zeit im Bett, Schlafqualität, Zubett- und Aufstehzeit und zwei Empfehlungen.
Zusammenfassung und Empfehlungen.
Calmea-Bettsteuerung: Das Bett ist online, mit Reglern für Intensität und Vibration und einem Link zum Meditationsmodus.
Das Bett steuern.
Calmea-Meditationsprogramme: Karten für Regenwald, Strand, Berge, Regen, Stressabbau und gut schlafen, jeweils mit Dauer.
Meditationsprogramme.
Eine Hand hält ein Handy mit dem Calmea-Insights-Screen, der eine wöchentliche Schlafqualität von 87 zeigt.
Die wöchentliche Schlafqualität auf dem Handy.

Wo die Daten liegen

ESP32Im Bett. Schlafdaten, Status und Fehler als Output, Befehle als Input.
MosquittoMQTT-Broker
BackendRender, Hosting in der EU (Frankfurt)
DatenbankPostgreSQL auf Supabase, Hosting in der EU
AppEine PWA in Vue und TypeScript, auf Vercel.
Das MVP-Setup, gebaut für Tempo und Tests. Bett und Backend sprechen über MQTT, die App erreicht das Backend über HTTPS.

Ergebnis

  • 0 → 1Die App, gestaltet und gebaut
  • Full-StackVue/TypeScript, FastAPI, PostgreSQL
  • Spin-offCalmea ist inzwischen ein ETH-Spin-off.

vedunov.com Setup-Programm

System
Nuxt 4, Vue 3 und Nuxt Content. Statische Seiten auf Netlify, kein Server, kein Tracking.
Sprachen
Englisch und Schweizer Hochdeutsch. Gleiche Seiten, zwei Inhaltsordner, /de vor jeder Adresse.
Tokens
Primitives → semantische Tokens → Komponenten, bei jedem Build kompiliert und auf Kontrast geprüft. Die gleiche Pipeline wie bei der Arbeit.
Schrift
Inter und Geist Mono, selbst gehostet, swap. Titel sind Inter mit engerem Abstand statt einer dritten Schrift.
Signal
#E8540C auf den Kacheln der Nebenprojekte und den Fokusrahmen. Der Lese-Schalter hat seine eigene rot-orange Taste, #E2421B.
Bewegung
Seiten verschwimmen beim Wechseln, Abschnitte werden beim Scrollen scharf, Nachbarn treten beim Hover zurück. Alles aus bei reduzierter Bewegung.
Barrierefreiheit
WCAG 2.2 AA. axe: 0 Probleme auf jeder Seite.
Performance
Lighthouse mobil, 24 Seiten: Performance 94, Barrierefreiheit 100, Best Practices 100, SEO 100 (jeweils der tiefste Wert).
Tasten
Entf öffnet diesen Bildschirm. Esc schliesst ihn.
letzte Prüfung 2026-11-09