Checkout · Liberty · 2026

La misma compra, antes y después.

Liberty Club es un e‑commerce sin comisiones, con cinco medios de pago en pesos y con blockchain.

El problema
La compra andaba, pero no siempre decía la verdad.
Lo que hice
Rediseñé cómo se ve y cómo se recorre.
El resultado
En producción en 9 días.

Seguí bajando

El checkout de Liberty, rediseñado: el paso de pago, con los cinco medios de pago
  • RolUX Lead
  • Tiempo23 de septiembre al 1 de octubre de 2026
El problema

La compra andaba, pero no siempre decía la verdad.

Lo que hice

Rediseñé cómo se ve y cómo se recorre.

Y dirigí su construcción asistida por IA. Los pagos, el envío y la compra sin cuenta ya los había construido un compañero.

El resultado

En producción en 9 días.

Cinco bloques, cada uno entregado por separado.

Herramientas: Claude, prototipos navegables en HTML, Linear y GitHub.

Antes y después

Antes

Después

Tus datos

Son capturas de prueba, con los mismos datos de los dos lados.

Decisión 1 de 4

Cada paso hecho queda a la vista.

Antes, lo cargado dejaba de verse y, para cambiarlo, había que volver paso por paso. Ahora queda arriba, con «Editar».

Checkout de Liberty, el paso Pago: arriba, el envío ya elegido con el botón «Editar»; abajo, los cinco medios de pago con el monto de cada uno

Decisión 2 de 4

El envío muestra su costo real.

Antes podía decir «ARS 0,00» aunque el envío no estuviera en el total. Ahora, «A definir» hasta que se elige y «Sin cargo» solo si de verdad no cuesta.

Checkout de Liberty: el resumen de la compra antes de elegir el envío, con la línea Envío «A definir»
Sin elegir el envío
Checkout de Liberty: el resumen con retiro en la tienda, con la línea Envío «Sin cargo»
Con retiro en la tienda

Decisión 3 de 4

La pantalla final dice lo que pasó de verdad.

Antes decía «¡Compra Exitosa!» con cualquier medio, aun con una transferencia sin confirmar. Ahora, un título por situación, y «Compra exitosa» solo con el pago aprobado.

Checkout de Liberty, antes: una compra con transferencia que decía «¡Compra Exitosa!» antes de que el vendedor confirmara el pago
Antes
Checkout de Liberty, después: la misma compra con transferencia, con «Recibimos tu comprobante» y un reloj de espera
Después

Decisión 4 de 4

En celular, el botón siempre a mano.

Antes el botón quedaba al final, debajo de los productos. Ahora va en una barra fija, a todo el ancho, con el resumen plegado que se abre al tocarlo.

Checkout de Liberty en el celular, antes: el menú del sitio, la tienda, los productos y recién después el formulario
Antes
Checkout de Liberty en el celular, después: el formulario arriba y una barra fija abajo con «Ver resumen», el total y «Continuar al envío»
Después

En equipo

Cinco bloques, con las reglas del equipo.

Cada uno se revisó aparte y entró con las ramas, títulos y descripciones del equipo. Cuando el código de un compañero cambió en el medio, conservé sus cambios y los dejé listados en el PR.

Cuándo se construyó cada bloque

  1. Plan. Rediseño visual, en cinco bloques.23/09
  2. Prototipo navegable. Cuatro rondas.27 al 29/09
  3. Marco. Barra propia, sin el menú del sitio.28/09
  4. Pasos.29 y 30/09
  5. Resumen. Uno solo, en lugar de dos.30/09
  6. Carga. La silueta de la página desde el primer instante.30/09
  7. Resultados.30/09
  8. En producción. Esa noche, cinco arreglos.01/10

La prueba en producción

Lo recorrí como comprador y arreglé cinco cosas.

Fue la noche en que salió. Las cinco dependían de datos reales, que solo había en producción.

  1. El teléfono autocompletado con el 0 adelante perdía el último dígito.
  2. Entrar con una cuenta real de Google no volvía al checkout.
  3. El teléfono guardado en la cuenta no se usaba.
  4. La dirección de retiro que carga el vendedor salía repetida.
  5. Sin sesión, el carrito no se veía.

Un arreglo chico por problema, cada uno con una prueba que fallaba antes y pasaba después.