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)
- Rol
- Diseñador UI/UX
- Herramientas
- Figma, auditoría UI/UX, diseño de formularios, recursos visuales
- Entregables
- Pantallas y recursos visuales en Figma
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.
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.
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.
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.
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.
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
- Flujo de compra reorganizado en 5 pasos con progreso y resumen visibles.
- Datos personales consultados por NIT o DPI.
- Errores de interfaz de la vista en desarrollo identificados y resueltos en la propuesta de diseño.
- Comparativa de planes que hace evidente la diferencia entre coberturas antes de decidir.
- Propuesta presentada en Figma: pantallas y recursos visuales de la landing y del flujo de compra.
