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 Ciclo

Planes → Timeline del Ciclo Actual

Propósito: Visualizar el ciclo actual: fase, dia, adherencia y comparación con ciclos anteriores.
JTBD: Saber qué hacer hoy en <30 segundos
Ruta: /paciente/plan/ciclo
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Timeline visual Barra horizontal 90 días, marcador de hoy, fases coloreadas P0
2 Fase actual Nombre de fase, dia X de 90, días restantes P0
3 Adherencia % Porcentaje general + desglose: suplementos, hábitos, check-ins P0
4 Histórico ciclos Cards de ciclos anteriores con score inicio/fin y adherencia P1
5 Proximos hitos “Labs en 15 días”, “Consulta en 23 días” P1

States

Loading

  • Visual: Skeleton: barra horizontal + stats shimmer + 1 card histórico
  • Copy: “Cargando tu ciclo…”

Loaded (Normal)

  • Datos: Ciclo 2, dia 45/90, adherencia 83%, fase “Optimización”

Primer Ciclo

  • Trigger: No hay ciclos anteriores
  • Copy: “Este es tu primer ciclo. Al completarlo veras tu progreso aquí.”

Ciclo Terminado

  • Trigger: Dia 90+ sin iniciar nuevo ciclo
  • Copy: “Ciclo completado. Revisa tu reporte y decide los siguientes pasos.”
  • CTA: Ver reporte → /paciente/plan/reporte

Error

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

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Ciclo actual Ciclo número 2
Dia actual Ciclo dia_actual 45
Días restantes Ciclo dias_restantes 45
Fase Ciclo fase_nombre Optimización
Adherencia Ciclo adherencia_pct 83%
Adherencia supl Ciclo adherencia_supl 92%
Ciclo anterior score Ciclo score_inicio, score_fin 68 → 78

Acciones

Acción Tipo Resultado
Tap ciclo anterior Expandir Resumen del ciclo con métricas
Tap hito próximo Navegación → Detalle del hito (lab, consulta)
Tap “Ver reporte” Navegación → Reporte 90 Días (si ciclo terminado)

  • Viene de: Plan del Dia (nav Mi Ciclo), Plan Completo
  • Va a: Reporte 90 Días, Agendar Laboratorio, Agendar Consulta
  • Back: Plan del Dia