Scroll

AI Product Design · 2025

Tend

Medication adherence through behavioral science and gamification

Tend

AI Product Design

Behavioral Design

Gamification

Health UX

Glass UI

Mobile

Product Design · Engineering

2025

A medication adherence companion that uses behavioral nudges, streak mechanics, and achievement systems to help patients stick to their treatment plans. Warm glass-morphism UI designed for healthcare without looking clinical.

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 CodeFull app build in a single session
  • Claude (Sonnet)Nudge copy, achievement descriptions, behavioral science prompts
  • CursorUI iteration and glass-morphism refinement

Design

  • FigmaColor system, glass panel studies, pharma B2B pitch deck

Code

  • Next.js 15App framework
  • TypeScriptType safety
  • Tailwind CSSGlass-morphism utility system
  • Phosphor IconsIcon system

Infrastructure

  • VercelHosting

The adherence gap

Half of all patients don't take their medications as prescribed. It's not forgetfulness — it's friction, low motivation, and the absence of feedback. Most adherence apps treat the problem as a reminder problem. Tend treats it as a behavior design problem: how do you make taking a pill feel like progress instead of obligation?

The product

Four tabs, each doing one thing well. The visual language is warm glass-morphism — healthcare without the hospital aesthetic. Frosted panels, terracotta accents, and generous white space.

Today

Today

Morning, afternoon, bedtime — medications grouped by time of day with streak counter and progress ring. Each card shows dosage, instructions, and side effect warnings.

Medications

Medications

Full medication inventory with treatment plan progress, refill dates, and interaction warnings. Color-coded by category.

Progress

Progress

Streak, best streak, total doses. Weekly adherence bar chart and monthly calendar heatmap. The Wellness Warrior level and XP bar make consistency visible.

Profile

Profile

Achievements, chronotype, motivation style, and 'My Why' — the personal reason for sticking with treatment. Gamification that respects the user.

Behavioral nudges, not notifications

Five nudge types, each grounded in a different behavioral science principle. They appear contextually, never as push notifications.

  1. 01

    Habit stacking

    "You brush your teeth every morning at 7:45. That's the perfect cue to take your Sertraline." Anchoring the new behavior to an existing routine.

  2. 02

    Social proof

    "87% of people on this medication who take it at the same time each day report fewer side effects." Real stats, not manufactured urgency.

  3. 03

    Loss aversion

    "You're 8 days from your best streak ever. Missing today would reset to zero." The streak mechanic earns its place here.

Design decisions

The glass-morphism isn't decoration — it signals warmth and approachability in a space dominated by sterile medical UIs. The warm cream/peach gradient reads as 'wellness' rather than 'hospital'. Every visual choice was tested against the anti-pattern of looking clinical.

Gamification in healthcare is risky. Streaks can cause anxiety. Levels can feel patronizing. Tend's approach: streaks are visible but breaking one doesn't trigger shame — the copy says 'welcome back' not 'you missed a day'. Achievements celebrate consistency, not perfection.

All projects

© 2025 Hanna de Vries