Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Welcome

Onboarding --> Step 0 (Pantalla 1 de 8)

Propósito: Motivar al usuario nuevo a iniciar el onboarding mostrando la propuesta de valor.
JTBD: “Quiero saber si estoy enfermandome antes de síntomas”
Ruta: /onboarding
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Propuesta de valor 3 puntos clave de lo que obtiene con ADEN P0
2 Tiempo estimado “Solo 5 minutos” para completar onboarding P0
3 CTA Empezar Botón principal para iniciar el flujo P0
4 Indicador de pasos 7 dots mostrando progreso (step 0 activo) P1

States

Loading

  • Visual: Skeleton shimmer en ilustración y texto (500ms)
  • Duración: <800ms
  • Copy: “Cargando…”

Loaded (Normal)

  • Visual: Ilustración hero + 3 value props con iconos + botón “Empezar” prominente
  • Datos: Nombre del usuario (del registro)

Empty

  • No aplica (pantalla estatica)

Error

  • Trigger: Fallo de carga de assets
  • Copy: “No pudimos cargar esta pantalla.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre Paciente nombre María
Tiempo estimado Sistema duracion_onboarding 5 minutos

Acciones

Acción Tipo Resultado
Empezar Tap botón Navega a /onboarding/datos-personales

  • Viene de: MFA Setup o Verificar Email (post-registro)
  • Va a: Datos Personales (Step 1)
  • Back: No disponible (inicio del flujo)