SANTO JUGADOR
Tienda online para una marca de coleccionismo deportivo que vende piezas únicas con historia.
Conocer al cliente. Quién es la marca y a quién le vende.
// El cliente
Santo Jugador es una marca de coleccionismo deportivo en México. Vende piezas auténticas y de edición limitada a coleccionistas que valoran historia y autenticidad — el tipo de comprador que está dispuesto a pagar $15,000 MXN si confía en quién le vende.
Lo que venían a resolver, contado sin tecnicismos.
// Reto
- 01Pasar de Instagram y ventas por DM a una tienda real con checkout serio.
- 02Construir confianza para piezas de alto ticket sin ver el producto físicamente.
- 0390% del tráfico es mobile — todo tiene que funcionar perfecto en celular.
- 04Cada jersey tiene historia única — necesita su propia ficha, no una plantilla genérica.
Qué cambió entre el primer día y el lanzamiento.
// El antes y el después
VENTA MANUAL
- Catálogo solo en Instagram
- Ventas cerradas por DM, uno por uno
- Sin checkout, sin carrito
- El fundador atendía cada venta
TIENDA AUTÓNOMA
- Catálogo con autenticidad visible en cada pieza
- Checkout en Shop Pay, listo desde el día uno
- Experiencia mobile-first sin fricción
- Vende 24/7 sin tocar un DM
Cada feature pensada para que el cliente cierre la operación.
// Lo que construimos
Ficha completa por jersey
Medidas, parches, número, código de autenticidad y estado verificado. El coleccionista compra con la información que pediría en una subasta.
- Estado verificado pieza por pieza
- Código único de autenticidad
- Medidas y parches detallados
- Foto en alta de 5 ángulos por pieza
Carrito que te espera
Hasta una semana sin perder la pieza, aún si cambias de dispositivo o vuelves después.
- Persistencia de 7 días
- Sincronizado entre dispositivos
- Aviso si la pieza está por agotarse
Sugerencias que sí encuentran
Recomendaciones por equipo, era y rango de precio — el coleccionista descubre la siguiente pieza sin scrollear el catálogo.
- Filtro por equipo y era
- Match por rango de precio
- Vista de piezas relacionadas
Mobile perfecto
Galerías en alta a 60fps, zoom para verificar costuras y checkout en Shop Pay con un solo toque.
- Galería hi-res 60fps
- Zoom para inspeccionar costuras
- Checkout en un solo tap
Nuestros cinco pasos aplicados a este proyecto real.
// Proceso
- 01Sem 1-2
Descubrimiento
Entrevistas con el fundador y dos coleccionistas reales. Mapeo de fricciones del flujo actual de DMs.
- Brief + roadmap
- Mapa de fricción
- 02Sem 2-3
Arquitectura
Shopify Storefront headless + React mobile-first. Esquema de metafields para fichas tipo subasta.
- Arquitectura + ADRs
- Esquema de metafields
- 03Sem 3-7
Construcción
11 rutas, 45 componentes. Código y diseño en el mismo sprint. Demo cada semana, sin sorpresas en sprint 14.
- Sistema visual aplicado
- Tienda en staging
- 04Sem 8-9
Lanzamiento
Deploy con feature flags. Web Vitals desde el día uno. Primer drop activo al go-live.
- Producción + drop activo
- Dashboard de Web Vitals
- 05Sem 10+
Escala
Handoff al equipo del cliente. Roadmap post-launch: drops con waitlist, panel personal del coleccionista.
- Roadmap post-launch
- Handoff + soporte
- 01Sem 1-2
Descubrimiento
Entrevistas con el fundador y dos coleccionistas reales. Mapeo de fricciones del flujo actual de DMs.
- Brief + roadmap
- Mapa de fricción
- 02Sem 2-3
Arquitectura
Shopify Storefront headless + React mobile-first. Esquema de metafields para fichas tipo subasta.
- Arquitectura + ADRs
- Esquema de metafields
- 03Sem 3-7
Construcción
11 rutas, 45 componentes. Código y diseño en el mismo sprint. Demo cada semana, sin sorpresas en sprint 14.
- Sistema visual aplicado
- Tienda en staging
- 04Sem 8-9
Lanzamiento
Deploy con feature flags. Web Vitals desde el día uno. Primer drop activo al go-live.
- Producción + drop activo
- Dashboard de Web Vitals
- 05Sem 10+
Escala
Handoff al equipo del cliente. Roadmap post-launch: drops con waitlist, panel personal del coleccionista.
- Roadmap post-launch
- Handoff + soporte
Los números que dejó el proyecto en producción.
// Qué cambió
Coleccionistas que vuelven al carrito días después y cierran la compra.
Si dos personas comparten el celular, sus carritos nunca se mezclan.
La galería completa abre al instante, incluso fuera de wifi.
Diez semanas entre el primer brief y la tienda en producción, vendiendo.
Capturas del sitio en producción.
// Cómo se ve
Las tecnologías que sostienen la operación.
// Tecnologías
- React 19
- Vite
- React Router 7
- Shopify Storefront API
- GraphQL
- GSAP
- Framer Motion
- Lottie
- Swiper
¿Algo así para tu negocio?
Si este case te hizo click, hablamos. Te respondemos en menos de 24 horas hábiles, sin compromiso.