Skip to main content

​
UX Design Principles

Living design reference for all Syntropy Health portal pages. Every layout decision should trace back to one of these principles.

​
The “Longevitian” Mental Model

Individual users (“Longevitians”) come to the platform for high-level health metrics. They already know what they checked in — they want to see what it means. The platform’s job is to transform raw health data into glanceable intelligence. 
What users want:       "Am I on track?"
What they don't want:  "Here's everything that happened"

​
Six Principles

​
1. Score-First

Health scores and visualizations are the hero content — always above the fold, always the first thing a user sees after the header. Application:
  • Diet Score + Active Protocols + Radar Chart = row 1 of every dashboard
  • Macro Gap bar chart = row 2
  • Everything else (check-ins, timelines, sync status) = below the fold
Anti-pattern: Showing lifetime stats, profile cards, or sync status before health scores.

​
2. At-a-Glance

Each page should tell its complete story in a single viewport. Detail lives below the fold or in expandable sections. Application:
  • Shrine Portal: 8 sections max (was 16)
  • Lounge: subscribed protocols with adherence scores visible immediately
  • Profile: summary card with key info, edit mode on demand
  • Settings: tabbed groups, not stacked collapsible sections
Anti-pattern: Long scrolling pages where the user must hunt for the metric they care about.

​
3. Connected by Default

The platform’s value is in connected data — Shopify purchases feeding protocol tracking, wearable data feeding health scores. Prompt connection early and often. Application:
  • Onboarding step 2 is Shopify connect
  • Empty states always include a “Connect” CTA
  • Sync status shows connection health, not just timestamps
Anti-pattern: Hiding integration prompts in Settings where users never look.

​
4. Functional Minimalism

Fewer sections, higher information density. Combine related data into single cards. Eliminate sections that don’t directly answer “Am I on track?” Application:
  • Lifetime stats merged into score card sub-labels
  • Weekly stats merged into score cards
  • Event timeline merged into check-in section as a filter toggle
  • Profile card removed from dashboard (accessible via sidebar)
Anti-pattern: Adding a new section for every new feature. Every addition must justify displacing existing content.

​
5. Progressive Disclosure

Show the summary first. Expand on interaction. Users who want detail will click; users who want a glance will not. Application:
  • Profile: single summary card → expand individual sections to edit
  • Check-ins: compact list → click to see full detail modal
  • Protocols: adherence % + streak → click to see timeline
  • Settings: 3 tabs → each shows relevant controls
Anti-pattern: Showing all form fields expanded by default. Five open collapsible sections.

​
6. Notification as Summary

Check-in insights, protocol reminders, and health alerts surface through the notification system — not as permanent dashboard sections. The portal shows the latest insight; the notification center holds the history. Application:
  • LLM check-in summary → creates a notification of type INSIGHT
  • Portal shows one “AI Insight” card with the latest notification
  • Protocol reminders → notifications, not dashboard cards
  • Clicking the insight card → opens the notification detail
Anti-pattern: Dedicated “AI Summary” sections on every page that duplicate notification content.

​
Page Layout Hierarchy

Every portal page follows this vertical structure: 
1. Header (page title, key actions, voice CTA)
2. Score Hero (health scores, visualizations — the "glance")
3. Active Context (what needs attention now — adherence, pending check-ins)
4. Detail (historical data, timelines, past check-ins — collapsible)
5. Connections (sync status, integrations — lowest priority)

​
Shrine Portal (“Health Shrine”)

PositionSectionPurpose
1Header + Voice CTA + SyncIdentity + quick actions
2Diet Score + Protocols + RadarThe “glance” — am I on track?
3Macro Gap bar chartWhere am I over/under?
4Adherence HeatmapProtocol compliance this week
5AI Insight cardLatest LLM-generated health summary
6Weekly TrendScore trajectory (if data exists)
7Recent Check-ins (collapsible)What I logged this week
8Shopify Connect / SyncIntegration status

​
The Lounge (“Protocol Lounge”)

PositionSectionPurpose
1HeaderPage title
2Subscribed Protocols (score + adherence)Active protocol performance
3Selected Protocol DetailAdherence timeline + notes
4Browse Catalog CTADiscover new protocols

​
Profile

PositionSectionPurpose
1HeaderPage title
2Profile Summary CardKey info at a glance + completeness
3Edit Sections (collapsed by default)Dietary, supplements, goals, conditions
4Save ActionsExplicit save buttons

​
Settings

PositionSectionPurpose
1HeaderPage title
2Tab: IntegrationsShopify, order sources, data sharing
3Tab: PreferencesNotifications, dietary, herbal
4Tab: AccountSubscription, API tokens, QA controls

​
Brand Alignment

These principles implement the Syntropy Health brand promise:
  • “Your AI Agent for Longevity” → Score-first design makes the AI’s output (scores, insights) the hero
  • “Where Data Becomes Longevity” → Connected by Default ensures data flows in
  • “Ask. Track. Act.” → Progressive Disclosure maps to this flow: scores (track) → insights (ask) → actions (act)
  • “Stay Bioconscious, Stay Out of Hospitals” → At-a-Glance design means users check their health status daily in under 10 seconds
Last updated: 2026-03-26 Source PRD: .claude/PRPs/prds/21-onboarding-portal-ux-overhaul.prd.md