Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Edad Biológica

Progreso → Edad Biológica (L2)

Propósito: Mostrar la diferencia entre edad biológica y cronológica, explicar factores y delta.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso/edad-biológica
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 Bio vs crono visual Dos números grandes: 41.2 (bio) vs 45 (crono), línea de tiempo P0
2 Delta badge Badge “-3.8 años” verde si favorable, azul si desfavorable P0
3 Factores principales Top 5 factores que más influyen (ejercicio, glucosa, inflamación…) P1
4 Metodología PhenoAge Pill explicativo: “Calculado con PhenoAge, basado en 9 biomarcadores” P2
5 Tendencia histórica Sparkline edad bio por ciclo P1

States

Loading

  • Visual: Skeleton: dos circulos grandes + lista de 5 factores shimmer
  • Copy: “Calculando tu edad biológica…”

Loaded (Normal)

  • Datos: Bio 41.2, crono 45, delta -3.8, 5 factores ordenados por impacto

Empty

  • Trigger: Sin exámenes procesados
  • Copy: “Necesitamos tus exámenes para calcular tu edad biológica”
  • CTA: Agendar muestra → /paciente/laboratorio

Error

  • Copy: “No pudimos calcular tu edad biológica”
  • CTA: Reintentar

Edad Bio Mayor que Crono

  • Trigger: Delta positivo (ej: bio 48 > crono 45)
  • Copy: “Tu cuerpo muestra signos de una edad mayor. Tu plan está diseñado para revertir esto.”
  • CTA: Ver mi plan → /paciente/plan

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Edad biológica EdadBiologica edad_bio 41.2 años
Edad cronológica Paciente fecha_nacimiento 45 años
Delta EdadBiologica delta -3.8 años
Factor top FactorEdad nombre, impacto Glucosa, alto
Metodología EdadBiologica método PhenoAge

Acciones

Acción Tipo Resultado
Tap factor Navegación → Detalle Biomarcador del factor
Tap “Que es PhenoAge” Modal Explicación de metodología
Tap tendencia Interacción Tooltip por ciclo

  • Viene de: Progreso Overview (card edad), Dashboard (card edad)
  • Va a: Detalle Biomarcador, Proyecciones
  • Back: Progreso Overview