Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Registro

Auth --> Pantalla 2 de 5

Propósito: Un nuevo usuario crea su cuenta en ADEN con código de invitación.
JTBD: “Cuando quiero acceder a mi salud, quiero entrar rápido y seguro”
Ruta: /registro
Módulo: PAM-2


Features

# Feature Descripción Prioridad
1 Nombre completo Input de texto, requerido P0
2 Email Validación formato + unicidad P0
3 Código de invitación 6 caracteres, requerido (ADEN es por invitación) P0
4 Checkbox terminos Acepta Terminos de Servicio + Politica de Privacidad P0
5 Registro social Crear cuenta vía inicio de sesión social P1
6 Link a login Para usuarios que ya tienen cuenta P0

States

Loading

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

Loaded (Normal)

  • Visual: Formulario con 3 campos + checkbox + botón “Crear cuenta”
  • Datos: Código de invitación puede llegar prellenado desde deep link

Empty

  • Trigger: Acceso directo sin deep link
  • Visual: Formulario vacio, foco en campo nombre
  • Copy: “Crea tu cuenta en ADEN”
  • CTA: [Crear cuenta]

Error

  • Trigger: Email duplicado, código inválido, campos vacios
  • Copy: “Este email ya está registrado” / “Código de invitación inválido” / “Completa todos los campos”
  • CTA: [Iniciar sesión] (si email existe) / [Reintentar]

Sin Código de Invitación

  • Trigger: Usuario no tiene código y marca “No tengo código”
  • Visual: Mensaje informativo
  • Copy: “ADEN es por invitación. Solicita tu acceso en aden.health”
  • CTA: [Solicitar acceso] --> web externa

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre Paciente nombre María Lopez
Email Paciente email maria@ejemplo.com
Código invitación Invitación código ABC123

Acciones

Acción Tipo Resultado
Llenar formulario Input texto Válida en tiempo real
Crear cuenta Tap botón Envía verificación de email --> /verificar-email
Registro social Tap botón proveedor social OAuth flow --> verificar email
Ya tengo cuenta Tap link Navega a /login
Ver terminos Tap link Abre modal terminos

  • Viene de: Login (link “Crear cuenta”), deep link con código de invitación
  • Va a: Verificar Email (registro exitoso), Login (ya tiene cuenta)
  • Back: /login