Mobile · Performance · UX
Rediseño Cards — Comparador Mobile
Estandarización completa de las tarjetas del comparador de productos: nuevo L&F mobile-first, jerarquía visual clara y un patrón único que se adapta a cada producto sin perder la información crítica para la conversión.
El problema
El comparador de productos tenía un problema estructural: las tarjetas no estaban estandarizadas. Cada producto mostraba su información de manera diferente — tamaños, espaciados y elementos dispuestos sin criterio, lo que hacía que la grilla se viera caótica y rompiera la comparación visual entre opciones.
En desktop la inconsistencia era visible; en mobile era crítica. El 60% de nuestros usuarios navega desde el celular y se encontraba con cards que no alineaban, coberturas cortadas y precios sin jerarquía. Una experiencia que generaba desconfianza y, con ella, abandono del flujo.
Antes — inconsistencias en la grilla
La solución
Definimos un patrón de card único: una estructura fija con zonas claras para nombre, coberturas y precio, donde cada parámetro puede activarse o desactivarse según el producto pero sin alterar el layout base. Así todas las cards alinean en la grilla y la comparación visual es posible.
Aprovechamos el momento para rejuvenecer la aplicación con el nuevo L&F: colores, tipografías y tamaños actualizados al sistema de diseño vigente. Por la velocidad que requería la situación — era un problema crítico de negocio — salteamos el diseño en alta en Figma e iteramos directamente en código usando Claude AI, apoyados en la gran estandarización que ya teníamos en el DS.
Después — grilla consistente
Las cards
Resultados
- 60% De usuarios con problemas en mobile (resuelto)
- +10% Incremento esperado en conversión mobile
¿Querés ver otros proyectos?