🧪 Notas y herramientas del mockup (para el equipo — no hace parte del diseño)
🧪 Mockup funcional v6 — flujo definitivo de captación de Salud (precio primero), con copys de Lorena y diseño responsive. Versión única tras la decisión de Martin y Lorena (el A/B por ciclos de compra de 2–6 meses era inviable). Los rangos de precio ya salen de las tarifas vigentes del motor cotizador (jul-2026); los nombres de planes y los textos de seguimiento siguen por validar. Activa Modo anotaciones para ver el porqué de cada pantalla; el botón 🔧 muestra los datos que se guardarían.
🔍 Modo anotaciones — el porqué de cada pantalla
Atajos de demo (estado precargado; nada de esto hace parte del diseño):

El flujo en una frase

Educar y filtrar a los interesados antes de que lleguen al asesor.
El flujo: Home (solo edades, sin documentos) → Precios por tipo de plan → Identificación (documento + Ubica, OTP si el celular no coincide) → Personas del grupo → Opciones → detalle del plan → agenda de asesoría. Regla legal: sin documento no se muestran planes concretos.
Completa el flujo → asesor lo contacta en <24h + seguimiento por WhatsApp (priorizar / cancelar) Abre un plan y le convence → agenda su asesoría desde la página del plan (cita en firme) Busca EPS o plan de empresa → se atiende aparte, sin gastar al equipo Enfermedad ya diagnosticada → lo revisa un asesor antes de ofrecer Celular no coincide con Ubica → código de verificación por WhatsApp
Por qué este diseño — razones reales por las que hemos perdido oportunidades de salud (histórico de nuestro CRM):
No logramos contactar al cliente → por eso el seguimiento por WhatsApp con botón "priorizar"4.355 casos
Ya tenía un plan y no quiso cambiarlo → se detecta por perfilación y respuesta a los mensajes, no con una pregunta directa3.003
No buscaba un producto de salud privado → por eso explicar qué vendemos desde el inicio2.089
Terminó comprando en otro canal → por eso rapidez en el contacto964
Prefirió quedarse solo con su EPS (el precio lo sorprendió) → por eso mostrar rangos de precio temprano929
Solo estaba probando la página → por eso pedir la cédula al inicio918
No tuvimos oferta para su edad o salud → por eso avisarlo temprano, no en la llamada580
Dio datos falsos → por eso validar la cédula302
Buscaba EPS, ARL o exámenes → por eso las salidas con explicación amable118
Para dimensionar: en ese mismo período ganamos ~460 ventas. Las cifras son acumuladas de varios años — no son porcentajes de hoy, pero muestran claramente dónde se desgasta el equipo.
Paso 1 de 3
← Atrás

Tus datos

Documento requerido
Tú decides cuándo y cómo hablar con un asesor.
¿Qué busca esta pantalla?
Identificar a quien gestiona la cotización con el mismo formulario que hoy funciona en producción (documento → validación → fecha, correo y celular). Identificarse es el requisito para ver planes concretos.
¿Qué nos dicen los datos?
918 oportunidades eran gente "probando la página" y 302 dieron datos falsos: la cédula validada filtra ambos. Y la razón legal: como intermediarios no podemos mostrar ofertas sin saber a quién se las ofrecemos.
¿Qué decidimos y por qué?
  • Con el documento, Ubica (de TransUnion, la empresa de Datacrédito) trae nombre, género y ciudad. Se le dice al cliente que no afecta su historial. Cada consulta se cobra → se dispara una sola vez, al continuar.
  • Si el celular no coincide con el registrado en Ubica, sigue la verificación por WhatsApp (OTP) — patrón traído de autos que sube la contactabilidad.
  • Si la fecha de nacimiento coincide con una edad del grupo, asumimos que quien gestiona es esa persona y lo incluimos como asegurado (puede desmarcarse).
Si Ubica no trae los datos del titular
No se bloquea esta pantalla ni brotan campos nuevos en un formulario ya terminado (se probó y se sintió raro): el nombre y el género se completan en la tarjeta del titular en la pantalla de personas, que ya es un formulario y donde nada sorprende. Detalle que lo hace seguro (nota de Martin): esta población no tiene celular registrado contra el cual comparar, así que SIEMPRE pasa por el código de verificación de WhatsApp antes de llegar allá. Se evaluó también la pantalla intermedia "datos faltantes" de producción; con el flujo nuevo la pantalla de personas cumple ese rol sin agregar un paso.
Menos ruido tras validar el documento (revisión de Martin)
Se quitó la línea "Datos básicos confirmados" (el escudo verde del campo ya lo comunica, decirlo dos veces es ruido) y el aviso de la consulta se comprimió a una sola línea discreta: "Validar tu documento no afecta tu historial crediticio". Esa línea se conserva a propósito: es la regla 2 del spec (avisar que la consulta no afecta el historial), y el miedo a "me consultan en Datacrédito" es real en Colombia; una frase corta lo desactiva justo donde nace.
Layout abierto, no tarjeta de landing (revisión de Martin)
Antes esta pantalla reusaba la tarjeta del home (cabecera lila "Tus datos"), y se sentía como el landing metido en el flujo. Ahora sigue el mismo patrón de las demás pantallas de paso: título grande + subtítulo sobre el fondo azul claro, campos directamente en la página. Decisión relacionada: el fondo azul claro se mantiene en TODO el flujo — en producción el fondo cambia a blanco después del home, pero el azul es más fácil de leer y mantiene continuidad visual (observación de Martin).
Fecha: dropdowns de siempre + validación real (decisión del equipo tras probar 8 variantes)
El año del titular llega precargado con la edad de la primera persona del grupo del home (idea de Martin): acierta con margen de un año para la gran mayoría, y aun cuando falla deja a la persona más cerca de su año real que una lista vacía de 95 opciones. Día y mes se eligen siempre.Se probaron calendario, máscara, segmentos con auto-avance y autocompletes (ver test-datepickers.html); ganaron los tres desplegables actuales porque nunca malinterpretan lo digitado y reusan el componente Material existente. Lo que sí se rescató de los experimentos: fechas imposibles se rechazan al instante ("El 31 de febrero de 1990 no existe", bisiestos incluidos) y ANTES de consultar Ubica, para no pagar consultas por fechas inválidas; y Enter envía el formulario desde documento, correo o celular.
Campos con el componente de producción (revisión de Martin)
Los campos replican el input del design system de autos en sus cuatro fases: label flotante (baja al centro cuando el campo está vacío, sube pequeño al escribir o enfocar), borde azul al foco, escudo de validación que pasa de gris a verde cuando el dato es válido, y estado de error con borde rojo y mensaje debajo ("Documento requerido") en vez de alertas del navegador. El error se limpia al volver a escribir. Aplica también al formulario de empresa. El escudo es un SVG inline, no un emoji.
Lista de control: bloqueo definido (decisión de Martin)
Si el cotizante coincide con la lista interna de control, el flujo se detiene aquí: no se crea la comparación, no hay OTP ni pantallas siguientes, y no se gasta ninguna consulta ni tiempo del equipo. El mensaje es genérico a propósito ("No pudimos continuar con tu cotización en línea") con salida al WhatsApp de servicio: no se revela el motivo para no educar a quien intenta de nuevo con otros datos. En producción el cruce es por documento, correo, celular o dirección IP, y se valida en el servidor al enviar este formulario. En el mockup lo simula un documento que contenga 666. El evento interno bloqueado_lista_control queda para medir cuántos se detienen aquí.

Cotiza tu plan de salud

Medicina prepagada, pólizas de salud y más planes privados que complementan tu EPS
Compara las principales aseguradoras del país en un solo lugar. Ver precios aproximados toma un minuto.
+12.500planes de salud cotizados a través de Seguro Canguro
¿Para quiénes es el plan?
Primero verás precios aproximados, sin documentos.
Rápido y transparenteSiempre gratis para cotizarAsesoría personalizada gratis
¿Qué busca esta pantalla? (home de la Versión B — aporte de Lorena)
El home actual de producción (mismo H1, subtítulo y contador), pero la tarjeta de cotización pide edades y ciudades en vez de documento. La promesa cambia: primero precios, después datos. Se eliminó la pantalla intermedia con botón "Empezar": agregaba un paso sin capturar ningún dato.
¿Por qué precio primero? (decisión tomada)
Se evaluaron dos estrategias: identidad primero (el patrón de producción) y precio primero. Se eligió esta porque da valor antes de pedir compromiso y ataca los 929 casos de "prefirió quedarse solo con su EPS" y los 580 sin oferta por edad o salud avisados tarde. El A/B formal se descartó: con ciclos de compra de 2 a 6 meses, medir la calidad real tomaría demasiados meses. Los eventos de medición quedan activos para comparar contra la línea base de producción. Bonus operativo: los curiosos se retiran en la pantalla de precios sin disparar la consulta a Ubica, que se cobra por uso.
Importante
La regla legal no cambia: con edades solo se muestran rangos educativos por tipo de plan. Para ver planes concretos, cada persona debe identificarse después con su documento — el filtro fuerte no se pierde, solo se mueve un paso adelante.
La ciudad ya no se pregunta (revisión del motor cotizador con Diego)
Al leer el código del cotizador se confirmó que la ciudad no afecta ningún precio: solo decide si ciertos planes están disponibles. Y esa información llega sola más adelante: cada documento consultado en Ubica trae la ciudad de esa persona. Resultado: el home queda solo con edades (el campo de ciudad con el listado completo del DANE era una fuente grande de fricción), el caso real de "familia con un hijo estudiando en otra ciudad" se captura mejor que preguntando (cada cédula trae su ciudad), y en la tarjeta de cada persona la ciudad aparece editable por si Ubica trae una dirección vieja.
Ajustes de la revisión Martin+Lorena
  • En teléfono (≤640px) el párrafo pequeño se oculta, como en producción: el espacio sobre el pliegue prioriza la tarjeta con el CTA, y el H1+H2 se sostienen solos.
  • El hero conserva la jerarquía tipográfica de producción (H1 grande → H2 mediano → párrafo pequeño), pero con cada nivel aportando información distinta: acción (H1), los productos que la gente busca y más se venden + el mensaje anti-confusión (H2: prepagada, pólizas, complementan tu EPS) y la cifra + variedad + expectativa del proceso (párrafo). En producción los niveles 2 y 3 de salud se solapaban.
  • Los copys de esta versión (subtítulo, detalles de cada plan, mensaje de preexistencia) son la ronda de redacción de Lorena.
  • El encabezado de la tarjeta pregunta "¿Para quiénes es el plan?" (revisión de Martin): no asume el rol de quien escribe — funciona igual si cotizas para ti, tu familia o terceros (RRHH) — y evita el condicional de trámite de la versión anterior ("se asegurarían"). Misma razón en el enlace de empresa: "¿Cotizas para una empresa?" en vez de "tu empresa", que asumía ser el dueño.
  • El caso de empresa vive como enlace bajo el botón — el mismo patrón del "Cotizar sin placa" del home de autos. Antes estaba en la pantalla de precios.
  • Micro-revisión de Martin sobre la tarjeta: una sola línea de expectativa ("Primero te mostramos precios aproximados, sin pedirte documentos", arriba, donde justifica por qué solo pedimos edades) en vez de dos que decían lo mismo; campo de edad angosto (110px, un número de 1-2 dígitos a ancho completo se veía vacío); CTA sin flecha (no se usan en producción).
← Atrás

Precios aproximados para tu grupo

Rangos mensuales según las edades. Para los precios detallados completa el proceso: unos 3 minutos, IVA incluido.
Conocer más de cada plan
Busco un plan complementario de mi EPS
En Seguro Canguro no ofrecemos planes complementarios de las EPS. Sin embargo, hay pólizas de salud y medicina prepagada que muchas veces se ajustan a la necesidad y al presupuesto de quienes buscan un plan complementario.
Busco afiliarme a una EPS
Seguro Canguro ofrece planes privados de salud y no gestiona afiliaciones a la EPS. Para afiliarte, acude directamente a la EPS de tu elección.
¿Qué busca esta pantalla?
Responder de una la pregunta que todo el mundo trae ("¿cuánto vale?") por cada tipo de plan que ofrecemos, calculada para las edades del grupo. El tipo de plan elegido aquí reemplaza la pantalla "¿Qué cobertura buscas?" de la Versión A.
¿Qué decidimos y por qué?
  • Los tipos con restricción de ciudad en el motor (domiciliarios y ambulatorios) llevan la nota "Disponible en las ciudades principales" ("ciudades principales" es el término establecido en Colombia para ese grupo puntual de ciudades; corrección de Martin): expectativa puesta sin pedir ningún dato. La disponibilidad exacta por plan se resuelve en resultados con la ciudad que trae Ubica.
  • Si para alguna edad no existe un tipo de plan (ej. mayores de 65 en prepagada), la tarjeta lo dice en rojo de una vez — la expectativa queda puesta antes de pedir cualquier dato (ajuste de Felipe: antes pasaba desapercibido).
  • Abajo, con menos peso visual, las rutas que no son compra como acordeones: la explicación de "plan complementario" (con su puente hacia póliza/prepagada) y la de "afiliarme a una EPS" se abren ahí mismo, sin cambiar de pantalla (ajuste de Felipe).
  • Los detalles del switch explican qué es cada tipo de plan más el detalle fino, en una sola lectura (revisión Martin+Lorena).
  • Prepagada/póliza va destacada con "⭐ La opción más vendida" — ancla respaldada por las 297 ventas reales.
  • Dental e internacional van al final, compactos, bajo "También cotizamos" (decisión de Martin): casi no se venden, y con las tarifas reales del motor el internacional arranca en $1.280.000/mes — con el mismo protagonismo distorsionaría la lectura de precios de los tipos que sí se venden.
  • Después de elegir, la persona pasa a identificarse y el resto del flujo continúa igual: la cédula sigue siendo requisito para ver planes concretos.
  • Íconos SVG del set Tabler en vez de emojis (decisión de Martin sobre la propuesta comparada): los emojis renderizan distinto en cada sistema operativo y no respetan la paleta; los SVG van inline con color por token. Elegidos: latido (integral), mundo (internacional), estetoscopio (ambulatoria: consultas, no hospital), diente (dental), casa con corazón (domiciliarios), y en el resto del flujo candado (dato seguro), audífonos de asesor, logo de WhatsApp, estrella y chulo rellenos. Ver propuesta-iconos.html para el catálogo completo con criterios.
  • Un solo texto de expectativa (revisión de Martin): el disclaimer de abajo ("el valor final lo confirma el asesor") duplicaba el subtítulo y además contradecía el flujo, porque los precios exactos se ven al completarlo, no con el asesor. Ahora el subtítulo hace ambos trabajos: aclara que son rangos aproximados e invita a terminar el proceso calibrando el tiempo (unos 3 minutos).
← Atrás

Confirma tu número de celular

Tus opciones y tu cotización te llegan por WhatsApp. Te enviaremos un código para confirmar que este número es tuyo: lo digitas tú mismo aquí y listo.
¿Qué busca esta pantalla? (nueva — patrón traído de autos)
Garantizar que el celular sea real y reciba WhatsApp antes de seguir. Solo aparece cuando el número escrito no coincide con el registrado en Ubica para ese documento — si coincide, la persona ni ve este paso.
¿Qué nos dicen los datos?
La causa #1 de pérdida es no lograr contactar al cliente (4.355 casos), y 302 dieron datos falsos. Un número inventado hace inútil todo lo demás: sin celular real no hay asesoría, ni recordatorios, ni seguimiento. En autos este control ya demostró subir la contactabilidad.
¿Qué decidimos y por qué?
  • La fricción es selectiva: solo se verifica a quien trae un número que no coincide — la mayoría pasa derecho.
  • El código llega por WhatsApp (no SMS) a propósito: es el mismo canal del seguimiento posterior. Verificarlo garantiza que los mensajes automáticos sí llegarán.
  • Se puede corregir el número antes de enviar el código — a veces es solo un dedazo.
  • Reenviar con respuesta visible (revisión de Martin): al tocar "Reenviar código" aparece la confirmación "✓ Código reenviado" y el enlace queda bloqueado con cuenta regresiva antes de permitir otro reenvío — sin respuesta visual, la gente toca una y otra vez y cada toque es un mensaje de WhatsApp que cuesta. En producción el temporizador es de unos 3 minutos (como el actual); en el mockup son 30 segundos para poder probarlo.
  • Errores del código inline (revisión de Martin): código inválido y celular inválido se marcan en rojo con mensaje bajo el campo, como en producción, sin ventanas del navegador. El error se limpia al volver a escribir.
  • Copy sin vigilancia (revisión de Martin): la versión anterior decía "tu número no coincide con el registrado para tu documento", que genera la pregunta "¿registrado dónde?" y se siente invasivo, y "confirmar que podemos contactarte" es el ángulo equivocado para quien puso un número falso justamente para que no lo llamen. El nuevo copy usa el ángulo de entrega (la cotización te llega por WhatsApp) y el texto canónico de OTP del brand voice (el código confirma que eres tú, lo digitas tú mismo). Nunca se le dice al usuario que detectamos la no-coincidencia.
"¿Prefieres que no te llamemos?" (idea de Martin, ronda 41)
Quien pone un número falso casi nunca odia el contacto: odia las llamadas. En vez de puerta cerrada, el enlace (visible solo aquí, es decir, solo para la población de números no coincidentes) despliega dos salidas honestas: continuar solo por WhatsApp (la preferencia viaja a Close, el asesor no llama y el seguimiento lo respeta) o quedarse con el precio aproximado (se le repite su rango y vuelve a precios; evento salida_explorada para medir). Convierte datos falsos en leads "solo WhatsApp" medibles, y quien se va se lleva el rango y una buena experiencia: es de los que vuelve en el ciclo de 2 a 6 meses.
Para probar en este mockup
Celular terminado en dígito par = simula que coincide con Ubica (pasa sin OTP). Terminado en impar = pide OTP. Código de prueba: 1234. El enlace "¿Prefieres que no te llamemos?" está bajo el formulario del código.
← Atrás

Planes colectivos para empresas

Los planes colectivos se arman a la medida. Déjanos estos datos: te contactamos en menos de un día hábil.
NIT requerido (10 dígitos)
Número de empleados requerido
Celular requerido (10 dígitos, empieza por 3)
Correo requerido
¿Qué busca esta pantalla?
Atender bien un caso de mayor valor y proceso distinto: los planes colectivos se negocian a la medida, así que aquí solo se piden los datos de la empresa y pasa directo a un asesor especializado. En la Versión B se llega desde la pantalla de precios (aporte de Lorena).
Ajustes de la revisión de Martin
  • NIT en vez de razón social: menos digitación y dato limpio en el CRM. Aquí solo se captura el número, sin consultar ningún registro (decisión de Martin): la razón social se resuelve en la asesoría, así el flujo no paga consultas para un caso que de todas formas pasa por un asesor.
  • Celular obligatorio: WhatsApp es el canal real de contacto, un colectivo sin celular repetiría el problema de contactabilidad de personas.
  • Confirmación sólida en la tarjeta en vez del alert del navegador: el formulario desaparece, queda el estado verde con el celular confirmado y el tiempo de respuesta, y no se puede reenviar.
  • Sin ícono decorativo en el encabezado (brand voice: sin emojis decorativos; las demás pantallas usan emojis solo como marcadores para los SVG del design system).
← Atrás

Personas incluidas en el plan

Un paso más: tus precios detallados por plan.
¿Qué busca esta pantalla?
Armar el grupo completo, con los datos reales de cada persona, y entregar lo primero de valor: un rango de precio por persona y del grupo. Ese rango funciona como filtro de presupuesto natural: a quien no le alcanza se retira solo, sin que tengamos que hacerle una pregunta incómoda de plata.
¿Qué nos dicen los datos?
929 personas prefirieron quedarse solo con su EPS (el precio las sorprendió tarde, en la llamada) y 580 casos no tenían oferta posible por edad o salud y nadie se los advirtió antes. Esta pantalla pone esas dos verdades sobre la mesa desde el principio.
¿Qué decidimos y por qué?
  • Un documento no puede repetirse en el grupo (error humano frecuente: digitar la propia cédula en la tarjeta del afiliado); se valida contra el titular y los demás afiliados.
  • La cédula de cada afiliado es obligatoria para ver planes. Razón legal: como intermediarios no podemos presentar ofertas sin identificar a la persona. Si no tiene el documento a la mano, puede marcarlo: esa persona queda "pendiente", no ve ofertas, y el asesor completa el dato en la asesoría. Así el proceso no se frena y no incumplimos.
  • La EPS se pregunta a todos; sin EPS no se puede contratar (es requisito real, sobre todo en prepagada). La tarjeta de quien no tiene EPS pasa a revisión de asesor sin rango y queda fuera del total y de las ofertas, con el mensaje de que un asesor le orientará una alternativa (regla del spec; el QA de Martin encontró que se avisaba pero igual se mostraba rango).
  • La pregunta de salud tiene cuatro respuestas: No / Sí, en tratamiento con su EPS / Sí, diagnosticada / Prefiero contarlo en asesoría. La de tratamiento se agregó en la revisión de Martin: sin ella, quien está en tratamiento y busca mejor atención solo tenía la evasiva como salida honesta, y el asesor perdía el contexto. Ambas variantes de "sí" pasan a revisión de asesor, pero se guardan distintas en el CRM.
  • Si la edad no tiene plan en el producto elegido (ej. mayores de 65 en cobertura integral), la tarjeta se marca en rojo, se excluye del total y se sugiere la alternativa (ambulatoria o domiciliaria). No cambiamos el producto por su cuenta.
  • Las preguntas de EPS y salud del titular se responden aquí mismo, en su tarjeta (antes había un botón "Completar" aparte que confundía).
  • Excluirse no borra nada: si el titular ya había respondido sus preguntas y se excluye, al volver a incluirse sus datos regresan tal cual (caso 6 de la prueba de Martin).
  • Quien gestiona arranca incluido por defecto y sin avisos (prueba en primera persona de Martin: lo normal es querer estar, y el texto de la auto-inclusión generaba confusión). Salirse es un botón "No estaré en el plan" junto a Guardar; volver es el enlace "incluirme en el plan" de su tarjeta. La detección por coincidencia de edad sigue operando en silencio, solo para no duplicar a la persona.
  • Si nadie del grupo puede ver ofertas (documento pendiente, salud o edad), el botón cambia a "Continuar con un asesor": no mostramos planes, pero el interesado no se pierde — pasa directo a asesoría.
  • No se puede avanzar con personas a medio completar (ajuste tras mostrarlo a usuarios): cada persona agregada debe tener parentesco, fecha de nacimiento, EPS y salud antes de ver resultados. Lo único que puede quedar pendiente es el documento, y solo si se marcó "no lo tengo a la mano".
  • "No recuerdo su fecha de nacimiento exacta" (idea de Felipe): para los afiliados basta la edad — el rango se calcula igual y la tarjeta lo marca "(aprox.)". El titular sí da fecha completa (la exige la validación de identidad). Ajuste de Martin: la fecha completa es el camino por defecto (antes el modo edad venía preactivado y sugería que la fecha no importaba) y el año llega precargado desde la edad del grupo (año actual menos edad, acierto ±1).
  • Si la fecha de nacimiento de quien gestiona coincide con la edad de alguien del grupo que armó, asumimos que es esa persona y lo incluimos (una sola coincidencia). Si se excluye, ese cupo NO reaparece como tarjeta pendiente (ajuste del caso 7 de Martin: una persona surgiendo de la nada confunde a quien ya no tiene presente qué edades escribió en el home); si de verdad falta alguien, se agrega con "+ Agregar afiliado".
  • La ciudad es un campo más del formulario (revisión de Martin): en el titular llega preseleccionada de Ubica y se confirma ahí mismo; en los afiliados hereda la del titular, editable, sin gastar consulta de Ubica en precargarla. Desapareció el enlace "cambiar" aparte, que además no tenía forma de guardar. Segunda ronda: el campo es el autocomplete de producción (escribes y eliges), porque con 1.100 municipios un select no alcanza; en el mockup la lista es corta, en producción va el catálogo DANE completo.
  • Todo es editable después de guardar: cada tarjeta tiene su enlace "editar" que reabre el mismo formulario ya conocido, precargado con TODO lo capturado (parentesco, documento, fecha completa, ciudad, EPS y salud; bug corregido en la prueba de Martin: antes editar vaciaba documento y fecha). Si el documento no cambia, no se repite la consulta a Ubica.
  • Errores dentro del formulario: campos en rojo y mensaje junto al botón, sin ventanas del navegador. Y si Ubica no trae nombre o género con el documento, se preguntan ahí mismo (en el mockup: documento terminado en 00 lo simula).
  • Cargue visible al agregar (revisión de Martin): el botón pasa a "Consultando datos…" unos 2 segundos, para que se entienda que la consulta de identidad está ocurriendo y nadie toque dos veces. La consulta pasa al momento de Guardar (antes salía un "✓ nombre y género cargados" al escribir el documento, cuando aún no se había consultado nada). Y como registro civil y tarjeta de identidad no existen en la consulta de identidad, elegirlos muestra de una vez los campos de nombre y género, sin consulta ni cargue (dato de Martin).
  • La caja azul del total solo aparece con dos o más personas: con una sola duplicaba el rango de su tarjeta.
Opciones de EPS respaldadas por datos (revisión de Martin, jul-2026)
Las opciones rápidas "Sí, {EPS}" y su orden salen de los 2.250 comparativos de salud de los últimos 12 meses (OpenSearch): Sura 37%, Sanitas 24%, Nueva EPS 9%, Compensar 7%, Salud Total 7%, Famisanar 5% — el top 6 cubre el 88% de los casos. "Sí, Otra" abre el autocomplete de producción (campo "EPS": escribes y eliges del catálogo; ~7% de los casos). Los regímenes especiales (docentes, policía, militares) son el 4,8% y tienen su propia opción: existían como valores en el formulario actual y sin ella caerían mal clasificados en "Otra".
¿Qué descartamos?
Un diseño antiguo de Figma ("SALUD 2.0") pedía solo edad, género, ciudad y EPS por afiliado. Menos fricción, sí, pero dejaría que se presenten ofertas a personas sin identificar — el problema legal que queremos evitar.
Rangos de precio: derivados del motor cotizador (jul-2026)
Ya no son borrador ni usan bandas gruesas de edad: cada edad consulta su tramo real de tarifas y, si el motor no tiene plan de ese tipo para esa edad, el tipo no se muestra (decisión de Martin). Cómo se calcularon: tarifas mensuales con IVA del 5%; las tarifas anuales (Sura, Allianz) se convierten a cuota mensual financiada; el plan internacional cotiza en USD y se convierte a TRM $3.800; los recargos de Sura por "persona sola" van incluidos en el máximo. Regla de redondeo: el mínimo real se infla 5% y se redondea hacia arriba a la decena de mil, para que ningún plan real salga más barato de lo prometido; el máximo se redondea hacia arriba. Verificación: la referencia conocida (integral a los 59 años: $371.595 a $1.584.450 al mes) coincide con lo extraído del código. Ajuste posterior (observación de Lorena): varias aseguradoras tarifan distinto por género en la franja de 15 a 49 años, con pisos femeninos hasta 32% más altos en integrales. En vez de preguntar el género en el home (fricción por cada persona del grupo), por cada edad rige el género más costoso: así nadie ve un piso por debajo de su realidad, los hombres jóvenes ven un piso algo mayor y la sorpresa posterior va en la dirección buena (más barato de lo prometido). El precio exacto por género llega solo con la cédula: Ubica trae el género, igual que la ciudad.
← Atrás

Opciones para tu grupo

¿Dudas? Te asesoramos por WhatsApp Abrir WhatsApp
Ver:
Ver todas las opciones ↓
Cotizaciones sujetas a estudio de asegurabilidad y aprobación de la aseguradora.
¿Qué busca esta pantalla?
Mostrar pocas opciones bien elegidas (no un catálogo) y cerrar con una expectativa clara: el asesor te contacta en <24h.
¿Qué nos dicen los datos?
La causa #1 de pérdida es que no logramos contactar al cliente: 4.355 casos, más 964 que terminaron comprando por otro canal. Además, la página de resultados actual muestra 15+ planes sin orden ni recomendación — tanta opción paraliza.
¿Qué decidimos y por qué?
  • Vista por aseguradora como principal (decisión de Martin tras su "enigma" y la exploración de jul-2026): en salud se elige casa primero y luego se sube su escalera de planes — el catálogo real lo confirma (todas las aseguradoras venden familias por niveles) y la continuidad más el vínculo EPS-prepagada hacen la relación de largo plazo. Tarjetas por casa ordenadas por precio de entrada ("desde", con "Entrada más económica" en la primera), señas de casa del copy real, y al abrir: columnas por plan con precio, delta contra el peldaño anterior, score de coberturas reales ("cubre 63 de 154", huérfanas excluidas dinámicamente), "Todo lo de X, y suma: ✓..." con diferencias reales de la matriz de coberturas, "✗ No incluye" (el dato neutral que explica los planes baratos, dilema Coomeva resuelto sin señalar a nadie), desglose ✓/✗ por persona, y "Ver plan completo" hacia la página de detalle. El aviso ámbar de casa aparece cuando alguien no entra en ningún plan de esa casa (el "desde" nunca miente). La lista plana por precio queda como segunda vista (toggle): es el comparador crudo para quien lo prefiera, y su uso se mide (evento vista_resultados). Los "qué agrega" salen de la matriz real de 154 coberturas del archivo de copy; dental, domiciliarios e internacional tienen su PROPIA matriz de coberturas y secciones (Copy v2, jul-2026), con barra, desplegable y semáforo idénticos a integrales; ambulatoria es el único tipo sin matriz en el copy y degrada a atributos por validar. Internacional incluye los planes Bolívar+Bupa (Essential/Premier/Ultimate), vivos comercialmente pero sin tarifa en el motor: se muestran con "precio con tu asesor" (para el ingeniero: cargar sus tarifas al motor es pendiente). Referencia completa: 04_Pagina_resultados/exploracion-aseguradoras.html.
  • Los planes y precios de esta pantalla son REALES (pedido de Martin): catálogo completo del motor cotizador (35 planes, jul-2026) con tramos por edad y género, recargos por persona sola (Sura 51+ y Bolívar 46-55, +15%) y descuento EPS Sura ($11.969/mes). Verificación: reproduce EXACTA la cotización de producción auditada (mujer de 48, Sura EPS, sola): Coomeva Preferente $297.570, AXA Original Amparado $526.050, Colmédica Océano $658.383, Sura Clásico $779.850, Bolívar $831.968. Fuera del cálculo (aproximación): términos de pago distintos al mensual, Sura Alcance (sin tabla en el repo) y disponibilidad por ciudad. Los ATRIBUTOS de cada plan siguen siendo inventados, por validar con comercial.
  • Resumen de la cotización siempre visible (decisión de Martin): quién se cotiza y con qué datos (personas, edades, EPS, ciudad) más la fecha — esencial porque el link vive, se revisita semanas después y el asesor puede haber ajustado el contenido. De solo lectura; "Tu asesor lo ajusta por WhatsApp" abre el chat con el mensaje listo. Regla de una sola affordance (decisión de Martin): en la sesión de origen hay "Atrás" y edición y NO aparece este CTA (aún estás armando la cotización); en la revisita por link no hay "Atrás" y el ajuste va por el asesor. Tener ambas a la vez era contradictorio. Para el ingeniero: revisita = carga directa de la URL; origen = navegación interna del flujo. En el desktop de producción este resumen va como columna lateral fija (y de paso llena el espacio vacío que señaló la auditoría).
  • Vigencia de 30 días, sin recotización automática (decisión de Martin): pasados 30 días se sigue mostrando todo pero con el aviso de confirmar precios con el asesor. Se evaluó recotizar automáticamente al abrir (hoy sería gratis, todo es motor propio) y se descartó con visión de futuro: cuando las aseguradoras expongan web services, cada recotización tendrá costo externo. La comparison es LA MISMA por oportunidad de venta (y por oportunidad de Close); los ajustes guardan historial de lo cotizado antes. Alinear el texto legal: decía vigencia de 5 días, pasa a 30 (confirmar con legal).
  • "Atrás" y edición se mantienen; la protección anti-scraping va en el servidor (decisión de Martin, aclaración obligatoria para el ingeniero): quitar "Atrás" no detiene bots (pueden repetir el flujo completo variando edades) y castiga al usuario legítimo. La defensa real: (1) presupuesto de recotización por lead (~5 por día; superarlo → "un asesor te ayuda"); (2) rate limit por IP y dispositivo (mismo músculo de la lista de control por IP); (3) detección de patrón: la misma cédula cotizando muchas edades distintas = marca automática en la lista de control. Ningún humano cotiza 15 edades.
  • Esta pantalla ahora es insumo de diseño para reemplazar la página de resultados de producción (decisión de Martin tras la auditoría de jul-2026, ver 04_Pagina_resultados/auditoria-resultados-actual.md). Lo que corrige de la actual: orden de más barato a más caro con el tag "El más económico" (en producción el más barato estaba enterrado de octavo entre 13 tarjetas sin orden); atributos diferenciadores por plan (2 por tarjeta, POR VALIDAR con comercial: sin ellos comparar exigía abrir cada detalle); asesoría visible en la página (botón directo a agendar + contacto en menos de 24h; la actual no ofrecía ningún asesor); "/mes por persona · IVA incluido" explícito; y el aviso legal contenido (en producción se desborda del ancho). Para producción además: el FAQ de SEO va DESPUÉS del bloque de asesoría, la URL compartible se conserva tal cual, y los logos reales reemplazan el nombre de la aseguradora en texto.
  • Adiós al teal (decisión de Martin, jul-2026): salud venía probando el teal como color experimental de marca (existe hasta un tema Material con teal en canguro-ui: health-theme-colors.scss, #006666) y quedó descartado. Este rediseño consolida la paleta principal (azul #090089 / #143cff) en todo el flujo de salud, resultados incluidos; al implementar, retirar el tema teal.
  • El tipo de plan es un filtro ajustable (ajuste de Felipe): se puede cambiar sin repetir el flujo — se recalculan los planes y quién entra en cada uno. Primero fue un desplegable; por feedback de Javier ahora son chips horizontales: todas las opciones visibles sin abrir nada, un toque para cambiar, el activo resaltado, y los tipos sin oferta para el grupo aparecen tachados y deshabilitados en vez de ser un callejón sin salida. Mismo orden por peso comercial que la pantalla de precios.
  • Filtro por clínica de preferencia (decisión de Martin, jul-2026, tratamiento "atenuar"): ciudad (precargada con la del titular) + autocomplete de clínica; los planes sin convenio se ATENÚAN (no desaparecen) y cada casa dice desde qué peldaño entra la clínica ("✓ Clínica del Country · desde Fesalud Amparado") — los convenios son POR PLAN y las mejores clínicas suelen estar en los planes altos: el filtro es también argumento de upgrade. CONVENIOS DE MUESTRA: el modelo de datos plan-clínica-ciudad hay que construirlo (hoy vive en PDFs y buscadores de cada aseguradora). El directorio completo (médicos + clínicas) va en la página de detalle. Evento clinica_filtrada — oro de preferencias para Cangurolytics.
  • Comparador (decisión de Martin, jul-2026, variante "resumen + diferencias"): hasta 3 planes con checkbox, barra fija abajo, y al comparar: resumen del asistente ("X es la más económica; Y cuesta $Z más y suma sobre todo maternidad...") + tabla de SOLO DIFERENCIAS agrupada por sección — la solución al problema histórico de comparar 3 planes en celular: las diferencias son 20-40 filas (no 144) y la primera columna va fija al deslizar. En el mockup el resumen se genera con reglas sobre las matrices reales; en producción lo genera un LLM con esas matrices como contexto y guardrails para jamás inventar coberturas. Evento comparacion_creada. Refinado contra la referencia REAL de autos (revisada en vivo, jul-2026): al marcar el primer "Comparar" se entra en modo comparación y los CTAs "Ver plan completo" desaparecen de todas las tarjetas; barra fija inferior con slots [Casa | Plan] separados por "vs.", cupo punteado, Cancelar y Comparar; y la comparación es PÁGINA PROPIA con URL compartible (/comparar/planA/planB) para que el asesor la envíe al cliente — en autos ese enlace es herramienta de cierre. Botones alineados a producción: "Ver plan completo" sólido (azul/blanco, como "Ver más" de autos); el outline queda para acciones secundarias.
  • Red y beneficios destacados (decisión de Martin, jul-2026): chip gris con la etiqueta de red del plan (taxonomía por construir, placeholders) + chips verdes de beneficios destacados curados por comercial o la aseguradora (máx 1-2: "+ Reembolso médicos", "+ Clínica VIP sin costo"...). COPAGOS quedó fuera de resultados: solo página detallada; un "sin copagos" real entraría como beneficio destacado.
  • REGLAS QUE EL DEMO NO SIMULA (spec de producción — paquete de revisión 14-jul-2026; el ingeniero NO debe heredar el comportamiento actual del demo en estos puntos): nombre de aseguradora siempre en texto, logo como mejora progresiva (H-02); caché de consultas Ubica + si la edad de Ubica difiere de la digitada se pide confirmación (H-13); la vista de bloqueo restaura el formulario al reentrar (H-04); editar a quien respondió "No tengo EPS" vuelve a su opción original (H-06); recargo persona-sola por CUBIERTOS del plan, no por elegibles del grupo (H-11); el celular editado en OTP valida 3XXXXXXXXX y resetea el timer de reenvío (H-09); contrato del calendario de asesores: festivos, ocupados, zona horaria, duración (H-12); preexistencia binaria sin detalle + validar con Alejandro que la autorización del cotizante cubre la pregunta sobre terceros (H-15); URLs legales de /seguro-voluntario/ aplican a salud, alinear vigencia 5→30 días con legal (H-16); enlace compartible con token largo revocable, expiración, noindex y jamás datos personales en la URL (H-17); NIT acepta 9 o 10 dígitos y normaliza el servidor (H-18); en producción la URL lleva el estado desde el primer render de resultados — el reset al recargar es solo del demo (H-23); accesibilidad como estándar de construcción: elementos nativos, labels asociados, foco gestionado, aria-live en errores, targets ≥44px (H-46/47); menores móviles: chips deshabilitados explicados sin hover, salida de la vista de seguimiento, alto de la barra de comparación (H-32b).
  • Orden de más barato a más caro, y la vista corta muestra el plan más barato de 3 aseguradoras distintas — el mismo criterio de autos (decisión de Martin). Se quitó la etiqueta "Recomendado": aún no hay con qué recomendar honestamente.
  • Cada plan abre su página detallada (la que ya existe en producción) y ahí el CTA es "Agendar asesoría" en vez de "Hacer solicitud": la cita se le ofrece a quien ya eligió un plan — máxima intención, mínima fricción para el resto.
  • "Personas incluidas" con ✓/✗ en cada plan (idea rescatada de un diseño antiguo en Figma): cuando el grupo es mixto, cada plan muestra a quién cubre y a quién no.
  • Las etiquetas amarilla (Póliza de salud) y morada (Medicina prepagada) son las mismas de la página actual.
  • Se retiró la agenda de asesoría (ajuste del equipo tras testear): quien completa el flujo se contacta siempre, sin pedirle otro paso. Ojo con la tensión: la agenda atacaba directamente los 4.355 sin contacto — ese peso recae ahora en el seguimiento por WhatsApp con los botones "priorizar" y "cancelar". Vale la pena medirlo.
  • El botón "ver el seguimiento" existe solo en el mockup, para que el equipo revise los mensajes; el cliente real no lo ve.
Por validar
Los planes y precios mostrados son inventados. Nota aparte para desarrollo: el título de la pestaña en la página de resultados actual dice "Seguro de Auto…" — corregirlo.
← Atrás

Pago mensual (IVA incluido)
¿Qué busca esta pantalla?
Es la página detallada del plan que ya existe en producción (coberturas con ✓/✗, precio, ficha de la aseguradora), en versión resumida para el mockup. El cambio importante está en el botón.
¿Qué decidimos y por qué?
  • El CTA pasa de "Hacer solicitud" a "Agendar asesoría" (propuesta de Martin): hoy "Hacer solicitud" lleva a una pantalla de "gracias, te contactaremos" — el cliente queda esperando. Quien llegó hasta aquí ya eligió un plan concreto: es el momento de máxima intención, y ahí la cita agendada por él mismo vale oro.
  • La agenda vuelve al flujo pero solo en este punto: no se le pide a todo el mundo (eso se retiró por fricción), se le ofrece a quien ya demostró interés real. Ataca la pérdida #1 (4.355 sin contacto efectivo) sin encarecer el flujo general.
  • Quien no agenda igual queda cubierto por la promesa de contacto en <24h y el seguimiento de WhatsApp.
Por validar
Las coberturas mostradas son genéricas por tipo de plan (inventadas). En producción esta página ya existe con el detalle real por plan — se conserva tal cual, solo cambia el CTA.
← Resultados

Comparación

Tu asesoría quedó agendada

Te llega la invitación por WhatsApp y correo, con un recordatorio antes de la cita.
← Atrás

Agenda tu asesoría

Un especialista te acompaña a decidir. Tú eliges cuándo.
Videollamada
Llamada
WhatsApp
¿Qué busca esta pantalla?
Convertir la intención máxima (ya eligió un plan) en una cita en firme, con el canal y el momento que el cliente prefiera. El asesor deja de perseguir: llama a alguien que lo está esperando.
Por validar
Herramienta de calendario real (Teams/Zoom conectado a Close) y disponibilidad de los asesores. Los horarios mostrados son de muestra.
VISTA INTERNA — el cliente no ve esta pantalla

Lo que recibe por WhatsApp

Seguimiento automático (HSM) tras completar el flujo.
¿Qué es esto?
Los mensajes automáticos de WhatsApp (técnicamente se llaman HSM: plantillas aprobadas que se envían desde nuestro sistema) que la persona recibe después de terminar el flujo. Esta pantalla es solo para que el equipo vea cómo se verían.
¿Qué busca?
Cerrar el ciclo de contacto: el enlace "ver mis resultados" le permite retomar cuando quiera, el botón "priorizar" invierte los papeles (el cliente pide la llamada en vez de que lo persigamos), y "cancelar" limpia la lista del asesor. Tras retirar la agenda, este seguimiento es la principal herramienta contra la pérdida por no-contacto.
¿Qué nos dicen los datos?
Contra los 4.355 casos sin contacto efectivo: cada mensaje es una oportunidad de re-enganche que hoy no existe de forma sistemática. Y los 3.003 que "no desean cambiar su plan actual" ya no se preguntan en el flujo (ajuste del equipo): se detectan por la perfilación y por cómo responde la persona a estos mensajes, y el asesor ajusta su discurso.
¿Qué decidimos y por qué?
  • Quien no responde pasa a una secuencia de correos informativos (por Brevo, nuestra herramienta de email).
Por hacer
Redactar los textos definitivos de estos mensajes y de los correos antes de lanzar.