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, entregado en Figma.
Ver en Figma (se abre en una pestaña nueva)
- Rol
- Diseñador UI/UX
- 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. Partí de una vista en ambiente de desarrollo, hice una auditoría de su estructura UI/UX y entregué el diseño actualizado en Figma, incluyendo las imágenes del sitio.
La vista en desarrollo tenía errores de interfaz y una estructura poco clara justo donde el usuario decide comprar: campos con textos de ejemplo que no correspondían al dato solicitado, jerarquía plana entre los planes y una compra en línea que no dejaba ver en qué paso iba el usuario ni cuánto le faltaba para terminar.
Me encargué del análisis de la interfaz, del rediseño completo de la UI en Figma y de la creación de las imágenes del sitio, entregando las pantallas listas para implementación.
Decisiones clave
Reordené la landing y el flujo de compra completo: una comparativa de planes, un checkout 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 tenía una jerarquía plana entre los planes: nada ayudaba a decidir.
Lo que hice. Armé una comparativa con el plan más elegido destacado y reordené la landing completa: hero, beneficios, cómo funciona, planes y preguntas frecuentes.
Por qué. Para que la diferencia entre coberturas sea evidente antes de decidir.
Progreso visible en cinco pasos
Problema. La compra en línea no dejaba ver en qué paso iba el usuario ni cuánto le faltaba para terminar.
Lo que hice. Reorganicé la compra en cinco pasos claros, con el resumen del plan y la ayuda visibles en todo momento, y reuní beneficiarios, declaración de salud y dirección en un solo formulario ordenado.
Por qué. Para que el usuario sepa dónde está, qué está comprando y cuánto falta.
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 de más.
Lo que hice. Agregué una consulta por NIT o DPI que valida el documento en verde y permite corregir la búsqueda.
Por qué. Para que el usuario escriba lo mínimo y confirme lo demás.
Pago con confirmación protegida
Problema. La interfaz tenía errores y estados poco claros justo donde el usuario decide comprar.
Lo que hice. Diseñé estados de validación claros en cada campo, un botón de confirmar inactivo hasta elegir el método de pago y el aviso de seguridad visible antes de confirmar.
Por qué. Para evitar errores antes de que ocurran y que el usuario confirme con seguridad.
Cómo lo trabajé
- Auditoría de la interfazRecorrido completo de la vista en desarrollo documentando 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
- 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.
