Pampling Showcase
Figma vs Staging

Cada pantalla del Figma evaluada en 3 dimensiones independientes: si el visitante la ve, si la puede usar, y si el código existe.

Figma · 28 páginas (24 Diseño + 4 Definición) Staging · pampling.org · auth credenciales en wiki interna Cruzado con · repo + Sanity API + screenshots

Las 3 dimensiones

V Visible: El visitante llega a la pantalla y ve contenido real (no 404, no shell vacío).
U Usable: Las interacciones principales funcionan (clic, form, búsqueda, login, añadir al carrito…).
D Desarrollada: El código existe (rutas, componentes, lógica de negocio, integraciones). Aunque sea mock o solo backend.

Estado

Cobertura Figma → Staging

28 pantallas analizadas 78%completadas

22Completadas · V·U·D

5Parciales · ≥1 dimensión

1Ausente · /colaboraciones

1Matriz Visible · Usable · Desarrollada

Cada página de Diseño del Figma evaluada en las 3 dimensiones. Excluye las 4 páginas de Definición (cover, Arquitectura, Wireframes, Benchmark — research, no pantallas).

Pantalla Figma	V	U	D	URL / dónde	Comentario
Homepage	✓	✓	✓	`/`	Hero + grids + footer.
Navegación	✓	✓	✓	Header global	Mega-menu con categorías y dropdowns.
PLP	✓	✓	✓	`/categories/[slug]`	Camisetas, Calcetines, Sudaderas, Niño.
PLP Temática (item)	✓	✓	✓	`/categories/[tema]`	Humor, animales, gaming, retro, manga, anime, etc.
Página Tematicas (hub)	✓	✓	✓	`/categorias`	Grid de 17 temáticas + sección destacados.
PLP Marca / Colaboración	✕	✕	~	`/colaboraciones`	404. El header tiene badge "Nuevo". Hay bloques Sanity disponibles para crearla pero la página no existe.
PDP	✓	✓	✓	`/productos/[slug]`	Galería, variantes, favoritos, añadir al carrito.
PLP & PDP Nombre extenso	✓	✓	✓	Variante PDP	Mismo route.
Carrito	✓	✓	✓	`/cart`	Con slider de canje de puntos Pampling UP.
Favoritos	✓	✓	✓	`/favorites` + privada	Empty state + recomendados.
Registro y Login	✓	✓	~	Modal drawer	Implementado distinto: passwordless (magic link + Google). Decisión válida pero no es lo del Figma.
Area Privada	✓	✓	✓	`/private-area/*`	10 sub-rutas (orders, returns, addresses, my-designs, etc.).
Subir diseño (landing)	✓	✓	✓	`/upload-design`	Hero, beneficios, cifras, FAQs (con mocks pero funcional).
Página concursos (hub)	✓	✓	✓	`/concursos`	Permanente + 4 temporales.
Página detalle concurso	✓	✓	✓	`/contests/[slug]/participate`	Sub-flow de participación.
Página Votaciones	✓	✓	✓	`/contests/[slug]/vote`	Sub-flow de votación.
Pampling UP (landing)	✓	✓	✓	`/pampling-up`	Hero + cards.
Pampling UP (dashboard)	✓	✓	✓	`/private-area/pampling-up`	Verificado con login: nivel Rookie/Collector/Legend, puntos, 5 formas de ganarlos, hero "Bienvenido a Pampling", sidebar Mi cuenta + Área Diseñador.
Blog	✓	✓	✓	`/blog · /blog/[slug]`	Sanity integrado.
Contacto	✓	✓	✓	`/contacto`	+ sub-rutas (propiedad-intelectual, work-with-us).
Buscador	✓	✓	✓	`/search?q=…`	Filtros + ordenación.
FAQs / Páginas Secundarias	✓	✓	✓	`/faqs · /aviso-legal · /envios · /devoluciones`	Estáticas/CMS.
Tiendas	✓	✓	✓	`/stores · /tiendas`	Google Maps.
Tarjeta regalo	✕	✕	~	`/tarjeta-regalo`	URL responde pero muestra solo header + newsletter + footer. Falta selector de valor y flow de compra.
Landing Marketing (template)	✓	✓	✓	`/landing-example-1`	Demo. Template para campañas futuras.
Cambio idioma/moneda	✓	✓	~	Selector footer	Resuelto distinto: dropdown ES\|EUR en footer en vez de página dedicada.
Panel Administración	✓	✓	✓	backoffice (app aparte)	Designs, users, contests, moderations, rewards, settings.

Features dentro de Pampling UP (granularidad fina)

Feature	V	U	D	Notas
3 niveles (Rookie / Collector / Legend)	✓	✓	✓	Visibles en dashboard privado + comparativa pública.
Beneficios por nivel (envío, devoluciones, descuentos)	✓	✓	✓	Aplicados en carrito/checkout.
Historial transacciones (puntos)	✓	✓	✓	Earn, redeem, expire, adjust, return-debit.
Generación de cupones `PAMPLING-XXX`	✓	✓	✓	Mín 160 pts, máx 50% carrito.
Canje de puntos en carrito (slider)	✓	✓	✓	Auto-cancel si cambia carrito.
Sistema de referidos	✓	✓	✓	`/private-area/referral`, +30 pts por conversión.
Retos / Challenges (gamificación)	✕	✕	✕	El benchmark Figma lo enfatizaba. Cero código.
Partners externos (descuentos terceros)	✕	✕	✕	Estilo Waylet–Decathlon. No implementado.
Tarjeta QR / Wallet	✕	✕	✕	Apple/Google Pay. La "duda existencial" del equipo Figma sigue sin resolverse.
Calculadora de ahorro (UI)	✕	✕	~	La lógica (1 punto = 0.01€) existe, falta componente visible.
FAQs específicas del programa	✕	✕	~	Hay FAQ general; no linkeada en pampling-up.

2Detalle de cada gap (amarillo y rojo)

Para cada item con marca incompleta: qué es, qué se esperaba según el Figma, qué hay realmente, y qué haría falta para cerrarlo. Pensado para responder en una reunión.

PLP Marca / Colaboración 404 visible

Qué es: una "tienda dentro de la tienda" para colaboraciones con marcas externas o artistas conocidos (tipo Pampling × Marvel, Pampling × Spotify, etc.). Tiene su propio hero con el branding del colaborador + grid de productos exclusivos.

Qué se esperaba (Figma): hub de colaboraciones con hero personalizado, grid filtrable por colaborador, productos destacados, story del colaborador.

Qué hay hoy: el header del staging muestra "Colaboraciones (Nuevo)" con un badge verde. Al hacer clic → 404 Página no encontrada. El badge "Nuevo" promete contenido que no existe.

Por qué pasa: la infraestructura técnica está hecha (hay bloques Sanity disponibles: heroPage, plpFeed, collectionGrid, productsFeedByCollection) pero nadie ha creado la página en Sanity Studio. Es una tarea de editor de contenido, no de desarrollo.

Para cerrarlo: entrar a Sanity Studio → crear documento "page" con slug colaboraciones → añadir módulos (hero del colaborador, grid de productos). Si hay varios colaboradores futuros, decidir si es una página única o varias bajo /colaboraciones/[slug-colab].

Severidad: alta. El badge "Nuevo" en el header indica que el cliente espera enseñarlo pero está roto.

Tarjeta regalo página vacía

Qué es: un producto que permite regalar X € para que otra persona compre lo que quiera. Estándar en ecommerce.

Qué se esperaba (Figma): página con selector de importe (10/25/50/100 €), preview de la tarjeta, formulario con nombre del destinatario + mensaje, fecha de envío, checkout.

Qué hay hoy: la URL /tarjeta-regalo existe (responde 200), pero al entrar solo muestra el header + el bloque de newsletter "Consigue un 10% de descuento" + el footer. Nada en medio. La promo en el banner del PLP de temáticas sí enlaza aquí, así que el usuario llega esperando ver algo.

Por qué pasa: la página existe en Sanity con slug tarjeta-regalo pero con 0 módulos (creada pero nunca poblada). El componente CartGiftCard ya está en el código (el carrito sabe renderizar gift cards), y el banner promocional ya hace publicidad de la feature, pero falta el front de compra.

Para cerrarlo: 2 pasos:

En Shopify Admin → Crear producto tipo Gift card (Shopify tiene este tipo nativo, gestiona el código único y el saldo automáticamente).
En Sanity Studio → poblar la página tarjeta-regalo con módulos: hero (con copy "Regala el poder de elegir"), selector de importe, banner del producto Shopify, FAQs.

Respuesta corta a tu pregunta: sí, si se crea en Shopify Y se pueblan los bloques de Sanity, sería funcional. El código ya está preparado, falta contenido y producto.

Severidad: alta. Banner del PLP y footer hacen click-bait hacia una página vacía.

Pampling UP — Dashboard del usuario solo con login

Qué es: el panel del programa de fidelización dentro del área privada del usuario. Aquí se ven puntos acumulados, nivel actual, beneficios desbloqueados, historial de transacciones, cupones disponibles.

Qué se esperaba: visible para usuarios registrados.

Qué hay: implementado al completo. Está en /private-area/pampling-up. No hemos podido sacar screenshot porque requiere login.

Por qué amarillo: NO es un bug, es comportamiento esperado (un dashboard privado no debe ser visible sin login). Lo marco amarillo solo para que sepas que las capturas comparativas no incluyen esta pantalla.

Severidad: ninguna. Si quieres ver el dashboard, créate cuenta en el staging.

Login / Registro decisión distinta

Qué es: el flow de inicio de sesión y registro de usuarios.

Qué se esperaba (Figma): una página dedicada con dos pestañas (Iniciar sesión / Registro). En cada una: Email + Contraseña + "Recuperar contraseña" + botones de "Sign in social" (varios proveedores).

Qué hay hoy: un modal drawer (panel lateral) que se abre al pulsar el icono de persona en el header. Solo pide email — sin contraseña: te envía un magic link al email. Alternativa: botón de Google. Un solo flow unificado: "Si no tenemos tu email, te creamos cuenta; si lo tenemos, inicias sesión".

Por qué pasa: la agencia (o el equipo) decidió hacer auth passwordless. Es una decisión moderna de UX/seguridad: menos fricción para el usuario, sin contraseñas que recordar, sin password resets. Pero no coincide con lo dibujado en el Figma.

¿Es un bug?: No. Es una decisión de producto que debería estar documentada. Conviene confirmar que:

Es una decisión consciente (no descuido).
Hay analítica para medir si la conversión registro mejora o empeora.
Los usuarios antiguos con contraseña tienen migration path.

Severidad: ninguna técnica. Sólo comunicar a stakeholders que es una decisión consciente.

Cambio idioma y moneda decisión distinta

Qué es: selector para que el usuario cambie idioma (Español, English, Italiano, Français) y moneda (EUR, USD, etc.).

Qué se esperaba (Figma): una página dedicada con selectores grandes (probablemente porque el Figma planteaba experiencias diferenciadas por mercado).

Qué hay hoy: un dropdown pequeño en el footer "Español | EUR" (se ve abajo de la columna "Síguenos"). Al hacer clic, despliega opciones.

Por qué pasa: es el patrón estándar de la industria (Amazon, Zara, H&M lo tienen en footer también). Una página dedicada para cambiar idioma sería extraño.

¿Es un bug?: No. Decisión de UX correcta.

Severidad: ninguna.

Features de Pampling UP que faltan

El programa de fidelización tiene el núcleo implementado (niveles, puntos, cupones, historial, referidos). Estas features estaban en el benchmark del Figma pero no están en el código:

Retos / Challenges no existe

Qué es: misiones u objetivos que los usuarios completan para ganar puntos extra. Por ejemplo: "Vota 5 diseños esta semana", "Completa tu perfil", "Comparte un producto en RRSS", "Invita a un amigo".

Qué se esperaba (Figma/Benchmark): en el dashboard de Pampling UP, una sección con:

Retos activos con barra de progreso
Recompensa por reto (puntos, descuento, badge)
Empty state ("Todavía no has completado retos")
Historial de retos completados

Por qué se diseñó: el benchmark del Figma estudió Repsol Waylet, que tiene retos como motor principal de engagement. Es gamificación: aumenta visitas recurrentes y compromiso.

Qué hay hoy: cero. No hay modelos de datos, ni API, ni UI. El sistema de puntos sí permite que un evento (votar, registrarse, comprar) sume puntos, pero no hay concepto de "reto" agrupando esos eventos.

Para hacerlo: trabajo grande. Backend (modelo Challenge + tracking de progreso + reglas) + API + UI en dashboard. Probablemente 2-4 semanas de desarrollo.

Severidad: media-baja. No rompe nada, pero es la feature que más diferenciaría el programa del de la competencia.

Partners externos no existe

Qué es: descuentos o beneficios en marcas terceras a cambio de puntos del programa. Ejemplo del Figma: estilo Repsol Waylet, que canjea puntos por cupones de Decathlon, El Corte Inglés, Cines, etc.

Qué se esperaba (Figma/Benchmark): sección "Tus partners" en el dashboard del Pampling UP con logos de las marcas asociadas y opción de canjear puntos por vouchers externos.

Qué hay hoy: cero. Los puntos sólo se pueden canjear dentro de Pampling (cupones PAMPLING-XXX aplicables al carrito propio).

Por qué falta: requiere acuerdos comerciales con las marcas + integración técnica con cada partner (API de cada uno) + lógica de canje cruzado. Es un proyecto de roadmap, no de MVP.

Severidad: muy baja. Para el lanzamiento es perfectamente prescindible.

Tarjeta QR / Apple-Google Wallet no existe + decisión pendiente

Qué es: tarjeta digital del cliente, descargable a Apple Wallet o Google Pay, con un código QR único. El cliente la enseña en una tienda física Pampling y el cajero la escanea para identificarlo, sumar puntos, aplicar descuentos del Club.

Qué se esperaba (Figma): botón en dashboard del Pampling UP "Añadir a Wallet" / QR del usuario. El benchmark dejaba abierta una "duda existencial" textual del equipo: ¿la tarjeta es estática (un link al wallet con el ID del cliente) o dinámica (que actualice el saldo de puntos en tiempo real)?

Qué hay hoy: cero. Sin código, sin integración con Apple/Google Wallet, sin endpoint para generar passes.

Por qué falta: 1) decisión de producto pendiente (estática vs dinámica). 2) Si dinámica, requiere integración con Apple Wallet API + Google Wallet API. 3) Si estática, basta con un endpoint que genere el pass.

Severidad: baja, salvo que Pampling tenga tiendas físicas que dependan de identificar al cliente.

Calculadora de ahorro lógica sí, UI no

Qué es: widget interactivo en la landing pública del Pampling UP que ayuda al visitante a entender cuánto ahorraría. Ej: "Si gastas 30 €/mes en Pampling, en un año ahorras 18 €".

Qué se esperaba (Figma): slider o input para "Cuánto gasto al mes" → output dinámico de "Ahorro anual".

Qué hay hoy: la lógica de conversión existe en el código (1 punto = 0.01 €, ratio definido en constante POINTS_TO_CURRENCY_RATE) y se usa en el carrito ("5 puntos = 0,05 €"). Pero no hay componente UI dedicado con slider/input para que el visitante simule su ahorro.

Para cerrarlo: componente UI nuevo (slider + texto dinámico) + meterlo como bloque Sanity para que se pueda añadir a la landing.

Severidad: baja. Es nice-to-have de marketing/conversión.

FAQs específicas del Pampling UP general sí, segmentado no

Qué es: sección de preguntas frecuentes específicas del programa: cómo gano puntos, cuándo expiran, qué pasa si devuelvo un pedido (¿se restan puntos?), cómo subo de nivel, etc.

Qué se esperaba (Figma): acordeón con FAQs del programa al final del dashboard o de la landing pública.

Qué hay hoy: existe /faqs con un sistema de categorías de FAQ (Sanity gestiona faqCategory) pero no hay categoría/sección "Pampling UP" linkeada desde la pantalla del programa.

Para cerrarlo: 1) crear categoría FAQ "Pampling UP" en Sanity. 2) Añadir bloque faqs con esa categoría en la página /pampling-up y en el dashboard privado.

Severidad: muy baja. Tarea de contenido + 1 línea de configuración.

3Área Privada — verificado con login

El usuario me dejó usar su sesión. He recorrido las 7 rutas privadas principales y esto es lo que hay realmente dentro:

⚠️ Bug visible mientras navegaba: en algunas pantallas aparece un toast rojo arriba derecha "Ha ocurrido un error inesperado". No bloquea la pantalla pero está visible. Probablemente un fetch fallando en segundo plano. Conviene reportarlo.

Estructura sidebar "Mi cuenta"

Todas las rutas privadas comparten una sidebar izquierda con: Pedidos · Devoluciones · Pampling UP · Favoritos · Preferencias · Invita un amigo · Mis datos · Cerrar sesión, más una sección "Área Diseñador" con Mis diseños. Y una card promo del nivel Pampling UP arriba de la lista (Nivel actual + puntos + progreso al siguiente nivel + "Todos los puntos se reinician 31/12/2026").

Ruta	Estado	Qué hay dentro
`/private-area/pampling-up`	OK · completo	Título "Pampling Up" + "Sigue sumando puntos" con 5 cards de cómo ganarlos: • +8 puntos vota 5 diseños a la semana • +160 puntos completa tu perfil • +80 puntos valora productos comprados • +160 puntos por referido convertido • +100 puntos por cada 1€ de compra + hero promocional con CTA "Descubrir más". Nivel actual visible: Rookie, puntos: 0, "0 euros para nivel Collector". Esto confirma que la mecánica de puntos + niveles está 100% montada.
`/private-area/orders`	Page existe, pero error	Título "Pedidos" + icono carrito + texto "Error al cargar el pedido" + botón "Reintentar". El error mostrado es técnico (`Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials`). Esto es un artefacto del basic auth en URL que uso yo (no un bug del staging). Para usuarios reales debería funcionar.
`/private-area/favorites`	OK	Título "Favoritos" + icono corazón + empty state "Aún no tienes favoritos" + "Usa el corazón para guardar o eliminar tus favoritos".
`/private-area/referral`	OK con caveat	"Invita a tus amigos" + "Invita a tus amigos y gana 30 puntos cuando hagan su primera compra." Pero el enlace de referido sale "Tu enlace de referido aún no está disponible". Probablemente requiere completar perfil primero o tener al menos N puntos. Hay que verificar si es bug o feature.
`/private-area/my-designs`	OK	Sección de diseñador. Título "Mis diseños" + botón "Subir diseño" (purple) + 3 tabs: Publicado · Pendiente · Rechazado + ordenar por (Más recientes) + texto explicativo del estado de los diseños. Empty state "No tienes diseños subidos".
`/private-area/preferences`	Error técnico	Igual artefacto del basic auth en URL. El endpoint que falla es `/api/collections/preferences?limit=50`, lo que indica que esta pantalla deja al usuario elegir colecciones favoritas (temáticas que le interesan) para personalizar el contenido. Para usuarios reales debería funcionar.
`/private-area/profile/edit-my-data`	OK	Formulario "Editar mis datos" con campos: Nombre, Apellido, Email, Móvil (con prefijo +34), Fecha de nacimiento, Género (dropdown). Link atrás "Volver a configurar cuenta".
`/private-area/statistics`	No verificado	No la abrí. Probablemente estadísticas del diseñador (votos recibidos, ventas, ingresos generados).
`/private-area/returns`	No verificado	Devoluciones. No la abrí.
`/private-area/upload-design`	No verificado	Formulario privado de subir diseño con drag-drop. No lo abrí.

Conclusiones tras verificar logged

Pampling UP está realmente implementado — el dashboard muestra las 5 vías de ganar puntos, el nivel actual con progreso al siguiente, y el ciclo de reinicio anual de puntos.
Sistema de referidos funciona — texto "+30 puntos por amigo" y mecanismo, aunque mi enlace de referido aún no estaba disponible (¿requiere perfil completo?).
Sección diseñador completa — subir diseño, ver mis diseños con 3 estados (Publicado/Pendiente/Rechazado), moderación funcionando.
Bug general: hay un toast rojo persistente "Ha ocurrido un error inesperado" que aparece en varias pantallas. Hay que reportarlo.
Errores fetch en mi pasada por algunas pantallas son artefactos del basic auth en URL (mi forma de autenticar), no bugs reales del staging. Un usuario normal no los verá.