Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Progreso Overview

Progreso → Landing (L1)

Propósito: Responder “estoy bien?” en 5 segundos con Health Score hero y resumen visual.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 Hero Health Score Card bg-[#0f2fc7] col-4, score 0-100, sparkline 7 pts, delta vs inicio P0
2 Edad biológica card Col-2, bio vs crono, delta badge, CTA detalle P0
3 Tu proyección card Escenario actual (óptimo/bueno/regular/riesgo), probabilidad a 5 años P1
4 Tu adherencia card % general, desglose suplementos/hábitos/check-ins P1
5 Mejoras recientes Top 3 biomarcadores mejorados con delta P1
6 Tus exámenes strip Carousel horizontal, 4 biomarcadores destacados con estado P0

States

Loading

  • Visual: Skeleton shimmer: hero col-4 + card col-2 + 3 cards col-2 + strip col-6
  • Copy: “Cargando tu salud…”

Loaded (Normal)

  • Datos: Score 85/100, edad bio 41.2, adherencia 83%, 4 biomarcadores top

Empty

  • Trigger: Usuario sin datos de laboratorio (pre-baseline)
  • Copy: “Aun no tenemos tus exámenes”
  • CTA: Agendar toma de muestra → /paciente/laboratorio

Error

  • Copy: “No pudimos cargar tu progreso”
  • CTA: Reintentar

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Health Score HealthScore valor_actual 85
Delta score HealthScore delta_inicio +17
Edad biológica EdadBiologica edad_bio 41.2 años
Edad cronológica Paciente edad 45 años
Adherencia general Adherencia porcentaje 83%
Biomarcador destacado Biomarcador nombre, valor, estado Glucosa 98 mg/dL óptimo

Acciones

Acción Tipo Resultado
Tap hero score Navegación → Nivel de Salud detalle
Tap edad biológica Navegación → Edad Biológica detalle
Tap proyección Navegación → Proyecciones
Tap biomarcador Navegación → Detalle Biomarcador (bottom sheet)
Tap “Ver todos” exámenes Navegación → Exámenes Lista

  • Viene de: Dashboard (card hero o tab Progreso)
  • Va a: Nivel de Salud, Edad Biológica, Exámenes Lista, Proyecciones, Trayectoria
  • Back: Dashboard