Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Cambiar Plan

Planes --> Upgrade / Downgrade

Propósito: Permitir al paciente cambiar de plan con claridad total sobre que gana o pierde.
JTBD: “Quiero un plan que se ajuste mejor a lo que necesito ahora”
Ruta: /paciente/perfil/mi-plan/cambiar
Módulo: PAM-5


Features

# Feature Descripción Prioridad
1 Plan actual destacado Nombre, precio, features incluidos, badge “Tu plan actual” P0
2 Comparación de planes Misma tabla que seleccionar-plan con “actual” marcado P0
3 Diferencia de precio Delta claro: “+$50.000/mes por Completo” o “-$30.000/mes” P0
4 Features ganados/perdidos Verde para lo nuevo, gris con warning para lo que pierde P0
5 Fecha efectiva “El cambio aplica en tu próximo ciclo de facturación” P0
6 Prorrateo (upgrade mid-cycle) “Se cobrara la diferencia proporcional de $X” P1

States

Loading

  • Visual: Skeleton shimmer en plan actual + 2-3 cards de planes alternativos (500ms)
  • Duración: <800ms
  • Copy: “Cargando tus opciones…”

Loaded (Normal)

  • Visual: Plan actual arriba con badge azul + planes disponibles abajo en cards
  • Copy título: “Tu plan”
  • Plan actual: Card con borde azul, badge “Plan actual”, nombre, precio, lista de features
  • Otros planes: Cards sin borde, con nombre, precio, diferencia vs actual

Upgrade Seleccionado

  • Trigger: Tap en plan de mayor precio
  • Visual: Bottom sheet con resumen del cambio
  • Copy features nuevos: Lista en verde con icono check: “Consultas ilimitadas”, “Panel genómico”, etc.
  • Copy precio: “Tu plan pasa de [actual] a [nuevo]: +[diferencia]/mes”
  • Copy prorrateo (si mid-cycle): “Se cobrara $[monto] proporcional por los [X] días restantes de este período.”
  • Copy fecha: “Efectivo desde hoy. Las nuevas features estaran disponibles de inmediato.”
  • CTA: [Confirmar cambio] / [Volver]

Downgrade Seleccionado

  • Trigger: Tap en plan de menor precio
  • Visual: Bottom sheet con resumen del cambio + warnings
  • Copy features perdidos: Lista en gris con icono menos: “Consultas limitadas a 2/mes”, “Sin panel genómico”, etc.
  • Copy warning: “Al bajar de plan, estas features dejaran de estar disponibles al inicio de tu próximo período de facturación.”
  • Copy precio: “Tu plan pasa de [actual] a [nuevo]: -[diferencia]/mes”
  • Copy fecha: “El cambio aplica el [fecha del próximo período]. Hasta entonces, mantienes tu plan actual.”
  • CTA: [Confirmar cambio] / [Volver]

Cambio Procesando

  • Trigger: Confirmo el cambio de plan
  • Visual: Indicador de carga centrado
  • Copy: “Actualizando tu plan…”

Cambio Exitoso

  • Trigger: Pago procesado y plan actualizado
  • Visual: Confirmación con check animado
  • Copy upgrade: “Tu plan ahora es [nombre]. Las nuevas features ya están disponibles.”
  • Copy downgrade: “Tu plan cambiara a [nombre] el [fecha].”
  • CTA: [Volver a mi perfil]

Error de Pago

  • Trigger: Tarjeta rechazada o fallo de procesador
  • Visual: Mensaje de error con sugerencia
  • Copy: “No pudimos procesar el cambio. Verifica tu método de pago e intenta de nuevo.”
  • CTA: [Actualizar método de pago] / [Reintentar]

Error General

  • Trigger: Fallo de servidor
  • Copy: “Algo salió mal. Intenta de nuevo en unos minutos.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Plan actual nombre Plan nombre Esencial
Plan actual precio Plan precio_mensual $100.000/mes
Plan nuevo nombre Plan nombre Completo
Plan nuevo precio Plan precio_mensual $150.000/mes
Diferencia mensual Cálculo delta_precio +$50.000/mes
Prorrateo Cálculo monto_proporcional $25.000 (15 días restantes)
Fecha efectiva Cálculo fecha_cambio 1 may 2026
Features nuevos Plan features_adicionales Consultas ilimitadas, Panel genómico
Features perdidos Plan features_removidos Consultas bajan a 2/mes

Acciones

Acción Tipo Resultado
Tap plan alternativo Selección Abre bottom sheet con resumen del cambio
Tap “Confirmar cambio” Flujo Procesa cambio de plan
Tap “Actualizar método de pago” Navegación –> Perfil / Método de pago
Tap “Volver a mi perfil” Navegación –> Perfil principal

  • Viene de: Perfil --> Mi Plan (tap “Cambiar plan”)
  • Va a: Perfil (cambio exitoso), Método de Pago (error de pago)
  • Back: Mi Plan