Rediseño UX del Checkout Mobile Rali-e para Colombina
Análisis y rediseño del flujo de compra móvil para reducir fricción, aclarar el uso de monedas/puntos y aumentar la confianza del usuario al confirmar su pedido.
Mi Rol
UX/UI Designer
Resumen
Rediseño conceptual del checkout mobile de rali-e ventas, enfocado en simplificar el proceso de compra, hacer visible el saldo final y comunicar con mayor claridad el uso de monedas/puntos.
Problema
El checkout anterior generaba fricción por exceso de pasos, información financiera dispersa, reglas de negocio poco claras y estados de error insuficientes, especialmente en pago, monedas/puntos y confirmación.
Objetivo
Construir un flujo más predecible: carrito, checkout, revisión y confirmación; reduciendo incertidumbre, protegiendo beneficios y permitiendo recuperarse ante errores sin abandonar la compra.
Investigación & Hallazgos
Métodos
- • Evaluación heurística UX/UI
- • Journey map del checkout anterior
- • Sitemap del flujo de compra
- • User flow con estados de error
Enfoque del análisis
Fricción, abandono y riesgo de pérdida o mala comprensión de monedas/puntos durante la compra.
Monedas y puntos poco protegidos
La redención no se percibía suficientemente explicada. El usuario podía sentir riesgo de perder beneficios si el pago fallaba, expiraba o quedaba pendiente.
Saldo final sin protagonismo
Subtotal, descuentos, IVA, envío y monedas competían visualmente. El usuario no identificaba con facilidad el valor final a pagar.
Errores sin recuperación clara
Faltaban validaciones visibles y mensajes específicos para casos como dirección incompleta, método de pago no seleccionado, envío no disponible o error al procesar.
Flujo percibido como largo
El journey evidenció carga cognitiva acumulada por exceso de pasos, decisiones separadas y reglas de negocio comunicadas tarde.
Proceso de Diseño
Decisiones Estratégicas
Flujo principal en 4 etapas
Se estructuró la compra en carrito, checkout, revisión y confirmación para reducir incertidumbre y hacer visible el avance del usuario.
Saldo final y monedas/puntos visibles
El resumen debe mostrar el total estimado con envío, descuentos y monedas aplicadas desde etapas tempranas, y reforzarlo en revisión.
Estados de error accionables
Se mapearon errores por mínimo de compra, método de pago, redención de monedas, dirección, envío, términos y procesamiento del pedido.
Revisión como punto de control
Antes de confirmar, el usuario debe poder validar dirección, envío, método de pago, productos, descuentos, monedas y saldo a pagar.
Artefactos UX
User Flow, Sitemap, Journey Map y Evaluación Heurística
Haz click sobre cualquier imagen para verla en grande.
1. Carrito
Revisión de productos, cantidades, descuentos, monedas disponibles y validación del mínimo de compra.
2. Checkout
Selección de método de pago, aplicación de monedas/puntos, dirección, envío y fecha estimada de entrega.
3. Revisión
Confirmación de dirección, envío, pago, productos, resumen de compra, términos y saldo final a pagar.
4. Confirmación
Pedido recibido, estado del pago, número de pedido, detalle de entrega y claridad sobre monedas acumuladas o redimidas.
Prototipo de alta fidelidad
Flujo optimizado de compra en rali-e
El prototipo traduce los hallazgos UX en una experiencia de checkout más clara, progresiva y confiable. Se prioriza la visibilidad del total a pagar, la comprensión de monedas/puntos, la revisión previa del pedido y una confirmación final con estado del pago y datos relevantes.
Carrito con resumen visible
El usuario revisa productos, cantidades, entrega, descuentos y total de la orden antes de avanzar.
Pago y monedas/puntos
Se muestra saldo actual, monto a redimir, límite de uso y saldo final a pagar para reducir incertidumbre.
Revisión antes de pagar
Se agrupan dirección, envío, método de pago, productos, monedas redimidas y saldo final.
Confirmación del pedido
La pantalla final comunica que el pedido fue recibido, muestra estado, número de pedido, entrega, pago y resumen.
Estados de error diseñados
E1 · Monto mínimo no alcanzado
El usuario debe ver el valor faltante y una acción clara para volver al carrito.
E2 · Método de pago no seleccionado
Se indica el campo pendiente y se ofrece volver directamente a la selección.
E3 · Error al aplicar monedas
El sistema aclara que no se aplicó la redención y permite intentar nuevamente.
E4 · Dirección incompleta o inválida
Se muestran campos obligatorios pendientes y una acción para editar dirección.
E5 · Envío no disponible
Se informa la restricción de cobertura o fecha y se permite elegir otra opción.
E6/E7 · Términos o procesamiento
El usuario recibe mensajes recuperables: aceptar términos, intentar de nuevo o contactar soporte.
Priorización & Resultado UX
La evaluación heurística mostró que el problema principal no era solo visual: el checkout anterior presentaba fricción, sobrecarga y ambigüedad en dinero, puntos y confirmación del pedido.
Cambios clave propuestos
- check_circle Mostrar pasos claros: carrito, checkout, revisión y confirmación.
- check_circle Destacar un único valor principal: saldo final a pagar.
- check_circle Confirmar cuándo las monedas se aplican, se reservan o se devuelven.
- check_circle Diseñar errores claros, acciones de recuperación y estados pendientes.
lightbulb Aprendizajes
- • En un checkout, cada ambigüedad sobre precio, descuentos o monedas se convierte en riesgo de abandono.
- • Las monedas/puntos deben tratarse como dinero: requieren trazabilidad, confirmación y recuperación clara ante fallos.
- • La revisión del pedido debe ser el momento de mayor claridad, no una pantalla con sobrecarga de datos.
Conclusión UX senior
El rediseño debe reducir fricción acumulada, hacer explícito el estado de pago y proteger la confianza del usuario frente al uso de monedas, beneficios y confirmación del pedido.
Conversemos sobre tu proyecto