Rediseño del recorrido de compra · de la búsqueda al checkout
The Vault — Carrito guardado
Los compradores de TCG no compran por impulso. Comparan, esperan y vuelven. Nadie más en la categoría había creado un carrito pensado para eso.
Todos los competidores de la categoría vaciaban el carrito en cuanto el comprador se iba. Construí lo que ninguno tenía: un carrito que The Vault recuerda, y rediseñé el checkout a partir de esa idea.
Herramientas · Figma · FigJam · Photoshop · Shopify
El proyecto
Un carrito que te recuerda, en una categoría que no lo hace
Este es el caso de estudio centrado en la función detrás del rediseño del storefront de The Vault: el recorrido completo, desde la búsqueda hasta el checkout, y el único vacío que compartía toda la categoría hasta que esta función llegó al mercado.
- Rol
- Sr. Product Designer
- Alcance
- Búsqueda, producto, carrito y checkout
- Cronología
- Dic 2025 – Jun 2026
- Contexto
- The Vault Co · equipo interno desde 2023
- Búsqueda
- Producto
- Guardar carrito
- Agregar al carrito
- Checkout
- Confirmación
Contexto
Lo que necesitaba el comprador frente a lo que necesitaba el negocio
Cada decisión que aparece a continuación debía responder a ambas necesidades: una función que resolviera solo una de las dos no llegaba a producción.
Qué intentaban hacer los compradores
Comparar antes de decidir
Comparar el precio de una carta entre distintos vendedores y frente al costo de importarla desde EE. UU. antes de realizar una compra.
Retomar una decisión donde la dejaron
Un decklist se construye durante días o semanas. Perder el carrito significaba empezar desde cero.
Confiar en el vendedor antes de pagar
Que la condición fuera la descrita, que el vendedor fuera responsable y que existiera una forma de resolver el problema si algo salía mal.
Hacer todo desde el móvil
La mayoría de esta audiencia compra desde el móvil, precisamente donde la experiencia anterior funcionaba peor.
Qué necesitaba el negocio
Reducir los carritos abandonados
Cada carrito que se vaciaba obligaba al comprador a reiniciar su comparación en el sitio de un competidor, en lugar de continuarla aquí.
Un camino más corto entre decidir y pagar
Una vez que alguien estaba listo para comprar, cada paso adicional era una oportunidad para reconsiderarlo.
Confianza en el checkout, no solo velocidad
Reducir pasos sin resolver el problema de confianza solo trasladaría el abandono a otro punto del recorrido; no lo eliminaría.
Una función que el sistema de diseño pudiera sostener
Todo lo que se lanzara debía extender los mismos tokens y componentes utilizados en el resto de The Vault.
Problema
Los compradores no deciden en una sola visita; el producto asumía que sí
Los coleccionistas que comparan cartas entre vendedores se encuentran con el mismo problema en todas partes: no existe una forma de guardar un carrito y volver a él después. Los compradores de TCG no compran por impulso: construyen un decklist durante días o semanas, comparan precios entre vendedores y esperan a la quincena o a que una carta específica llegue al mercado. En todos los competidores, había que decidir en el momento o el carrito desaparecía.
A esto se sumaban dos problemas propios de la categoría: la falta de confianza —vendedores sin verificar y ninguna forma de confirmar la condición de una carta antes del envío— y la falta de información —sin precios en tiempo real ni contexto sobre la rareza—. El patrón era el mismo en todas las plataformas: estaban diseñadas para mover inventario, no para ayudar realmente a alguien a tomar una decisión de compra.
Proceso de diseño
Convertir un vacío de mercado en una especificación
- 01
Objetivos y alcance
Las preguntas que debían responder todas las decisiones posteriores: cómo buscan los compradores, por qué abandonan sus carritos y qué necesitan para confiarle un pago a un desconocido.
- 02
Benchmarking competitivo y heurístico
TCGPlayer, Cardmarket y Hobby Mart para comparar funciones transaccionales; Card Kingdom, Star City Games, Yellow Rabbit, MTG Wolf y MTG Mexico como referencias externas.
- 03
Síntesis de puntos de fricción
Cuatro problemas recurrentes, ordenados según la frecuencia con la que aparecieron en la investigación anterior.
- 04
Personas y mapa de empatía
El jugador, el coleccionista y el comprador recurrente, y qué piensa, siente y hace cada uno a mitad del proceso de compra.
- 05
Decisiones de diseño
Carrito guardado persistente, información de checkout solicitada más adelante y datos transparentes del vendedor, todo definido sobre el sistema de diseño existente.
- 06
Métricas de éxito
El funnel de Google Analytics + Shopify utilizado como referencia para medir los resultados de este proyecto.
Análisis cuantitativo
El funnel antes del lanzamiento
El diagnóstico provino del mismo periodo que después se utilizó para medir el impacto: la línea base con la que se comparan todos los resultados.
Análisis cualitativo
Dónde se rompía la experiencia
Confianza y autenticidad
Los compradores pagan a desconocidos por artículos que no pueden inspeccionar ni cuya condición pueden confirmar antes del envío.
Un proceso de compra engorroso
Demasiadas decisiones concentradas en muy pocos pasos y un carrito que se vacía en cuanto el comprador se va.
Una experiencia móvil deficiente
Precisamente donde esta audiencia realiza la mayoría de sus compras y donde el flujo anterior funcionaba peor.
Sin un punto de comparación
Nada en la plataforma ayudaba al comprador a saber si el precio o el vendedor que tenía delante eran realmente una buena opción.
Persona de usuario
Para quién se construyó
El jugador competitivo
Construye un decklist de torneo a lo largo de varias sesiones y compara cada edición entre múltiples vendedores antes de comprar. Necesita un carrito que sobreviva al cierre de la pestaña; el anterior no lo hacía.
El coleccionista
Compra de forma selectiva y considera la condición de la carta y la responsabilidad del vendedor como aspectos innegociables. Prefiere esperar una semana por un vendedor de confianza o un mejor precio antes que decidir bajo presión.
El comprador recurrente
Compra casi exclusivamente desde el móvil, compara precios con el costo de importar desde EE. UU. y abandona en cuanto el checkout le pide información antes de haber decidido comprar.
Mapa de empatía
Qué piensa y siente el comprador a mitad del proceso de compra
Dice
“No pierdas mi carrito, todavía estoy decidiendo.” “Dime que esto realmente está en condición Near Mint antes de que pague.”
Piensa
¿Sería más barato si espero una semana? ¿Este vendedor realmente va a enviar lo que aparece en la foto?
Hace
Abre varias pestañas de vendedores para comparar la misma carta. Deja un carrito abierto en el navegador en lugar de confiar en que la plataforma lo conservará.
Siente
Precaución al pagarle a un desconocido por algo que no ha podido ver. Frustración al tener que reconstruir una comparación de memoria después de que un carrito desaparece.
La decisión
El vacío que nadie más había resuelto: Carrito guardado
La comparación detrás de ese punto de fricción era concreta. Realicé un análisis competitivo estructurado de TCGPlayer, Cardmarket y Hobby Mart sobre las funciones que realmente influyen en la decisión de compra: búsqueda avanzada, wishlist, carrito guardado, checkout con múltiples vendedores y reputación del vendedor. Tres de los cuatro ofrecían prácticamente las mismas funciones. Y los tres compartían exactamente el mismo vacío.
La decisión: construir Carrito guardado como una función central del producto. No un carrito de sesión que desaparece al cerrar, sino uno persistente y vinculado a la cuenta, integrado en el recorrido de compra desde el principio en lugar de añadirse después del checkout.
Validé la dirección mediante benchmarking de jugadores consolidados fuera del conjunto competitivo directo: Card Kingdom y Star City Games a nivel internacional, y Yellow Rabbit, MTG Wolf y MTG Mexico a nivel local. No realicé entrevistas de usuario como primera instancia. Esto fue validación competitiva y heurística, no investigación primaria, y es importante decirlo con claridad en lugar de sugerir lo contrario.
Fricción en el checkout
Reducir la fricción donde se pierde la confianza
Los puntos de fricción identificados durante la investigación apuntaban a un segundo problema que agravaba la experiencia: incluso cuando alguien estaba listo para comprar, el checkout generaba dudas. La información del vendedor no era suficientemente clara, no había visibilidad sobre el seguimiento del pedido y demasiadas decisiones estaban concentradas en muy pocos pasos. La estrategia dividió el problema en dos objetivos concretos en lugar de una tarea genérica de “mejorar el checkout”: generar confianza —con información transparente del vendedor, detalle del producto y seguimiento del pedido— y reducir la fricción —eliminando pasos y decisiones innecesarias—.
En concreto: menos pasos en total y la información necesaria para completar una compra se solicita más adelante, en lugar de desde el principio. El comprador avanza primero hacia la compra y solo encuentra los datos requeridos justo antes de confirmar, en lugar de tener que proporcionar información antes de haber decidido comprar.
Wireframes
Estructura antes del primer pixel de producción
Las dos pantallas de los bocetos —la página de producto y el carrito— llevadas a arquitectura de información y flujo antes de cualquier diseño visual. Las preguntas abiertas en esta etapa eran de ubicación y jerarquía: dónde va la acción de guardar, qué es un carrito guardado dentro de la cuenta y qué ve un comprador cuando vuelve a uno.
- En stockNear MintGuardar en un carritoAgregar al carrito
Una opción de primer nivel en la página de producto, no un paso después del checkout.
1 — Página de producto: la acción de guardar va junto a agregar al carrito, así una comparación puede empezar sin ningún compromiso.
- 12 cartas6 cartasBajó de precio3 cartas+ Nuevo carrito
Un carrito es algo que conservas, no el resto de un checkout abandonado.
2 — Cuenta: «Mis carritos guardados» va junto a la lista de deseos — cada carrito con nombre y contable.
- $ 844Ya no disponiblePrecio cambióMover al carrito
Los cambios se muestran explícitamente. Envío y pago se difieren al paso final.
3 — Detalle del carrito: lo que cambió mientras estuvo guardado se muestra de entrada; la información de checkout espera hasta el final.
Alta fidelidad
Todo lo que el wireframe decidió, en el lenguaje del producto
Las mismas tres pantallas, llevadas al sistema visual del propio producto: negro puro, Inter, verde menta reservado para disponibilidad y valor, ámbar para cualquier cosa que haya cambiado mientras un carrito estuvo guardado. Esta es la versión que se entregó a ingeniería.
Magic: The Gathering
Wizard’s Lightning [Dominaria]
$ 15 MXN
Guárdala en un carrito con nombre para comparar sin comprometerte. Impuesto incluido; el envío se calcula al pagar.
3 carritos · $ 2,940 en total
‹ Carritos guardados
Mono-Red aggro
Guardado hace 6 días · 2 cambios desde entonces
Envío y método de pago se eligen en el último paso.
Sistema de diseño
Construido sobre el mismo sistema, no como un caso aparte
Ni la decisión anterior ni el trabajo de reducción de fricción pueden sostenerse en un producto real sin un sistema detrás. Carrito guardado y checkout utilizan los mismos tokens documentados en detalle en el caso de estudio del ecosistema: se construyeron una vez, se aplicaron aquí primero y ahora se reutilizan en todo lo que The Vault desarrolla.
El negro es el producto. El lienzo es completamente negro, por lo que el arte de las cartas es el único elemento con color saturado en pantalla, incluso dentro del carrito, donde la miniatura del producto debe destacar antes que el precio.
- Lienzo#000000El fondo de la página. El color lo aporta el arte de las cartas; la interfaz no añade color.
- Tarjeta#0D0D0DElementos del carrito y tarjetas de producto, definidos por una línea fina #1F1F1F.
- Campo#141414Campos de entrada, controles de cantidad y selector de método de pago.
- Elevado#1A1A1ADiálogos de confirmación y mensajes emergentes.
Las superficies del carrito y del checkout utilizan los mismos cuatro niveles sobre negro que el resto del producto; nada aquí tiene una paleta propia.
Consistencia
El carrito, el checkout y el storefront comparten los mismos componentes; nada aquí fue diseñado como un caso especial.
Accesibilidad
Contraste, tamaños tipográficos y áreas táctiles alineados con WCAG; un checkout es el peor lugar para fallar en esto.
Escalabilidad
Construido sobre tokens semánticos, de modo que cada nueva función extiende el sistema en lugar de crear una variante paralela.
Lo que se lanzó
De esas pantallas al producto en vivo
Ingeniería lo lanzó cerca del diseño, con la deriva que tiene cualquier handoff: la tipografía es Assistant en lugar de Inter, y el botón Guardar independiente se consolidó dentro del carrito de cuenta persistente en lugar de ir junto a Agregar. La estructura se mantuvo. El carrito usa un único conjunto de componentes en todos los breakpoints: sin build aparte para escritorio, sin versión simplificada para móvil. En escritorio se muestran todos los renglones y el desglose completo del costo en una sola vista; en móvil, el total y Pagar pedido aparecen en una barra fija bajo la lista de productos, para que el comprador pueda actuar sin desplazarse hasta el fondo de una página larga.
Escritorio — detalle completo de los artículos, nada colapsado
Móvil — un resumen fijo para que el comprador pueda actuar sin seguir desplazándose
Resultados
Google Analytics + Shopify · 28 dic 2025 – 28 ene 2026 vs. 29 may – 28 jun 2026
- Pantalla de pago → compra+85%34%63%
- Sesiones que completan el checkout+392%1259
- Carrito → pantalla de pago−8%50%46%
Mismo periodo que los Resultados del caso de estudio del ecosistema. Este es el paso del funnel en el que este proyecto tiene impacto directo.
Reflexión
El último paso, no la parte superior del funnel
El rediseño de la landing page triplicó el tráfico durante el mismo periodo, lo que podría llevar a atribuir todo el funnel a la etapa de descubrimiento. Las conversiones por etapa cuentan otra historia: la proporción de sesiones que agregaron una carta al carrito y llegaron a la pantalla de pago apenas cambió. Lo que cambió fueron los últimos segundos del recorrido: de las personas que llegaron al pago, el 34% completaba el checkout antes del rediseño, frente al 63% después.
Esa es la huella de trasladar la información requerida al último paso en lugar de solicitarla al principio. No atrajo a más personas al funnel ni hizo que más personas agregaran una carta al carrito; evitó que quienes ya estaban cerca de comprar abandonaran justo en la meta.
Hay dos límites que vale la pena reconocer. El periodo base registró solo doce checkouts completados: una muestra lo suficientemente pequeña como para que unas pocas transacciones cambien considerablemente el porcentaje. La tendencia es confiable, pero la precisión no. Además, como la landing page y este rediseño se lanzaron durante el mismo periodo, puedo afirmar que el último paso mejoró, pero no determinar con certeza cuánto de ese cambio corresponde a Carrito guardado y cuánto a las modificaciones específicas del flujo de checkout. La atribución por superficie fue lo primero que definí para la siguiente función.
Cierre
De qué se trataba realmente este proyecto
El brief parecía una simple solicitud de funcionalidad: agregar un carrito guardado. En realidad, requería tratar el recorrido de compra como una secuencia completa, no como una página con un botón: una búsqueda que entiende que la intención puede extenderse durante varias visitas, un carrito diseñado para dejarse y retomarse, y un checkout que solicita información solo cuando el comprador ya ha decidido comprar.
Por eso también funciona como parte del mismo producto que el rediseño del storefront: mismo sistema, misma voz y la misma capa de cuenta; un recorrido de compra que finalmente se adapta a la forma en que realmente compran los usuarios de esta categoría.