Diseño de pases de Wallet: guía práctica para programas de fidelización
Un buen diseño de pase de Wallet es sencillo: una marca clara, un número que le importe al cliente (puntos, sellos o saldo), un código QR que se escanee al primer intento y todo lo demás en el reverso. Apple y Google publican normas que van en esta dirección. Esta guía convierte esas normas en decisiones que el propietario de un pequeño negocio puede tomar esta misma semana, tanto si crea una tarjeta de sellos para una cafetería como un pase de puntos para un salón de belleza o una tarjeta de cashback para una tienda de barrio.
La escribimos desde el punto de vista de la fidelización. Un pase no es una obra de arte. Es lo que tu cliente abre en la caja, así que tiene que leerse rápido y usarse sin dudar.
Puntos clave
- Mantén despejado el anverso del pase. Coloca ahí tu logotipo, el estado de las recompensas y el código QR, y lleva las condiciones, los datos de contacto y los extras al reverso.
- Usa campos reales del pase para el texto, no texto incrustado en imágenes. Las imágenes no se muestran en todos los dispositivos y Google señala que el texto dentro de una imagen no se puede localizar.
- Sigue las especificaciones de imagen de cada wallet: Google pide un logotipo cuadrado de al menos 660×660 píxeles y una imagen principal (hero) de 1032×812 píxeles.
- Elige un formato de código QR que lea tu escáner, dale un tamaño generoso y pruébalo en teléfonos reales con iluminación real.
- Trata el pase como algo vivo: actualiza el saldo y la oferta para que el diseño siga siendo relevante después del primer escaneo.
Qué tiene que hacer un pase de fidelización en Wallet
Antes de elegir colores, decide para qué sirve el pase. Un pase de fidelización tiene tres funciones:
- Identificar al cliente. El cajero escanea un código y el sistema sabe quién es el cliente.
- Mostrar el progreso. El cliente ve los sellos acumulados, los puntos obtenidos o el cashback disponible, y se siente motivado a alcanzar la siguiente recompensa.
- Invitar a la próxima visita. Una oferta, un objetivo de nivel o una notificación le dan un motivo para volver.
Cada decisión de diseño debe servir a una de estas funciones. Si un elemento no ayuda a identificar, mostrar el progreso o invitar a volver, va en el reverso del pase o no va en ningún sitio.
Por eso, además, para muchos pequeños negocios un pase de Wallet supera a una tarjeta de plástico o a una app independiente. El cliente ya tiene Wallet en el teléfono y el pase queda junto a sus tarjetas y entradas. Para una visión más amplia, consulta nuestra guía sobre tarjetas de fidelización digitales y retención de clientes.
Empieza por la estructura: qué va en el anverso
Las Human Interface Guidelines de iOS de Apple indican que el anverso de un pase debe estar despejado y ser fácil de leer, con la información adicional en el reverso. También recomiendan usar el campo de texto del logotipo para el nombre de la empresa, con una tipografía coherente para que no desentone con otros pases en Wallet.
Para un pase de fidelización, un anverso razonable tiene cuatro capas:
- Zona de marca. Tu logotipo y el nombre del negocio en la parte superior.
- Zona de estado. El número más importante, en grande: “7 de 10 sellos”, “1.240 puntos” o “18,50 € de cashback”.
- Línea de apoyo. Una línea breve, como la próxima recompensa o el nivel del cliente.
- Zona del código. El código QR, con suficiente espacio vacío alrededor para escanearlo.
La documentación de PassKit de Apple indica que el estilo de tarjeta de tienda (store card) es adecuado para tarjetas de fidelización, tarjetas de descuento, tarjetas de puntos y tarjetas regalo, y que, cuando la cuenta tiene saldo, el saldo actual debe mostrarse en el pase. Eso resuelve la cuestión principal en la mayoría de los programas de fidelización: pon el saldo donde el cliente lo vea primero.
¿Cuántos campos puedes usar?
La misma documentación de Apple define la estructura de un pase. Puede tener hasta tres campos de cabecera, un único campo principal, hasta cuatro campos secundarios y hasta cuatro campos auxiliares. Los cupones, las tarjetas de tienda y los pases genéricos con código de barras cuadrado pueden tener hasta cuatro campos secundarios y auxiliares en total.
El límite es una ventaja. No puedes meterlo todo, así que tienes que elegir. Un reparto práctico para la tarjeta de sellos de una cafetería:
| Campo | Qué poner | Ejemplo |
|---|---|---|
| Cabecera | Un estado breve que el cliente consulta de un vistazo | “7/10” |
| Principal | La recompensa o el número destacado | “3 sellos para un café gratis” |
| Secundario | Nombre del cliente o nivel | “Anna, Plata” |
| Auxiliar | Caducidad o una promoción vigente | “Sellos dobles los martes” |
| Reverso | Condiciones, dirección, horario, contacto de soporte | Reglas completas del programa |
Si te tienta usar todos los campos, pregúntate qué leería realmente un cliente que mira la pantalla con un café en la otra mano.
Formatos nuevos: pases de estilo póster
La documentación de Apple para iOS y watchOS 27 describe un pase genérico de estilo póster para pases de membresía, fidelización, cupones, recompensas y tarjetas regalo. Está pensado para destacar una ilustración llamativa, una tipografía moderna y notificaciones cuidadas para el cliente. La estructura incluye campos de cabecera, hasta cuatro campos principales, dos campos de pie, campos de reverso y un campo de información adicional, con un código QR cuadrado.
La lección de diseño es la misma de antes, con más espacio para la identidad visual: una imagen potente, unos pocos campos legibles y un código escaneable. Si tu marca tiene una foto o ilustración que los clientes reconocen, como la fachada, un plato estrella o una mascota, este formato le da más protagonismo. Consulta la página de Apple para conocer los requisitos actuales antes de decidirte, ya que el formato depende de los sistemas operativos más recientes y no todos tus clientes los tendrán todavía. Ten preparada una estructura clásica como base.
Color, fondo e imágenes
Apple recomienda evitar un fondo blanco liso y usar en su lugar un color sólido intenso o una imagen vibrante. En la práctica, eso significa elegir el color principal de tu marca para el fondo del pase y escoger colores de texto con un contraste fuerte respecto a él.
Algunas reglas prácticas que aplicamos al ayudar a los negocios a configurar sus pases:
- Un color de fondo, un color de texto, un color de acento. Más que eso resulta recargado al tamaño de un pase.
- Comprueba el contraste en un teléfono con brillo bajo. Un tono pastel claro que queda elegante en un monitor de escritorio puede desaparecer en un restaurante con poca luz.
- Mantén las imágenes sencillas. Una imagen de franja (strip) funciona mejor con un solo motivo y sin detalles pequeños.
- Combínalo con tu local. Un cliente que ve el mismo color en el rótulo, en el vaso y en el pase los asocia sin pensarlo.
Para principios visuales generales como la jerarquía, el espaciado y la coherencia, estos principios de diseño de contenido se aplican bien a un pase pequeño.
No dibujes una tarjeta de plástico
Las directrices de Apple también desaconsejan reproducir el aspecto de un objeto físico. Un pase debe seguir la forma y la función de Wallet y ser un objeto limpio y sencillo, no una captura de una tarjeta plastificada con chip y una falsa banda de firma. Los detalles que imitan objetos reales ocupan espacio y dificultan la lectura del texto.
Pon el texto en campos, no en imágenes
Este es el error de diseño más común. Apple recomienda usar los campos del pase para el texto en lugar de incrustarlo en imágenes, porque no todas las imágenes se muestran en todos los dispositivos. El Apple Watch, por ejemplo, no muestra las imágenes de franja ni las miniaturas, así que la información esencial que contengan se pierde. Las directrices de marca de Google dan otro motivo: el texto no debe incrustarse en la imagen principal porque no se puede localizar.
Si el mensaje de tu recompensa está en la ilustración y el teléfono del cliente no muestra la ilustración, el mensaje no existe. Deja la ilustración como elemento decorativo y la información en los campos.
Especificaciones de imagen para Google Wallet
Google publica requisitos de imagen exactos en sus directrices de marca para ofertas y fidelización:
| Elemento | Requisito |
|---|---|
| Logotipo | PNG cuadrado, de al menos 660×660 píxeles |
| Margen del logotipo | Aproximadamente un 15 % alrededor del diseño, para que la máscara circular automática de Google no lo recorte |
| Logotipo ancho (opcional) | 1280×400 píxeles, proporción 16:5, admitido en tarjetas de fidelización y otros tipos de pase |
| Imagen principal (hero) | PNG, 1032×812 píxeles (aprox. 5:4), con un margen de 20 dp arriba y abajo |
Dos consecuencias prácticas:
- Diseña el logotipo para un círculo. Si tu logotipo es un logotipo tipográfico ancho, colócalo en un cuadrado con mucho espacio o usa la opción de logotipo ancho. Comprueba cómo queda recortado en círculo antes de subirlo.
- Deja sin contenido clave la parte superior e inferior de la imagen principal. La regla del margen existe porque otros elementos tapan o recortan esas zonas.
Los recursos equivalentes de Apple son las imágenes de icono, logotipo, franja y miniatura, cada una con su propio tamaño. En lugar de memorizar dimensiones, tómalas de la documentación de diseño de pases de Apple en el momento de crearlos, ya que los tamaños y la compatibilidad con dispositivos cambian con cada nueva versión.
Si planificas específicamente para Google, nuestra guía de tarjetas de fidelización en Google Wallet cubre la parte de negocio, y la guía de Apple Wallet para la fidelización de clientes cubre la parte de Apple.
El código QR: la parte que tiene que funcionar siempre
Un pase bonito con un código que falla en la caja es un pase fallido. La documentación de Apple indica que los pases pueden funcionar con lectores NFC y códigos de barras, y que Wallet admite los formatos QR, PDF417, Aztec, Code128, Code 39, Codabar, EAN-13 e Interleaved 2 of 5. Wallet también optimiza la forma en que se presenta el pase para facilitar el escaneo. Si usas NFC, el pase no necesita código de barras.
Para la mayoría de los pequeños negocios, el QR es la opción correcta. Es cuadrado, contiene datos suficientes para un ID de cliente o un token de recompensa único, y las cámaras de los teléfonos y la mayoría de los escáneres modernos lo leen bien.
Lista de comprobación de ubicación y tamaño
- Hazlo grande. No reduzcas el código para que encaje en un diseño decorativo. Un código más grande es más fácil de leer desde el ángulo del cajero.
- Deja espacio vacío alrededor. Un margen libre, a menudo llamado zona de silencio, ayuda a los escáneres a encontrar los bordes del código.
- Mantén un contraste alto. Un código oscuro sobre una zona clara es lo más seguro. No tiñas el código con colores de marca que reduzcan el contraste.
- No lo pongas sobre una imagen recargada. Los patrones detrás o dentro del código provocan errores de lectura.
- Piensa en pantallas, no en papel. La pantalla de un teléfono puede tener reflejos, luz solar y brillo bajo, y un código que se imprime sin problemas puede fallar sobre el cristal.
- Adáptalo al escáner. Comprueba qué dispositivo lee tus códigos en el mostrador y prueba el pase en ese mismo dispositivo. Si escaneas con la cámara de un teléfono o una tablet, tendrás menos preocupaciones que con un escáner láser antiguo.
Plantillas QR de fidelización: por dónde empezar
La mayoría de los negocios no necesitan diseñar desde cero. Una plantilla te da una estructura probada y solo cambias el color, el logotipo y los textos. Elige la plantilla según el tipo de recompensa que ofreces:
| Tipo de programa | El anverso del pase debe destacar | Ideal para |
|---|---|---|
| Tarjeta de sellos | El progreso de sellos y la próxima recompensa | Cafeterías, panaderías, barberías, lavaderos de coches |
| Puntos | El saldo de puntos y lo que falta para la próxima recompensa | Comercios, restaurantes, supermercados |
| Cashback por niveles | El saldo de cashback y el nivel actual | Boutiques, centros de bienestar, hoteles |
| Descuento fijo | El descuento y el nombre del cliente | Proveedores de servicios, gasolineras |
| Cupón o promoción | La oferta y su caducidad | Campañas de temporada, ofertas de bienvenida |
Un pase de fidelización en el wallet del móvil también puede mostrar el nivel, las ventajas principales y enlaces para gestionar las recompensas o comprar. No necesitas todo eso desde el primer día. Empieza con el progreso, el código QR y una ventaja, y ve añadiendo a medida que los clientes demuestren que lo usan.
Con BonusQR puedes crear tarjetas de sellos digitales, sistemas de puntos, cashback por niveles y descuentos fijos, y después personalizar la imagen de marca, con compatibilidad con Apple Wallet y Google Wallet. Nuestra guía de tarjetas de fidelización digitales para Google Wallet muestra cómo encajan todas estas piezas.
Proceso paso a paso para diseñar tu pase
- Define un único objetivo. Visitas repetidas, mayor gasto o recomendaciones. El objetivo decide qué número va en el campo principal.
- Reúne tus recursos. Un logotipo cuadrado con espacio alrededor, un color de marca y una imagen sencilla si el formato lo admite.
- Escribe primero los campos. Redacta el texto de la cabecera, el campo principal, los secundarios y el reverso antes de tocar lo visual. Si el mensaje es claro en texto plano, el diseño será más fácil.
- Elige la estructura. Usa una estructura de sellos, puntos o cashback que encaje con la tabla anterior.
- Elige los colores. Un fondo intenso de tu marca, texto de alto contraste y nada de blanco liso.
- Coloca el código QR. Grande, con espacio alrededor y sobre una zona limpia.
- Lleva los extras al reverso. Condiciones, dirección, horario, contacto de soporte y redes sociales.
- Previsualízalo en ambas plataformas. Un pase que se ve bien en iPhone puede recortarse de otra forma en Android.
- Pruébalo con el escáner real. Hazlo en tu propio mostrador, con la iluminación real.
- Lánzalo y observa. Comprueba cuántos clientes añaden el pase y vuelven.
Cómo probarlo antes de que lo vean los clientes
Una rutina de pruebas breve detecta la mayoría de los problemas. Hazla en al menos un iPhone y un teléfono Android, usando Apple Wallet y Google Wallet:
- Aspecto. ¿Se corta el logotipo? ¿Hay algún texto difícil de leer con brillo bajo? ¿El fondo choca con el texto?
- Campos. ¿Se muestran correctamente el saldo, el nivel y el ID de cliente? ¿Se abren los enlaces del reverso?
- Escaneo. ¿Puede el cajero escanear el código a una distancia normal, con la iluminación de tu local y con el teléfono a distintos niveles de brillo?
- Actualizaciones. Después de una compra, ¿cambia el saldo? Cuando un cliente alcanza el umbral de una recompensa, ¿lo refleja el pase?
- Casos límite. ¿Qué ve un cliente nuevo con cero puntos? ¿Qué ocurre con una oferta caducada o si el cliente elimina el pase y lo vuelve a añadir?
Apple recomienda actualizar los pases cuando corresponda para reflejar cambios reales, y en un pase de fidelización esa es precisamente la clave. Un pase estático es una tarjeta. Un pase actualizado es un motivo para abrir el teléfono.
Errores habituales en el diseño de pases de Wallet
- Demasiados campos. El pase parece una hoja de cálculo. Elige las pocas cosas sobre las que actúan los clientes.
- Mensaje de recompensa solo en la imagen. Desaparece en los dispositivos que no muestran la imagen y no se puede localizar.
- Fondo blanco o desvaído. Se confunde con otros pases y reduce el contraste.
- Código QR diminuto. Queda ordenado, pero se escanea mal.
- Logotipo recortado por una máscara. Deja siempre margen y prueba el recorte circular en Google Wallet.
- Copiar una tarjeta de plástico. Desperdicia espacio y no aporta nada.
- No actualizarlo nunca. El pase muestra información obsoleta y los clientes dejan de consultarlo.
Nuestro punto de vista
Los pequeños negocios suelen preguntarnos primero por los colores. Entendemos por qué: el pase es una pequeña valla publicitaria de la marca. Pero, según nuestra experiencia, el diseño que más importa es el que facilita la próxima visita. Un cliente que ve un progreso claro y escanea sin complicaciones tiene un motivo para volver.
Por eso construimos BonusQR en torno al motor de fidelización que hay detrás del pase, no solo en torno al diseño. Eliges una tarjeta de sellos, puntos, cashback o descuento, la personalizas con tu marca y el sistema gestiona automáticamente las recompensas, la información sobre clientes y las notificaciones promocionales. No hay que esperar a ninguna integración con el TPV, así que un equipo pequeño puede lanzarlo rápido e ir mejorando el diseño a medida que aprende.
Nuestro consejo es empezar con algo sencillo. Un logotipo, un número, un código QR. Después, usa la analítica para ver qué hacen los clientes y mejora a partir de ahí. Un pase fácil de entender funcionará mejor que uno precioso que nadie lee.
Michal Palus
Crea tu pase con BonusQR
Si quieres un pase de Wallet con tu marca sin un proyecto de desarrollo, empieza con el plan FREE FOREVER y sube de plan a medida que crezca tu programa. BASIC cuesta 19 € al mes y PREMIUM 69 € al mes; consulta la página de precios de BonusQR para ver qué incluye cada plan.
Los negocios que quieren una app totalmente con su marca pueden consultar nuestra opción de marca blanca. Para algo más a medida, existe el desarrollo de apps personalizadas. Para más ideas sobre qué poner en marcha una vez que el pase esté activo, lee sobre los programas de fidelización digitales modernos.
Preguntas frecuentes
¿Cuál es el mejor tamaño para el logotipo de un pase de Wallet?
Para Google Wallet, usa un logotipo PNG cuadrado de al menos 660×660 píxeles, con un margen de aproximadamente el 15 % para que la máscara circular no lo recorte. En las tarjetas de fidelización también se admite un logotipo ancho de 1280×400 píxeles. Para Apple, toma los tamaños del logotipo y del icono de la documentación de pases vigente de Apple.
¿Debo poner el texto de la recompensa en la imagen del pase?
No. Ponlo en los campos del pase. Apple desaconseja el texto en imágenes porque no todas las imágenes se muestran en todos los dispositivos, y Google indica que el texto de la imagen principal no se puede localizar. Usa la imagen para crear ambiente y los campos para la información.
¿Qué formato de código de barras debe usar un pase de fidelización?
El QR es la opción habitual para los pequeños negocios. Apple Wallet también admite PDF417, Aztec, Code128, Code 39, Codabar, EAN-13 e Interleaved 2 of 5. Elige el que lea tu escáner y pruébalo en tu mostrador.
¿Necesito un diseñador para crear un pase de fidelización?
No necesariamente. Una plantilla con tu logotipo, el color de tu marca y campos claros es suficiente para la mayoría de los pequeños negocios. Un diseñador resulta más útil para el logotipo y para cualquier imagen principal o de estilo póster.
¿Con qué frecuencia debo actualizar un pase de Wallet?
Siempre que cambie algo real: el saldo, el nivel, el estado de las recompensas o la oferta. Apple recomienda actualizar los pases para reflejar cambios reales. Las promociones de temporada y las recompensas por ocasiones especiales son momentos naturales para renovar el mensaje.
