Stepan Vedunov

Calmea

Calmea is a medical sleep-tracking platform from ETH's Sensory-Motor Systems Lab. I joined the lab for my civil service and owned its UX/UI from concept to deployment.

Team
Alexander Breuss, Manuel Fuis, Levin Engeli, Stepan Vedunov
Services
UX/UIdata visualisationfull-stack
Date
Sep 2025 – Feb 2026
Role
UX Engineer, ETH Sensory-Motor Systems Lab
Quick readFull story

TL;DR

Problem
Sleep trackers have to be worn, charged and remembered. And they only see half the picture. Calmea measures sleep through the bed itself, with nothing on the body.
My role
UX engineer at ETH's Sensory-Motor Systems Lab (civil service). I owned UX/UI and development of the app.
What I did
Designed the app with sleep-data visualisation and bed control, planned the architecture, then built it full-stack: Vue and TypeScript, FastAPI, PostgreSQL, real-time data.
Outcome
A fully functional app, ready for testing. Calmea has since become an ETH spin-off.
A phone on a wooden bed frame, showing the Calmea screen for setting a bed time.
A hand holding a phone with the Calmea insights screen, showing a weekly sleep quality score of 87.
Weekly insights at a glance.

Context

Calmea needs nothing on the body. A sensor module hidden in the bed frame reads heartbeat and breathing through the structure of the bed (ballistocardiography), and the room around it: temperature, humidity, air quality and light. From that it works out heart rate, breathing rate, sleep stages and movement, every night, with nothing to wear or charge.

My role

  • Owned UX/UI for the whole app.
  • Designed the app from 0 to 1, with visualised sleep data and control of the bed.
  • Planned the architecture and implemented it full-stack: Vue, FastAPI and PostgreSQL with real-time data.

The app

The app turns the night's signals into a few things you can read at a glance: a quality score, how long and how regularly you slept, and recommendations in plain words. Day, week and month views show the same night in context.

The same app runs the bed. You switch it on, set intensity and vibration, start a meditation programme and set your bed time.

The Calmea logo: a pill-shaped icon with closed sleepy eyes in an indigo-to-violet gradient, next to the wordmark.
The Calmea logo.
Calmea insights screen, week view: a sleep quality score of 87 out of 100, 82% sleep duration, 90% bed activity, and a consistency chart of bed times.
Weekly insights.
Calmea summary screen: average time in bed, sleep quality, bed and wake-up times, and two recommendations.
Summary and recommendations.
Calmea bed operation screen: the bed is online, with sliders for intensity and vibration and a link to meditation mode.
Running the bed.
Calmea meditation programmes: cards for rainforest, beach, mountains, rain, stress relief and sleep well, each with a duration.
Meditation programmes.
A hand holding a phone with the Calmea insights screen, showing a weekly sleep quality score of 87.
The weekly sleep quality score, on the phone.

Where the data lives

ESP32In the bed. Sleep data, status and errors as output; commands as input.
MQTTMQTT, two-way
MosquittoMQTT broker
two-way
BackendRender, EU hosting (Frankfurt)
HTTPSPostgRESTHTTPS, two-way
DatabasePostgreSQL on Supabase, EU hosting
HTTPSto Backend, two-way
AppA PWA in Vue and TypeScript, on Vercel.
The MVP setup, built for speed and testing. The bed and the backend talk over MQTT; the app reaches the backend over HTTPS.

Outcome

  • 0 → 1The app, designed and built
  • Full-stackVue/TypeScript, FastAPI, PostgreSQL
  • Spin-offCalmea has since become an ETH spin-off.

vedunov.com setup utility

System
Nuxt 4, Vue 3 and Nuxt Content. Static pages on Netlify, no server, no tracking.
Languages
English and Swiss High German. Same pages, two content folders, /de in front of every address.
Tokens
Primitives → semantic tokens → components, compiled and contrast-checked on every build. The same pipeline I use at work.
Type
Inter and Geist Mono, self-hosted, swap. Titles are Inter set tighter, instead of a third font.
Signal
#E8540C on the side-project tiles and focus rings. The read-mode switch gets its own red-orange keycap, #E2421B.
Motion
Pages blur in and out, sections sharpen as you scroll, and neighbours step back when you hover. All of it stops with reduced motion.
Accessibility
WCAG 2.2 AA. axe: 0 issues on every page.
Performance
Lighthouse mobile, 24 pages: performance 94, accessibility 100, best practices 100, SEO 100 (lowest of each).
Keys
Delete opens this screen. Esc closes it.
last check 2026-11-09