The Vault

The Vault es un marketplace mexicano de Magic: The Gathering y Pokémon — singles y producto sellado — que atiende a jugadores competitivos, coleccionistas e inversionistas. Corre sobre Shopify con una capa de cuenta propia en un segundo subdominio, y compite en algo que la mayoría de las plataformas TCG ni intenta: confianza e información, no volumen de inventario.

Esa distinción define todo lo que viene después. En una categoría donde compras a desconocidos artículos que no puedes inspeccionar ni valuar con facilidad, el producto que gana no es el que tiene más listados. Es el que te dice cuánto vale algo y garantiza que la transacción se resuelva.

Rol

Sr. Product Designer

Tipo

Marketplace de e-commerce

Herramientas

Figma, FigJam, Photoshop, Shopify

Contexto

The Vault Co · in-house desde 2023

De qué soy responsable

La capa de dirección de producto: qué se construye y por qué, el business case detrás, sus límites, y cómo se ve y se comporta cada superficie. Ese trabajo — research, specs y diseño — se entrega a ingeniería, que construye contra el design system que establecí.

Para ser preciso, porque es un producto de equipo: las funciones en sí — el escáner instantáneo, el motor de subastas, el deck builder — las construyó el equipo de dev. Lo que lleva mi nombre es el razonamiento que las puso en el roadmap, la landing page que las hace alcanzables, y el lenguaje en el que todas están hechas.

Un storefront de Shopify por defecto responde exactamente una pregunta: qué está a la venta ahora. The Vault la respondía con competencia — una cuadrícula filtrable, precios en MXN, chips de disponibilidad, orden por precio, 100 productos, tres páginas de fondo. Cada visita empezaba igual y tenía la misma forma. Buscabas una carta, o hacías scroll.

El problema era todo lo que esa pregunta deja fuera. Un comprador que llegaba en frío no tenía manera de enterarse de qué podía hacer la plataforma, qué había de nuevo esa semana, cuánto valía una carta contra lo que costaría importarla, o que podía pujar por inventario que nunca se listó a precio fijo.

El brief entero estaba en una captura: debajo de la paginación había un párrafo explicando que The Vault no es solo un marketplace sino un ecosistema tecnológico — escáner instantáneo, subastas en vivo, cotización en tiempo real, seguimiento de portafolio. Cada afirmación era cierta. Ninguna existía en un lugar donde un comprador realmente la fuera a encontrar.

Y la navegación demuestra que esto no era un problema de roadmap. Arma tu deck y Subastas ya estaban en ese header. El deck builder y el sistema de subastas estaban en vivo, financiados, terminados — y funcionalmente inalcanzables, a un dropdown de profundidad, sin nada en la página que le diera a nadie una razón para hacer clic.

Cada superficie de la página rediseñada se remonta al mismo conjunto de preguntas — cómo busca un jugador una sola carta, qué información decide una compra, qué hace que alguien abandone un carrito, cómo manejan los coleccionistas comprar a varios vendedores a la vez, y qué señales generan suficiente confianza para pagarle a un desconocido por algo que no puedes tener en la mano. Esas preguntas pasaron por seis fases, y cada fase produjo algo contra lo que después se contrastó el build.

Qué intentaban hacer los compradores

Qué necesitaba el negocio

Dónde se rompía

El header viejo tenía las palabras correctas. Pero como dropdown plano, solo podía decirte a dónde tenías permitido ir — no qué había ahí. En una categoría donde la pregunta real es “¿tienes la edición showcase de Lorwyn, y en cuánto?”, a-dónde-puedes-ir es una respuesta débil.

El mega menú reestructura el catálogo en cuatro columnas que empatan con cómo piensa un jugador: el juego completo (singles, sellado, entrega express), los cuatro formatos competitivos para los que arma, las expansiones que rotan ahora, y un track curado para las cartas que jalan tráfico. Inventario en vivo de la edición más nueva va al lado, con precios reales, así que abrir el menú ya es navegar.

Dos decisiones más chicas hacen un trabajo desproporcionado. Vender vive dentro del menú y no en una página de marketing aparte — en un marketplace C2C todo comprador es un vendedor latente, y el momento en que está viendo valores de cartas es el momento de decírselo. Y los filtros de la base — Foil, Mítica, Rara, Express — exponen los cuatro atributos que deciden la mayoría de las compras, a un clic desde cualquier parte.

El research ya había establecido los cuatro objetivos — encontrar una carta, armar un deck, vender lo que no estás jugando, dar seguimiento a cuánto vale una colección. Una sola cuadrícula filtrable atiende el primero de forma adecuada y los otros tres nada. Así que la página enruta en vez de embudar.

El campo de búsqueda acepta el nombre de una carta o un decklist pegado, lo que sube la intención multi-carta al input primario en vez de enterrarla un nivel abajo. Debajo, cinco acciones nombran las cinco cosas que la gente realmente llega a hacer: pegar una lista, ver singles, vender cartas, importar una colección, checar un saldo.

Justo abajo, cuatro tarjetas enrutan por rol en vez de por tarea — y esta es la parte que le señalaría a un reclutador. Un jugador que convierte inventario sin usar en efectivo. Una tienda que gana comisión sobre stock que ya cruza su mostrador. Alguien que opera el fulfilment de su ciudad por un porcentaje. Y un comprador cuyo pedido necesita resolverse. Los marketplaces son de dos lados; una landing que solo le habla a la demanda deja sin alimentar a la oferta. Nombrar cada rol en la portada convierte el reclutamiento en una superficie permanente en vez de una tarea de outbound.

Dos de las herramientas más fuertes de The Vault eran justo las dos que una cuadrícula de catálogo estructuralmente no puede atender, que es probablemente cómo ambas acabaron estacionadas detrás de un dropdown. El deck builder atiende a un comprador que compra sesenta cartas. El sistema de subastas atiende a un comprador que ni siquiera está comparando precios — quiere algo que no está listado de forma confiable a precio fijo, y va a competir por ello. Corría con custodia en escrow y pujas estructuradas en un subdominio aparte, invisible desde el storefront al que servía, mientras su competencia directa corría subastas en hilos de comentarios de Facebook, sin custodia y sin protección.

La Red de Bóvedas hace el mismo trabajo para la capa física. Tiendas aliadas funcionan como puntos de custodia y entrega, y ponerlas en la landing — con nombre y dirección — convierte un arreglo operativo en prueba visible de que una transacción se resuelve en un mostrador y no en el correo. La tira de confianza debajo enuncia las tres garantías sin adornos: cartas verificadas, en custodia, pago protegido.

Nueve superficies, y la cuadrícula es una de ellas en vez de todas ellas. El trabajo de la landing ya no es vender una carta — es ordenar a la gente por intención y entregarla a la herramienta correcta.

Superficies construidas por gente distinta en momentos distintos van a verse como productos distintos, salvo que algo las mantenga juntas — y un ecosistema que se ve ensamblado es peor que una tienda que se ve coherente, porque el argumento entero descansa en que se sienta como un solo lugar.

El design system es lo que sostiene eso. Corre sobre tres principios — componentes que se comportan idéntico en todos lados, contraste y touch targets alineados a WCAG, y tokens semánticos estructurados para que el sistema se extienda sin romperse — y los convierte en un número reducido de reglas que aplica con firmeza.

El negro es el producto. El lienzo es negro puro, así que el arte de la carta es lo único saturado en pantalla. El chrome retrocede; el inventario avanza. La profundidad se construye con cuatro pasos sobre el negro, no con sombra ni con brillo.

El color es funcional. Existen seis rampas y cinco son semánticas — success, error, warning, information, announcements — cada una con escala 50 / 250 / 500 / 750 / 900. Convención: 900 es el relleno callado, 250 es el texto encima, 500 es la señal pura. Máximo un tono saturado por vista. El verde — el mint 500 — está reservado para valor y disponibilidad: un precio que le gana al costo de importar, una carta en stock, un rendimiento que le ganó a CETES.

La tipografía es Inter, en dos extremos. Los encabezados usan solo Light (300) y Bold (700) — sin peso intermedio — con una face mono añadida para los números que una fuente proporcional maneja mal: precios, grados, códigos de set, poblaciones.

Lo demás es un juego de proporciones, no de opiniones.

La voz también es parte del sistema. Plana y declarativa — una frase enuncia un hecho y para. Sentence case en todo lo legible; MAYÚSCULAS reservadas para micro-labels con tracking. Los botones son verbos — “Agregar al carrito”, “Hacer oferta” — nunca “OK” ni “Enviar”. Los números son precisos y nunca se redondean por estética. Sin emoji, en ningún lado.

Se entrega como 15 primitivos — de Button a Toast — cada uno hecho contra los tokens, así que una superficie nueva se ensambla, no se diseña desde cero.

El mega menú, los carruseles, la vista de mercado, el deck builder, las pantallas de subastas y el dashboard de portafolio los construyeron manos distintas y renderizan en un solo lenguaje. Ese es el sistema haciendo su trabajo — y es la parte de este trabajo que nunca va a aparecer en una métrica de conversión.

El tráfico más que se triplicó, que es el número que se ve mejor y por sí solo dice menos. El que defendería es el de al lado: la proporción de sesiones que agregaron una carta al carrito se mantuvo en alrededor de seis por ciento en ambos periodos.

Mantener una tasa plana mientras el volumen se triplica es más difícil de lo que suena, porque el tráfico entrante casi siempre es peor que el que ya tenías. Medio punto porcentual de dilución a lo largo de 3.1× las sesiones es el resultado de descubrimiento: las superficies nuevas jalaron a gente que no había llegado con el nombre de una carta en mente, y engancharon a casi la misma tasa que quienes sí.

Quiero ser exacto sobre lo que este proyecto no hizo, porque el funnel lo deja obvio. La ganancia grande está en el último paso — pantalla de pago a compra, de 34% a 63% — y eso no es trabajo de descubrimiento. Vino del rediseño de la buying journey que corría en la misma ventana, donde la información requerida se difirió al paso final y el carrito se volvió algo que un comprador podía dejar y retomar. La landing llenó la parte de arriba de un funnel que acababa de arreglarse por abajo. Ambos hacían falta; ninguno de los dos números le pertenece solo a uno.

Dos límites honestos. El periodo base registró doce checkouts completados — suficientemente pocos como para que un puñado de transacciones mueva mucho el porcentaje, así que la dirección es confiable y la precisión no. Y instrumenté el resultado, no las superficies: puedo decirte que el ecosistema funcionó, no si fueron el mega menú o la vista de mercado los que hicieron el trabajo. La atribución por superficie debió diseñarse desde el primer sprint. Es lo primero que especifiqué en la siguiente función.