Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Referidos

Perfil y Ajustes --> Invitar a Otros

Propósito: Permitir al paciente activo invitar amigos, familiares o contactos a la app.
JTBD: “Quiero que alguien que me importa también cuide su salud”
Ruta: /paciente/perfil/referidos
Módulo: PAM-5


Features

# Feature Descripción Prioridad
1 Generar invitación Crea link personalizado con nombre del referidor incluido P0
2 Compartir por canal WhatsApp (primero), email, copiar link, mostrar QR P0
3 Historial de invitaciones Lista de invitaciones: nombre destinatario, estado, fecha P0
4 Límite de invitaciones 5 activas durante beta (configurable por plan) P0
5 Beneficio por referido Copy claro de que obtiene al referir (extensión de ciclo / mes gratis) P1
6 Reenviar invitación Opción de reenviar si la invitación expiró P1

States

Loading

  • Visual: Skeleton shimmer en botón de invitación + lista de historial (500ms)
  • Duración: <800ms
  • Copy: “Cargando…”

Loaded (Normal)

  • Visual: Botón “Invitar a alguien” + historial de invitaciones enviadas
  • Copy título: “Invita a alguien a cuidar su salud”
  • Copy beneficio: “Cuando alguien que invitaste se une y completa su primer ciclo, tu próximo mes es gratis.”
  • Copy instrucciones: “Genera un link y compartelo por el canal que prefieras.”
  • Contador: “3 de 5 invitaciones disponibles”

Generar Invitación

  • Trigger: Tap en “Invitar a alguien”
  • Visual: Bottom sheet con campo nombre del destinatario (opcional) + 4 botones de canal
  • Copy: “Para quién es esta invitación?”
  • Campo: Nombre (opcional, personaliza el mensaje)
  • Canales:
    • WhatsApp (primer lugar, icono verde)
    • Email (segundo)
    • Copiar link (tercero)
    • Mostrar QR (cuarto)

Invitación Enviada

  • Trigger: Link compartido por cualquier canal
  • Visual: Confirmación efimera (toast) + invitación aparece en historial como “Pendiente”
  • Copy: “Invitación enviada. Te avisaremos cuando la acepten.”

Sin Invitaciones Disponibles

  • Trigger: 5 invitaciones activas (pendientes o aceptadas) alcanzadas
  • Visual: Botón de invitar deshabilitado + mensaje informativo
  • Copy: “Usaste tus 5 invitaciones. Pide más a tu médico o espera a que alguna expire.”

Invitación Aceptada

  • Trigger: Destinatario creo cuenta con el código
  • Visual: Estado “Aceptada” en verde en el historial + notificación push previa
  • Copy historial: “[Nombre] acepto tu invitación”
  • Copy notificación: “[Nombre] se unio gracias a ti”

Invitación Expirada

  • Trigger: 7 días sin usar el código
  • Visual: Estado “Expirada” en gris en el historial + botón “Reenviar”
  • Copy: “Expirada”
  • Acción: Tap “Reenviar” genera nuevo código y abre selector de canal

Error

  • Trigger: Fallo de red al generar link
  • Copy: “No pudimos generar tu invitación. Intenta de nuevo.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Invitaciones disponibles Paciente invitaciones_restantes 3 de 5
Nombre destinatario Invitación destinatario_nombre Laura Garcia
Estado invitación Invitación estado pendiente / aceptada / expirada
Fecha envió Invitación fecha_envio 15 mar 2026
Beneficio acumulado Paciente meses_gratis_ganados 1 mes gratis

Acciones

Acción Tipo Resultado
Tap “Invitar a alguien” Bottom sheet Abre formulario de invitación
Seleccionar canal Share Abre WhatsApp / email / clipboard / QR
Tap “Reenviar” Acción Genera nuevo código, abre selector de canal
Tap invitación en historial Expandir Muestra detalle: fecha, canal, estado

  • Viene de: Perfil principal (sección “Referidos”), notificación de invitación aceptada
  • Va a: WhatsApp/email (share nativo), Perfil principal (back)
  • Back: Perfil principal