Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Seleccionar Plan

Onboarding --> Pre-Step (Post-registro, antes de Step 0)

Propósito: Permitir al usuario elegir el plan que mejor se ajusta a su presupuesto y necesidades de salud preventiva.
JTBD: “Quiero entender que recibo en cada plan para decidir sin sorpresas”
Ruta: /onboarding/seleccionar-plan
Módulo: PAM-2

Features

# Feature Descripción Prioridad
1 Cards de plan 3 cards horizontales (scroll en móvil): Accesible ($49/mes), Completo ($149/mes), Premium ($299/mes) P0
2 Detalle por plan Nombre, precio, biomarcadores incluidos, tests/año, suplementación, Health Coach, consulta médica P0
3 Badge recomendado “Mas popular” en plan Completo P0
4 Toggle ciclo Anual/Mensual con descuento 15% en anual P1
5 Comparación expandible “Ver comparación completa” despliega tabla feature-by-feature P1
6 FAQ colapsable “Puedo cambiar de plan?”, “Hay compromiso?”, “Que incluye cada análisis?” P1
7 Garantia “30 días de prueba. Si no te convence, devolvemos tu dinero.” P0
8 Campo cupon Input para código de descuento con validación inline P2

States

Loading

  • Skeleton shimmer en 3 cards (400ms). Copy: “Cargando planes…”

Loaded (Normal)

  • 3 cards lado a lado, Completo con badge “Mas popular” y borde destacado. Precios desde backend, moneda COP.

Plan Seleccionado

  • Card expandida con highlight azul, otras reducidas. CTA: “Continuar con [nombre del plan]”

Cupon Aplicado

  • Precio original tachado + nuevo precio con descuento. Inválido: “Este código no es válido o ya expiró”

Error

  • “No pudimos cargar los planes. Intenta de nuevo.” CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre plan Plan nombre Completo
Precio mensual Plan precio_mensual $149/mes
Precio anual Plan precio_anual $127/mes (facturado anual)
Biomarcadores Plan biomarcadores 40+ biomarcadores
Tests por año Plan tests_ano 4 paneles/año
Suplementación Plan suplementos Incluida
Health Coach Plan health_coach Si, ilimitado
Consulta médica Plan consulta_medica 1 trimestral

Acciones

Acción Tipo Resultado
Seleccionar plan Tap card Destaca card, habilita CTA
Toggle anual/mensual Switch Recalcula precios con descuento 15%
Ver comparación Tap link Expande tabla comparativa
Aplicar cupon Input + validar Descuento reflejado en precio
Continuar Tap botón Navega a /onboarding/checkout
  • Viene de: Verificar Email / MFA Setup (post-registro)
  • Va a: Checkout (pago)
  • Back: No disponible (inicio del flujo comercial)