Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Mi Trayectoria

Progreso → Timeline Histórico (L3)

Propósito: Timeline vertical con ciclos historicos, eventos clave y comparaciones antes/después.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso/trayectoria
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 Timeline vertical Línea con nodos por ciclo, fecha inicio/fin, score P0
2 Eventos marcados Labs, consultas, cambios de plan, hitos (ej: “Score > 80”) P1
3 Antes/después Card comparativa: score, edad bio, top biomarcadores al inicio vs hoy P0
4 Detalle ciclo Tap nodo → resumen del ciclo: adherencia, cambios, resultados P1

States

Loading

  • Visual: Skeleton: línea vertical con 3 nodos shimmer + card comparativa
  • Copy: “Cargando tu trayectoria…”

Loaded (Normal)

  • Datos: 2-3 ciclos con eventos, score por ciclo, comparación global

Empty

  • Trigger: Usuario en primer ciclo, sin historial
  • Copy: “Tu trayectoria comienza aquí. Al completar este ciclo veras tu progreso.”

Error

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

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Ciclo Ciclo número, fecha_inicio, fecha_fin Ciclo 1, Ene-Mar 2026
Score por ciclo HealthScore valor 68 → 78 → 85
Evento Evento tipo, fecha, descripción Labs, 15 Feb, “Exámenes de sangre”
Adherencia ciclo Ciclo adherencia_pct 83%
Hito Hito descripción “Score supero 80 por primera vez”

Acciones

Acción Tipo Resultado
Tap nodo ciclo Expandir Muestra resumen del ciclo
Tap evento Navegación → Detalle según tipo (labs, consulta, etc.)
Tap biomarcador en comparación Navegación → Detalle Biomarcador

  • Viene de: Progreso Overview (card trayectoria)
  • Va a: Detalle Biomarcador, Detalle Ciclo
  • Back: Progreso Overview