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. Funciona 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 siquiera 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 valorar fácilmente, el producto que gana no es el que tiene más listados. Es el que te ayuda a entender cuánto vale algo y garantiza que la transacción se complete.

Rol

Sr. Product Designer

Tipo

Marketplace de e-commerce

Herramientas

Figma, FigJam, Photoshop, Shopify

Contexto

The Vault Co · equipo interno 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, especificaciones y diseño— se entrega a ingeniería, que construye sobre el design system que establecí.

Para ser preciso, porque se trata de un producto de equipo: las funciones en sí —el escáner instantáneo, el motor de subastas y el deck builder— fueron construidas por el equipo de desarrollo. Lo que lleva mi nombre es el razonamiento que las llevó al roadmap, la landing page que las hace accesibles y el lenguaje en el que todas están construidas.

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

El problema era todo lo que esa pregunta dejaba fuera. Un comprador que llegaba por primera vez no tenía forma de descubrir qué podía hacer la plataforma, qué había de nuevo esa semana, cuánto valía una carta frente al costo de importarla o que podía pujar por inventario que nunca se había listado a precio fijo.

Todo el brief estaba contenido en una captura: debajo de la paginación había un párrafo que explicaba que The Vault no era solo un marketplace, sino un ecosistema tecnológico —escáner instantáneo, subastas en vivo, cotización en tiempo real y seguimiento de portafolio—. Cada afirmación era cierta. Pero ninguna aparecía en un lugar donde un comprador realmente pudiera descubrirla.

Y la navegación demostraba 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 activos, financiados y terminados, pero eran prácticamente inaccesibles: estaban a un dropdown de distancia y no había nada en la página que diera 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 carta específica, qué información influye en una compra, qué hace que alguien abandone un carrito, cómo compran los coleccionistas 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 producto construido.

Qué intentaban hacer los compradores

Qué necesitaba el negocio

Dónde se rompía

El header anterior tenía las palabras correctas. Pero, como dropdown plano, solo podía decirte adónde podías ir, no qué encontrarías ahí. En una categoría donde la pregunta real es “¿tienes la edición showcase de Lorwyn y cuánto cuesta?”, saber adónde puedes ir es una respuesta insuficiente.

El mega menú reorganiza el catálogo en cuatro columnas que corresponden a la forma en que piensa un jugador: el juego completo (singles, producto sellado y entrega express), los cuatro formatos competitivos para los que construye decks, las expansiones actualmente en rotación y una selección curada de las cartas que generan tráfico. Al lado aparece inventario en vivo de la edición más reciente, con precios reales, de modo que abrir el menú ya es empezar a navegar.

Dos decisiones más pequeñas tienen un impacto desproporcionado. Vender vive dentro del menú y no en una página de marketing independiente: en un marketplace C2C, todo comprador es un vendedor potencial y el momento en que está consultando el valor de sus cartas es precisamente cuando hay que comunicárselo. Los filtros de la parte inferior —Foil, Mítica, Rara, Express— exponen los cuatro atributos que influyen en la mayoría de las compras, a un clic desde cualquier parte.

La investigación ya había establecido los cuatro objetivos: encontrar una carta, armar un deck, vender lo que no estás usando y dar seguimiento al valor de una colección. Una sola cuadrícula filtrable resuelve adecuadamente el primero y prácticamente ninguno de los otros tres. Por eso la página guía según la intención en lugar de tratar de llevar a todos por el mismo funnel.

El campo de búsqueda acepta el nombre de una carta o un decklist pegado, llevando la intención de comprar múltiples cartas al input principal en lugar de enterrarla un nivel más abajo. Debajo, cinco acciones representan las cinco cosas que las personas realmente vienen a hacer: pegar una lista, explorar singles, vender cartas, importar una colección y consultar un saldo.

Justo debajo, cuatro tarjetas guían por rol en lugar de por tarea, y esta es la parte que le señalaría a un reclutador. Un jugador que convierte inventario que ya no usa en efectivo. Una tienda que obtiene comisión sobre stock que ya pasa por su mostrador. Alguien que gestiona el fulfilment de su ciudad a cambio de un porcentaje. Y un comprador cuyo pedido necesita resolverse. Los marketplaces tienen dos lados; una landing page que solo habla con la demanda deja desatendida la oferta. Nombrar cada rol en la portada convierte el reclutamiento en una superficie permanente en lugar de una tarea de outbound.

Dos de las herramientas más potentes de The Vault eran precisamente las dos que una cuadrícula de catálogo no puede atender estructuralmente, lo que probablemente explica por qué ambas terminaron ocultas detrás de un dropdown. El deck builder atiende a un comprador que necesita sesenta cartas. El sistema de subastas atiende a un comprador que ni siquiera está comparando precios: quiere algo que no está disponible de forma confiable a precio fijo y está dispuesto a competir por ello. Funcionaba con custodia en escrow y pujas estructuradas en un subdominio independiente, invisible desde el storefront al que debía servir, mientras su competencia directa realizaba subastas en hilos de comentarios de Facebook, sin custodia ni protección.

La Red de Bóvedas hace el mismo trabajo para la capa física. Las tiendas aliadas funcionan como puntos de custodia y entrega, y mostrarlas en la landing —con nombre y dirección— convierte un acuerdo operativo en una prueba visible de que una transacción puede resolverse en un mostrador y no en el correo. La franja de confianza debajo comunica las tres garantías sin adornos: cartas verificadas, en custodia y pago protegido.

Nueve superficies, y la cuadrícula es solo una de ellas en lugar de serlo todo. El trabajo de la landing ya no es vender una carta: es ordenar a las personas según su intención y llevarlas a la herramienta correcta.

Las superficies construidas por personas distintas en momentos distintos terminarán pareciendo productos diferentes, a menos que algo las mantenga unidas. Y un ecosistema que parece ensamblado es peor que una tienda coherente, porque todo el argumento depende de que se sienta como un solo lugar.

El sistema de diseño es lo que mantiene esa coherencia. Se basa en tres principios: componentes que se comportan de forma idéntica en todas partes, contraste y áreas táctiles alineados con WCAG y tokens semánticos estructurados para que el sistema pueda crecer sin romperse. Todo esto se convierte en un conjunto reducido de reglas que se aplican con consistencia.

El negro es el producto. El lienzo es completamente negro, por lo que el arte de las cartas es el único elemento saturado en pantalla. La interfaz retrocede; el inventario avanza. La profundidad se construye con cuatro niveles sobre el negro, no mediante sombras o 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 utilizan únicamente Light (300) y Bold (700), sin pesos intermedios, con una tipografía monoespaciada adicional para los números que una fuente proporcional maneja mal: precios, grados, códigos de set y poblaciones.

El resto es un sistema de proporciones, no de opiniones.

La voz también forma parte del sistema. Plana y declarativa: una frase enuncia un hecho y termina. Sentence case en todo lo legible; las MAYÚSCULAS quedan 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 emojis, en ningún lugar.

Se entrega como 15 primitivos —de Button a Toast—, cada uno construido sobre los tokens, de modo que una nueva superficie se ensambla en lugar de diseñarse desde cero.

El mega menú, los carruseles, la vista de mercado, el deck builder, las pantallas de subastas y el dashboard de portafolio fueron construidos por personas distintas y se renderizan en un solo lenguaje. Ese es el sistema haciendo su trabajo, y es la parte de este proyecto que nunca aparecerá en una métrica de conversión.

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

Mantener una tasa estable mientras el volumen se triplica es más difícil de lo que parece, porque el tráfico entrante casi siempre tiene menor intención que el que ya tenías. Una dilución de medio punto porcentual a lo largo de 3.1× las sesiones es el resultado del descubrimiento: las nuevas superficies atrajeron a personas que no habían llegado con el nombre de una carta en mente y consiguieron que interactuaran casi al mismo ritmo que quienes sí.

Quiero ser preciso sobre lo que este proyecto no hizo, porque el funnel lo deja claro. La gran mejora está en el último paso —de pantalla de pago a compra, de 34% a 63%— y eso no corresponde al trabajo de descubrimiento. Provino del rediseño de Carrito guardado, que se ejecutó durante el mismo periodo: la información requerida se trasladó al paso final y el carrito se convirtió en algo que el comprador podía dejar y retomar. La landing page llenó la parte superior de un funnel que acababa de mejorarse en la parte inferior. Ambos eran necesarios; ninguno de los dos resultados pertenece exclusivamente a uno de ellos.

Hay dos límites que vale la pena reconocer. El periodo base registró 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, instrumenté el resultado y no las superficies: puedo afirmar que el ecosistema funcionó, pero no determinar si el trabajo lo hicieron el mega menú, la vista de mercado u otra superficie. La atribución por superficie debió diseñarse desde el primer sprint. Es lo primero que especifiqué para la siguiente función.