Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Confirmación

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

Propósito: Resumir todo lo capturado en el onboarding y confirmar la cita agendada.
JTBD: “Quiero saber si estoy enfermandome antes de síntomas”
Ruta: /onboarding/confirmación
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Resumen de datos Datos personales, historial, estilo de vida P0
2 Panel seleccionado Total de análisis y precio P0
3 Cita agendada Clínica, fecha, hora, preparación P0
4 Timeline próximos pasos 6 pasos desde hoy hasta resultados P0
5 Editar sección Link para volver a editar cada sección P1
6 Botón confirmar CTA final del onboarding P0

States

Loading

  • Visual: Skeleton shimmer en tarjetas de resumen (300ms)
  • Duración: <500ms
  • Copy: “Preparando tu resumen…”

Loaded (Normal)

  • Visual: 3 tarjetas resumen (datos, análisis, cita) + timeline + botón “Confirmar”
  • Datos: Todo lo capturado en Steps 1-5

Error

  • Trigger: Fallo al confirmar la cita en el backend
  • Copy: “No pudimos confirmar tu cita. Intenta de nuevo.”
  • CTA: [Reintentar]

Confirmado

  • Trigger: Tap en “Confirmar” exitoso
  • Visual: Animación de check + confetti sutil
  • Copy: “Todo listo, María. Te esperamos el martes 15 de abril.”
  • CTA: [Ir a mi perfil] --> /perfil-pendiente

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre Paciente nombre María Lopez
Ciudad Paciente ciudad Medellín
Condiciones Paciente condiciones Hipotiroidismo
Panel Sistema panel_seleccionado Panel Integral (72 análisis)
Clínica Cita sede Clínica ADEN Medellín
Fecha cita Cita fecha Martes 15 de abril, 7:00 AM
Preparación Cita preparación Ayuno de 12 horas

Acciones

Acción Tipo Resultado
Editar datos Tap link “Editar” Navega al step correspondiente
Confirmar Tap botón Crea cita en backend, muestra estado confirmado
Ir a perfil Tap botón (post-confirmación) Navega a /perfil-pendiente

  • Viene de: Agendar (Step 5)
  • Va a: Perfil Pendiente (post-confirmación)
  • Back: /onboarding/agendar