Scroll

AI Health Design · 2025

Vela

A health companion for couples

Vela

AI Health Design

AI / LLM

Health & Wellness

UX / UI Design

Next.js

Supabase

Oura API

Product Design · Full-Stack

2025

A connected health app that brings together Oura ring data, lab results, and medical history into one shared view for partners. An AI coach reasons across the data to suggest a daily plan, while granular privacy controls let each partner decide what to share — and what to keep to themselves.

Stack

Tools used

The kit that built this project — from research to deploy. AI tools called out separately because they shape how the work gets made, not just what it's made of.

AI

  • Claude (Sonnet + Opus)Coach reasoning, schema generation, code review
  • Claude CodePair programming in the terminal
  • CursorAI-assisted code editing
  • v0UI component prototyping

Design

  • FigmaWireframes, design system, ring-card iteration
  • FigJamUser flow mapping and brainstorming

Code

  • Next.js 16App framework
  • TypeScriptType safety end-to-end
  • Tailwind CSSStyling
  • Framer MotionUI animations
  • shadcn/uiAccessible component primitives

Infrastructure

  • SupabaseAuth, biomarker history, partner relationships
  • Oura APISleep / readiness / activity data
  • Anthropic SDKCoach LLM calls
  • VercelHosting + previews
  • GitHub ActionsCI/CD pipeline

The Problem

Health data is everywhere — wearables on your finger, lab results in a portal, prescriptions in a pharmacy app, doctor's notes in a folder. None of it talks to each other, and almost none of it travels with the people closest to you. Most couples manage their health in parallel: separate apps, separate appointments, separate spreadsheets. When something matters — a recovery week, a difficult diagnosis, a hard cycle — the person who could actually help is the last one to see the data.

The Premise

Vela was built around a different idea: that the people sharing a life should be able to share a meaningful slice of their health. Not all of it — granular privacy is non-negotiable — but enough that a partner notices when your HRV drops 33% overnight, or that your iron has been trending low for two weeks, before you have to bring it up yourself. The product is designed for two people, not one user with a contact list.

Walking through the product

Vela is built around four tabs — Today, Timeline, Coach, and You — and a header toggle that switches the entire interface between your view and your partner's. The challenge wasn't fitting more data on screen; it was deciding what becomes a number, what becomes a sentence, and what gets hidden behind a tap. Each surface below is captured from the working prototype.

01 — Today

01 — Today

The home view: three Oura metrics (sleep, readiness, activity) as rings, a luteal-cycle awareness chip, then a scrollable day plan with completed items (Levothyroxine, coffee + sunlight) struck through and the active recommendation (Spinach + lemon lunch) highlighted in the present moment.

02 — Timeline

02 — Timeline

Calendar-and-list view of your accumulated days. Each entry shows the recovery state of the day, the routines that fired, and which were completed. This is how the data starts to feel like a story you can read backwards.

03 — Coach

03 — Coach

A Claude-powered conversation that has read your labs, your last week of Oura data, and your medical history. It opens with a specific observation ('readiness dropped to 70 today, was 85 yesterday, HRV is at 28ms, down 33% from your average of 42, Cortisol is 19.5, high-normal range') and offers a recovery plan tuned to *your* numbers. Quick-reply chips let you steer without typing.

04 — You

04 — You

Profile, partner relationship, and the privacy panel — the most consequential screen in the app. Every metric, every lab category, every conversation can be shared, summarized, or hidden, with the default being privacy.

05 — Partner view

05 — Partner view

Tap Daniel in the header chip and the entire app re-skins to your partner's day, in teal instead of blue. The headline insight isn't 'Daniel's HRV is 58' — it's 'He's well-rested and low-stress. Good day to lean on him.' Below it: actionable suggestions phrased as things you can do — 'Ask him to cook dinner tonight (he has the energy for it)', 'Suggest a walk or activity together after work', 'Let him know you need a calm evening.' This is the screen that makes Vela different from every other health-data app.

Why partner view is the product

Most health apps stop at 'share your dashboard with a contact.' Vela goes one step further: when you switch to your partner's view, the AI doesn't just translate the numbers, it re-frames the entire screen as actions *you* can take based on *their* state. A high-readiness day for Daniel becomes 'a good day to ask him to cook dinner.' A poor-recovery day becomes 'let him know you need a calm evening.' The data is the substrate; the actionable framing is the product. Without it, Vela is just another tracker with sharing. With it, Vela becomes a coordination layer for two people sharing a life.

How the AI coach earns its place

I'm cautious about putting LLMs in front of health data — the failure modes are real. The coach is designed around four constraints, in this order:

  1. 01

    Read the data first

    Before the model says anything, the backend feeds it a structured snapshot: today's Oura metrics, the last seven days of trends, the most recent lab results, any flagged biomarkers, and the user's stated health goals. The model is never asked to make things up — it's asked to interpret a real briefing.

  2. 02

    Speak in observations, not diagnoses

    Prompts are tuned so the coach's first sentence is always something the user can verify themselves. 'HRV dropped 33% overnight' is a fact you can check. 'You're overtrained' is a story. The first one is allowed; the second is not.

  3. 03

    Suggest, don't prescribe

    Recommendations are framed as one option among several — 'recovery mode today: gentle movement only, iron-rich meals.' The user can accept, modify, or ignore. Medical-grade language is reserved for users who explicitly opt in.

  4. 04

    Stay in its lane

    The model is given an explicit list of things it cannot do: diagnose conditions, recommend medication changes, override privacy settings, or invoke partner data without consent. These aren't just system-prompt suggestions — they're enforced server-side before the response renders.

The hardest design problem

Privacy was the part I rewrote the most. Early versions defaulted to full sharing between partners — the assumption being that people who'd opted into a couples app wanted couples-level transparency. Testing killed that immediately. The data is too revealing. Cycle phase, alcohol intake, late-night HRV crashes — none of it should leave you by default, even with someone you love.

The version that landed inverts it: nothing is shared until you toggle it on, and toggles are remembered per category, not per session. There's also a 'summarize, don't show' middle setting — your partner sees that you had a recovery day, but not the underlying numbers. That middle ground turned out to be the one most people actually wanted.

What I built

End-to-end design and engineering. Stack: Next.js 16, Supabase (auth, biomarker history, partner relationships), Claude Sonnet via the official SDK for the coach, Oura OAuth for the ring data. Schema designed around consented data flows — every read across the partner boundary is gated and logged. The result is a product that gets more useful the longer you use it, and the more honestly you let it in.

All projects

© 2025 Hanna de Vries