UI mockups for the health networking platform. Open this file in a browser to view.
The home screen. Faces with warmth glow, not a feed. One-tap check-in. Gentle nudge below. Warm amber = connected, cool slate = drifting, deep indigo = needs attention.
Tap a circle member to see their card. Qualitative bars (Good/Fair), not raw numbers. Life context is prominent. Primary actions are communicate, not analyse.
Narrative insight cards, not dashboards. Natural language with supporting sparklines. Patterns observed, not diagnosed. Milestones celebrate consistency.
Your plan is here. You've prepared for this.
Your first contact
Your therapist
Crisis line · Samaritans
Deep navy, not red. Maximum clarity. One action per card. Large tap targets. Coping strategies from the user's own plan. "I'm feeling safer" exits crisis mode. No data, no charts — just people, actions, coping.
Group mood is aggregated — no one singled out. Individual check-ins are opt-in visible. Missing check-ins are noted gently (open dot), not flagged. Shared goal progress is visual, not competitive.
One question. One scale. Optional note. Done. 10 seconds. "Skip today" is always available, never guilt-tripped. Numbers without labels — the user defines what 1-5 means to them.
When a pre-authorised alert triggers, the angel sees what to do — from the person's own crisis plan. Deep indigo accent for attention without alarm. Clear action, specific guidance.
Angels Design System
Warmth spectrum (no traffic lights). Deep indigo for attention (no red). Narrative insights (no dashboards). 10-second interactions. Crisis features are free, always. Time-in-app is not a KPI.
See DESIGN.md for the full design language specification.