UX · Conversión · Checkout

Rediseño Pasarela de Pago

Un rediseño crítico que duplicó la tasa de conversión del checkout — del 30% al 60% — y desencadenó una transformación de negocio que abrió nuevas líneas de ingresos para la compañía.

Rol
Product Designer & UI Developer
Lead del rediseño
Stack
Figma · Angular
Hotjar · GA4
Período
Fines 2024 — 2025
Impacto en curso

La pasarela era un cuello de botella claro: el flujo por pasos era inconsistente, los campos aparecían sin agrupación semántica y la grilla no tenía estructura. Cada paso del checkout podía verse visualmente distinto al anterior, lo que generaba desconfianza en un momento crítico del proceso de compra.

Los problemas funcionales agravaban la situación: los dropdowns de fecha y los campos de autocompletado se abrían en posiciones incorrectas, rompiendo el flujo. En mobile la experiencia era prácticamente inutilizable — lo que representaba una pérdida directa de contratos, considerando que una porción significativa del tráfico llega desde el celular.

Pasarela de pago antes del rediseño — campos sin agrupación, grilla inconsistente

Aplicamos heurísticas de diseño para ordenar el checkout desde la raíz. La agrupación semántica de campos (Ley de Proximidad de Gestalt) resolvió la confusión visual: los datos de contacto, los datos del producto y los datos de pago pasaron a estar claramente diferenciados. Los estilos visuales se estandarizaron en todos los pasos del flujo para generar coherencia y confianza.

Incorporamos múltiples medios de pago — incluyendo Mercado Pago — eliminando una de las principales causas de abandono: la falta de opciones. La experiencia mobile fue reconstruida desde cero: campos bien dimensionados, datepickers que respetan el viewport y un flujo que realmente funciona desde un teléfono.

Pasarela rediseñada — paso 1, datos agrupados
Pasarela rediseñada — paso 2, medios de pago
Pasarela mobile rediseñada — paso 1 Pasarela mobile rediseñada — paso 2
Pasarela rediseñada — diseño final paso 1 Pasarela rediseñada — diseño final paso 2

El rediseño de la pasarela no fue solo una mejora de UX — fue el detonante de un cambio estratégico. La nueva experiencia demostró la capacidad de la plataforma para sostener flujos de pago de calidad, lo que impulsó el proyecto Showcases: un servicio donde QuePlan presta su infraestructura a terceros para vender sus productos.

Efecto Showcases

Nuevos proveedores se acercaron a la empresa para usar la plataforma como canal de venta. Los ingresos de la compañía crecieron y se abrió un abanico de proyectos que no existían antes. Un rediseño de checkout se convirtió en una nueva línea de negocio.

¿Querés ver otros proyectos?