Flow: Dashboard & Health Exploration

Centro Neurálgico de la App

JTBD: “Quiero ver que estoy progresando”
Actor: Usuario activo (Day 8+)
Trigger: Abre app, login exitoso
Priority: P1 (High)
Duration: 30-90 segundos (exploración)

Happy Path

Dashboard Bento Grid Layout

View Transitions

1⃣ Dashboard → Nivel de Salud Detalle

2⃣ Dashboard → Mi Plan

3⃣ Dashboard → Health Coach

States & Empty States

State 1: Dashboard Loaded (Normal)

Mostrar: Todos los cards, datos reales Duration: 260ms fade-in por card

State 2: Dashboard Loading (First Time)

Mostrar: Skeleton shimmer (500ms) Behavior: Cards aparecen staggered (fadeInUp)

State 3: Dashboard Loading (Subsecuente)

Mostrar: Skeleton shimmer (200ms) Behavior: Rápido, usuario no espera

State 4: No Data Yet

Mostrar: “Completa onboarding para ver datos” CTA: “Ir a onboarding”

State 5: Health Coach Offline

Mostrar: Card gris, “AI no disponible” CTA: “Contactar médico en vivo”

Interaction Patterns

Card Hover State

Card {
  transition: all 150ms ease-out;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: elevation-md;
    cursor: pointer;
  }
  
  &:active {
    transform: translateY(0px);
  }
}

Sparkline Interaction

Hover sobre sparkline:
  → Muestra tooltip con fecha + valor
  → Timeline = "hace 30 días" hasta "hoy"
  → Click → Detalle histórico completo

Key Metrics

Implementation Notes

All cards are lazy-loaded (only hero card critical path)
Sparklines use Recharts with optimized rendering
Responsive: 1 col (mobile), 2-3 (tablet), 6 (desktop)
Header sticky + backdrop blur
Each card has error boundary
Analytics: track engagement per card

ADDENDUM: Hero Split-Screen Dashboard

Origen: Investigación Refero (abril 2026)
Referencia principal: The Outsiders — dark mode health dashboard con hero split y sparklines
Referencia secundaria: Gentler Streak — health metrics con tono friendly
JTBD afectados: #1 (saber si me estoy enfermando), #3 (ver que progreso)

Propuesta: Reemplazar Bento Grid Hero por Split-Screen Card

El bento grid actual distribuye atención. The Outsiders demuestra que un solo número dominante + sparkline genera engagement inmediato (51% readiness score ocupa 40% de viewport).

Especificaciones visuales:

• Lado izquierdo (40%): bg-[#0f2fc7] con radial glow, número ~120pt, texto “Tu Nivel de Salud” en 14pt semibold
• Lado derecho (60%): bg-[#0A0F1E], sparkline en #3B82F6 con glow dot, edad biológica y delta
• Interacción: Tap izquierdo → detalle 6 dominios. Tap sparkline → gráfico 90 días

Ventaja sobre el bento grid actual:

• Score siempre visible (top 300px del viewport)
• Progressive disclosure: sparkline invita a explorar sin abrumar
• Contraste visual alto → retención D1-D3

ADDENDUM: Readiness Levels para Biomarcadores (Bottom Sheet)

Origen: Investigación Refero (abril 2026)
Referencia principal: The Outsiders — Training Readiness Levels — bottom sheet con 4 niveles, color bar lateral, rangos, explicación clara
JTBD afectado: #4 (entender por qué algo está fuera de rango)

Propuesta: Bottom Sheet Educativo al Tocar Biomarcador

Cuando el usuario toca cualquier biomarcador en el dashboard o en la vista de resultados, se abre un bottom sheet con la siguiente estructura:

Especificaciones:

• Color bars laterales: 4-6px vertical pill, colores: #10B981 (óptimo), #3B82F6 (revisar), #F87171 (atención)
• Barra horizontal del valor: Muestra el punto del usuario como dot sobre el rango visual — más comprensible que números solos (validado por estudios de health literacy citados en research/)
• Copy: Grado 5-6 de lectura. “Tu glucosa” no “HbA1c”. Acción siempre al final.
• Animación entrada: slide-up 200ms ease-out, sections fade-in staggered 180ms
• Accesibilidad: Color nunca como único indicador (siempre + texto + icono)

Próximo: ciclo-90dias — Lifecycle Completo