Diseño de checkout y home para Coop Seguros

checkout-form

Home y Checkout form

Reducir la fricción en el proceso de contratación.

Problemática.

La problemática inicial planteada por el cliente fue la baja tasa de conversión y por ende el alto porcentaje de rebote (bounce rate), principalmente para su Sección de Cotización. Las interacciones del usuario con el contenido del sitio eran de períodos de tiempo muy bajos y las tareas que debía realizar no se concretaban.

Aplicamos metodología acorde a esta problemática. Design Thinking.

Para la primera etapa nos detuvimos a analizar y evaluar con que arquetipo de usuarios estabamos trabajando. Cuales eran sus motivaciones, qué tareas específicas necesitaban realizar, cuales eran sus puntos de dolor, entre otras cosas. ENPATIZAMOS.

Prueba Heurística.

Como primera medida realizamos una evaluación heurística integral. Analizamos la página de inicio, la orientación de las tareas, la navegabilidad y arquitectura de la información, los formularios y por supuesto, la calidad del contenido, entre otras cosas.

Heatmaps y entrevistas.

Además de la evaluación heurísticas hicimos pruebas de uso e instalamos widget de mapas de calor (Hotjar) para conocer parte del comprotamiento de los usuarios mientras navegaban el sitio.

Pudimos entender cómo el usuario interactuaba con el contenido a través de entrevistas a usuarios reales. No sólo a este "Visitante cotizador" sino a Asegurados y Productores.

Esto fue realizado en dos instancias, previa a nuestra propuesta y con nuestra propuesta puesta en práctica.

Solución.

Con una profunda reformulación de la estructura y una nueva propuesta adaptada al objetivo de los usuarios, logramos reducir la cantidad de pasos del checkout a la mitad y generar un flow simplificado sin resignar información valiosa en la contratación de un seguro.

Mejora de la propuesta de valor en la home.

Un punto clave para mejorar la tasa de conversión.

Otra problemática detectada fue que el sitio no estaba ofreciendo claramente su propuesta de valor. Debíamos reformular no sólo su estructura sino mostrar de manera clara la información que el usuario estaba buscando. Hacerla más accesible y transparente.

Por lo que sin resignar información que el cliente quería y debía conservar en su sitio, la reagrupamos y replanteando una nueva estructura, poniendo lo más relevante al alcance del usuario.

Un ejemplo de eso fue el rediseño de el header. Decidimos dividirlo en dos secciones bien marcadas. Una para los accesos a Asegurados y Productores, más Ayuda y Contacto. Y un segundo nivel más destacado para las pestañas de Productos y el CTA de Cotizar.

ANTES

AHORA

UI Kit en concordancia con los valores estéticos y gráficos de la compañia.

Skills puestos en práctica:

✅ Roadmap y seteo de deadlines.

✅ Design Thinking - Double Diamond

✅ Evaluación heurística

✅ Benchmark de competidores

✅ Entrevistas de usuarios

✅ Ley de Hick

✅ Evaluación e iteración del sitemap

✅ A/B testing.

✅ UI Kit (Tipografía, reajuste de color, ilustrationes e íconos custom, composición)

✅ Redefinición del contenido (en coordinación con el equipo de marketing de Coop Seguros)

✅ Sketching, wireframing y prototipado.

Herramientas:

✅ Figma

✅ Adobe Illustrator.

Proyecto para la compañia Leadaki para el cliente Coop Seguros en equipo con las diseñadoras Ana Alvarez y @Agustina Lopez Malgor.

Marcelo Vera
Diseñador gráfico / UX/UI

More by Marcelo Vera

View profile