Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Recordatorio de Cita

Consulta Médica -> Fase 1: Recordatorio (Dia -7)

Propósito: Confirmar asistencia a la cita médica con 7 días de anticipación
JTBD: “Quiero saber si mi cita es en tiempo y lugar correcto”
Ruta: /paciente/consulta/recordatorio
Módulo: PAM-8

Features

# Feature Descripción Prioridad
1 Notificación push Push 7 días antes con título, lugar, hora y CTA P1
2 Detalle de cita Fecha, hora, dirección, médico, tipo de consulta P1
3 Preparación recomendada Ayuno, documentos, hora de llegada P1
4 Confirmar asistencia Actualiza estado en agenda del médico P1
5 Reprogramar cita Flujo de selección de nueva fecha P2
6 Cancelar cita Confirmación doble + motivo P2
7 Compartir dirección Enviar ubicación por WhatsApp o Maps P3

States

Notificación Recibida (Normal)

  • Copy: “Tu cita con Dr. Rodriguez en 7 días”
  • Subtitulo: “Laboratorio de Control, 15 Ene 8:00 AM”
  • CTAs: [Confirmar asistencia] [Reprogramar] [No puedo ir]

Loading

  • Skeleton shimmer en card de detalles de cita
  • Copy: “Cargando detalles de tu cita…”

Cita Cancelada

  • Copy: “Esta cita fue cancelada”
  • Subtitulo: “Puedes agendar una nueva cita cuando quieras”
  • CTA: [Agendar nueva cita]

Fecha ya Paso

  • Copy: “Esta cita ya paso”
  • Subtitulo: “Si no pudiste asistir, agenda una nueva”
  • CTA: [Reprogramar cita]

Sin Cita Programada

  • Copy: “No tienes citas programadas”
  • Subtitulo: “Agenda tu próxima consulta para seguir con tu plan”
  • CTA: [Agendar cita]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre médico Médico nombre Dr. Rodriguez
Especialidad Médico especialidad Medicina General
Fecha Cita fecha 15 de Enero, 2026
Hora Cita hora 8:00 AM
Lugar Centro nombre Laboratorio de Control
Dirección Centro dirección Cra 43A #16-20, Medellín
Preparación Cita requisitos Ayunar 8 horas

Acciones

Acción Tipo Resultado
Confirmar asistencia Primaria Actualiza agenda, muestra confirmación
Reprogramar Secundaria Abre selector de fecha
Cancelar Destructiva Confirmación doble, libera cupo
Compartir dirección Terciaria Abre share sheet nativo
  • Origen: Push notification / Dashboard paciente
  • Destino confirmar: Vuelve a dashboard con badge “Cita confirmada”
  • Destino reprogramar: Selector de fechas disponibles
  • Destino cancelar: Dashboard sin cita activa