Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Invitación

Onboarding --> Pantalla 0 (Pre-registro)

Propósito: Recibir al usuario que abrió un link de invitación y guiarlo a crear cuenta.
JTBD: “Alguien en quién confio me recomendo esto y quiero saber de que se trata”
Ruta: /invitación?code={código}&ref={nombre_referidor}
Módulo: PAM-1

Features

# Feature Descripción Prioridad
1 Contexto de quién invitó Nombre del referidor: “María te invito” o “Dr. Rodriguez te recomienda” P0
2 Propuesta de valor 2-3 líneas: que es la app, que obtiene, sin lenguaje de marketing P0
3 Campo de código Input de 6 caracteres, prellenado si viene de deep link P0
4 CTA principal “Crear mi cuenta” P0
5 Link a login “Ya tienes cuenta? Inicia sesión” P0
6 Tipo de referidor Icono diferenciado: médico (estetoscopio) vs amigo/familiar (persona) P1

States

Loading

  • Visual: Skeleton shimmer en nombre del referidor y propuesta de valor (500ms)
  • Duración: <800ms
  • Copy: “Cargando…”
  • Trigger: Deep link con código válido y cupo disponible
  • Visual: Nombre/avatar del referidor + propuesta de valor + CTA prominente
  • Copy referidor amigo: “[Nombre] te invito a cuidar tu salud con datos reales”
  • Copy referidor médico: “Dr. [Apellido] te recomienda un acompañamiento personalizado de salud”
  • Copy propuesta: “Exámenes de laboratorio + plan personalizado + seguimiento de 90 días. Todo en un solo lugar.”
  • CTA: [Crear mi cuenta]

Sin Código (Descargo la app sin invitación)

  • Trigger: Abrió la app sin deep link
  • Visual: Campo de código vacio con instrucciones
  • Copy: “Para usar la app necesitas una invitación. Si tienes un código, ingresalo aquí.”
  • CTA: [Verificar código]
  • Secundario: “No tengo código” --> mensaje informativo

Código Inválido

  • Trigger: Código ingresado no existe en el sistema
  • Visual: Campo de código con borde rojo + mensaje de error
  • Copy: “Código de invitación no válido. Verifica e intenta de nuevo.”
  • CTA: [Reintentar]
  • Trigger: Código existente pero fecha de expiración superada (7 días)
  • Visual: Estado informativo sin campo de input
  • Copy: “Esta invitación expiró. Pide una nueva a quién te invito.”
  • CTA: Ninguno (evita frustrar con acciones imposibles)
  • Trigger: Código ya fue redimido por otro usuario
  • Visual: Estado informativo
  • Copy: “Esta invitación ya fue utilizada.”
  • CTA: “Ya tienes cuenta? Inicia sesión”

Cupo Lleno (Beta)

  • Trigger: Límite de usuarios beta alcanzado
  • Visual: Estado informativo con campo de email para lista de espera
  • Copy: “Por el momento no estamos aceptando nuevos usuarios. Dejanos tu email y te avisaremos cuando haya cupo.”
  • CTA: [Avisarme]

Error

  • Trigger: Fallo de red o servidor
  • Copy: “No pudimos verificar tu invitación. Revisa tu conexión e intenta de nuevo.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre referidor Invitación referidor_nombre María Lopez
Tipo referidor Invitación referidor_tipo amigo / médico
Código Invitación código ABC123
Estado invitación Invitación estado activa / expirada / usada

Acciones

Acción Tipo Resultado
Tap “Crear mi cuenta” Navegación Válida código --> /registro con código prellenado
Ingresar código manual Input texto Válida en tiempo real (6 caracteres)
Tap “Inicia sesión” Navegación –> /login
Tap “Avisarme” (cupo lleno) Submit Registra email en lista de espera
  • Viene de: Deep link (WhatsApp, email, QR), apertura directa de la app sin cuenta
  • Va a: Registro (código válido), Login (ya tiene cuenta)
  • Back: Cierra la app (no hay pantalla anterior)