Seguros CHN · 2026 · Seguros · UI/UX

Rediseño del flujo de compra de Vida Dental

Rediseño de la interfaz y del flujo de compra en línea de un seguro de vida con cobertura dental, presentado en Figma.

Ver en Figma (se abre en una pestaña nueva)

Primera pantalla de la landing de Vida Dental: «Protege tu sonrisa, y a los que amas» con el botón de compra — El encabezado de la landing rediseñada: el beneficio principal y la acción de compra, en la primera pantalla.

Rol: Diseñador UI/UX, prueba técnica
Herramientas: Figma, auditoría UI/UX, diseño de formularios, recursos visuales
Entregables: Pantallas y recursos visuales en Figma, listos para implementación

Contexto y problema

Rediseño de la interfaz y del flujo de compra en línea de un seguro de vida con cobertura dental. Se partió de una vista en ambiente de desarrollo, se realizó una auditoría de su estructura UI/UX y se presentó el diseño actualizado en Figma, incluidas las imágenes del sitio.

La vista en desarrollo presentaba errores de interfaz y una estructura poco clara en el punto en que el usuario decide comprar: campos con textos de ejemplo que no correspondían al dato solicitado, jerarquía plana entre los planes y un proceso de compra que no indicaba en qué paso se encontraba el usuario ni cuánto faltaba para finalizar.

Mi responsabilidad abarcó el análisis de la interfaz, el rediseño completo de la UI en Figma y la creación de las imágenes del sitio, con pantallas listas para su implementación.

Decisiones clave

Se reordenó la landing y el flujo de compra completo: una comparativa de planes, un proceso de cinco pasos con progreso visible y resumen de compra siempre presente, estados de validación claros en cada campo y un sistema visual alineado a la identidad de la institución.

Comparativa de planes

Problema. La landing no jerarquizaba los planes, lo que dificultaba la decisión.

Decisión. Se diseñó una comparativa con el plan más elegido destacado y se reordenó la landing: encabezado, beneficios, funcionamiento, planes y preguntas frecuentes.

Motivo. Hacer evidente la diferencia entre coberturas antes de decidir.

Comparativa de los planes Básico, Oro y Signature, con el plan Oro destacado como el más elegido — El plan Oro lleva la etiqueta «Más elegido» y es el único con el botón en color de acción; los tres planes presentan sus coberturas en el mismo orden.

Progreso visible en cinco pasos

Problema. El proceso de compra no mostraba en qué paso se encontraba el usuario ni cuánto faltaba para terminar.

Decisión. Se reorganizó la compra en cinco pasos claros, con el resumen del plan y la ayuda visibles en todo momento, y se reunieron beneficiarios, declaración de salud y dirección en un solo formulario ordenado.

Motivo. El usuario sabe en qué etapa se encuentra, qué está contratando y cuánto falta.

Paso 3 de la compra: formulario de información adicional con barra de progreso y resumen de compra — Paso 3: beneficiarios, declaración de salud y dirección en un solo formulario ordenado, con el progreso en la parte superior y el resumen del plan a un lado.

Datos personales por NIT o DPI

Problema. Los campos tenían textos de ejemplo que no correspondían al dato solicitado y el usuario debía escribir más de lo necesario.

Decisión. Se incorporó una consulta por NIT o DPI que valida el documento y permite corregir la búsqueda.

Motivo. Reducir la escritura al mínimo y que el usuario solo confirme el resto.

Paso 2: formulario con los campos NIT y DPI vacíos — La consulta por NIT o DPI evita que el usuario escriba información de más.

Paso 2 con el NIT y el DPI validados en verde — Los documentos se validan en verde y, si la información no es correcta, el usuario puede realizar una nueva búsqueda.

Pago con confirmación protegida

Problema. La interfaz presentaba errores y estados poco claros en el punto en que el usuario decide comprar.

Decisión. Se diseñaron estados de validación claros en cada campo, un botón de confirmación inactivo hasta elegir el método de pago y el aviso de seguridad visible antes de confirmar.

Motivo. Prevenir errores antes de que ocurran y permitir que el usuario confirme con confianza.

Paso 4: tres métodos de pago sin seleccionar y el botón de confirmar inactivo — El botón de confirmar permanece inactivo hasta elegir una opción de pago.

Paso 4 con la tarjeta seleccionada, los campos de la tarjeta y el aviso de seguridad — Pago con tarjeta, con el aviso de seguridad visible antes de confirmar.

Proceso

Auditoría de la interfazRecorrido completo de la vista en desarrollo, con documentación de errores, inconsistencias y puntos de fricción del flujo.
Reestructura del flujoReorganización de la compra en cinco pasos claros, con el resumen del plan y la ayuda visibles en todo momento.
Diseño de UI en FigmaSistema de componentes, tipografía y color institucional aplicados a landing, formularios, pago y confirmación.
Recursos visualesCreación de las imágenes del sitio para acompañar el mensaje de cada sección.

Resultados

5 pasosFlujo de compra con progreso y resumen visibles.

NIT o DPIUna única consulta para los datos personales.

Flujo de compra reorganizado en 5 pasos con progreso y resumen visibles.
Datos personales consultados por NIT o DPI.
Errores de interfaz del ambiente de desarrollo documentados y resueltos en el diseño entregado.
Comparativa de planes que hace evidente la diferencia entre coberturas antes de decidir.
Pantallas y recursos visuales entregados en Figma, listos para implementación.

Paso 5: confirmación «Tu seguro está activo» con el número de póliza — Confirmación con el número de póliza y la descarga del contrato.

Siguiente casoLiftCentro: rediseño de una landing de conversión

¿Tiene un proyecto similar? Conversemos.

Enviar un correo