Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Agendar Cita

Onboarding --> Step 5 (Pantalla 6 de 8)

Propósito: El usuario agenda su primera cita de laboratorio para la toma de muestras.
JTBD: “Quiero saber si estoy enfermandome antes de síntomas”
Ruta: /onboarding/agendar
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Selector de clínica Lista de clínicas aliadas cercanas con mapa P0
2 Calendario Selector de fecha con disponibilidad P0
3 Horarios disponibles Pills con horas disponibles P0
4 Alerta de ayuno “Recuerda: ayuno de 12 horas antes de tu cita” P0
5 Dirección y mapa Ubicación de la clínica seleccionada P1
6 Progress bar Step 5 de 6 P0

States

Loading

  • Visual: Skeleton shimmer en mapa y calendario (500ms)
  • Duración: <800ms
  • Copy: “Buscando clínicas cercanas…”

Loaded (Normal)

  • Visual: Clínica sugerida + calendario + horarios + alerta ayuno, progress bar 5/6
  • Datos: Clinicas filtradas por ciudad del usuario, disponibilidad en tiempo real

Empty

  • Trigger: Sin clínicas en la ciudad del usuario
  • Visual: Mensaje informativo con alternativas
  • Copy: “Aun no tenemos clínicas aliadas en tu ciudad. Te enviaremos un kit a domicilio.”
  • CTA: [Solicitar kit a domicilio]

Error

  • Trigger: Fallo al cargar disponibilidad
  • Copy: “No pudimos cargar los horarios disponibles.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Clínica Cita sede Clínica ADEN Medellín - El Poblado
Fecha Cita fecha Martes 15 de abril
Hora Cita hora 7:00 AM
Dirección Cita dirección Cra 43A #1-50, El Poblado
Preparación Cita preparación Ayuno de 12 horas

Acciones

Acción Tipo Resultado
Seleccionar clínica Tap en lista/mapa Muestra calendario de esa clínica
Seleccionar fecha Tap en calendario Muestra horarios disponibles
Seleccionar hora Tap en pill Marca hora seleccionada
Siguiente Tap botón Confirma cita, navega a Step 6

  • Viene de: Panel de Análisis (Step 4)
  • Va a: Confirmación (Step 6)
  • Back: /onboarding/panel-análisis