Skip to main content

​
Diseño de Pases de Lealtad

Los Pases de Lealtad de Alara están diseñados para ser completamente dinámicos. A diferencia de una tarjeta física o una imagen estática, el contenido del pase puede cambiar automáticamente conforme el usuario avanza dentro de su programa de lealtad. Esto permite mostrar distintos diseños, recompensas, promociones o cambios de estatus sin que el usuario tenga que volver a descargar su pase.
Gracias a nuestra integración oficial con Apple Wallet y Google Wallet, Alara puede actualizar automáticamente el diseño y contenido del pase conforme ocurren eventos como la acumulación de sellos, cambio de nivel o desbloqueo de recompensas.

​
¿Cómo funciona?

Cada Banner Image representa un estado diferente del pase. Cuando el usuario obtiene un nuevo sello, Alara actualiza automáticamente el Banner Image correspondiente. Por ejemplo, en una tarjeta de 10 sellos, normalmente existirán 11 imágenes.
ImagenEstado del pase
Imagen 0HOOK - Tarjeta recién instalada (0 sellos, con recompensa inmediata)
Imagen 11 sello
Imagen 22 sellos
Imagen 33 sellos o recompensa intermedia
……
Imagen 1010 sellos / recompensa final
De esta manera el usuario siempre visualiza el progreso real de su tarjeta.

​
Ejemplo

En el siguiente ejemplo se muestra un programa de lealtad de 10 sellos. Cada Banner Image representa un estado distinto del pase.
Screenshot 2026 07 13 At 14 18 11

​
No siempre debe seguir un orden

Aunque normalmente existe una imagen para cada cantidad de sellos, esto no es obligatorio. Puedes cambiar el Banner Image en cualquier momento mediante reglas o automatizaciones. Algunos ejemplos:
  • Mostrar un premio sorpresa.
  • Mostrar un descuento desbloqueado.
  • Mostrar un banner temporal por temporada.
  • Mostrar un mensaje de cumpleaños.
  • Mostrar un diseño especial para Navidad.
  • Mostrar una promoción limitada.
El cambio del Banner Image depende completamente de la lógica que definas para tu programa.
Muchos de nuestros clientes utilizan un Banner Image completamente distinto cuando el usuario desbloquea una recompensa. Esto genera una sensación de logro mucho mayor que simplemente agregar otro sello.

​
Recompensas dinámicas

Una excelente práctica consiste en cambiar completamente el diseño del pase cuando el usuario obtiene una recompensa. Por ejemplo:
  • Los primeros cuatro sellos muestran únicamente el progreso.
    Screenshot 2026 07 13 At 14 19 32
  • Al llegar al sello 5 aparece un Banner Image anunciando el premio ganado.
    Screenshot 2026 07 13 At 16 02 04
  • Después de canjear el premio, el pase continúa normalmente hacia la siguiente recompensa.
    Screenshot 2026 07 13 At 14 20 31
Esto hace que el programa sea mucho más atractivo para el usuario.

​
El Hook: Convierte tu Pase en una oferta inmediata

El primer Banner Image (Imagen 0) es el más importante de todo el programa de lealtad.
0 1
Su objetivo no es mostrar sellos, sino convencer al usuario de instalar el Pase Digital en su Wallet. Piensa en esta primera imagen como un cupón digital, no como una tarjeta de lealtad.

​
¿Por qué funciona?

La mayoría de las personas no descargan una tarjeta de lealtad únicamente porque acumula puntos o sellos. Sin embargo, sí están dispuestas a instalar una tarjeta si reciben un beneficio inmediato. Por eso recomendamos utilizar el primer Banner Image como un incentivo de bienvenida. Por ejemplo:
  • 15% OFF en tu primera compra.
  • Café gratis en tu primera visita.
  • Producto de regalo.
  • Beneficio exclusivo por instalar tu Pase Digital.
El usuario instala el pase pensando que está obteniendo ese beneficio inmediato.

​
¿Qué sucede después?

Una vez que el cliente utiliza ese beneficio por primera vez (por ejemplo, al hacer un Tap o Scan en caja), Alara actualiza automáticamente el Banner Image.
1
En ese momento, el pase deja de mostrar el cupón de bienvenida y se transforma en la tarjeta de lealtad. Ahora el usuario verá:
  • Su primer sello activo.
  • El progreso hacia la siguiente recompensa.
  • El diseño normal de su programa de lealtad.
Es decir: Paso 1: Inicia con Imagen 0 = Oferta de bienvenida
0 1
Paso 2: Usuario hace Primer Tap o Scan Paso 3: Cambia a Imagen 1 = Primer sello obtenido
1 1
Todo este cambio ocurre automáticamente.

​
Ejemplo de flujo

EstadoBanner Image
Imagen 015% OFF en tu primera compra.
Primer usoSe canjea el descuento automáticamente.
Imagen 1Tarjeta de lealtad con 1 sello activo.
Imagen 22 sellos.
Imagen 33 sellos.
……
Imagen 10Recompensa final desbloqueada.

​
¿Por qué recomendamos esta estrategia?

Comenzar con un beneficio inmediato incrementa considerablemente la cantidad de usuarios que agregan el pase a su Wallet. En lugar de pedirles que descarguen una tarjeta de lealtad “para usarla algún día”, primero reciben un beneficio tangible y, después de utilizarlo, el mismo pase se convierte automáticamente en su tarjeta de lealtad. Esto elimina una gran parte de la fricción durante la adquisición de nuevos clientes.
Esta estrategia ha demostrado generar tasas de instalación significativamente mayores que comenzar mostrando una tarjeta de lealtad vacía. El usuario siente que está instalando un cupón con un beneficio inmediato y, una vez utilizado, continúa acumulando sellos sin necesidad de descargar un segundo pase.

​
Assets del Pase

Un Pase Digital está compuesto por varios Assets. Cada uno tiene una función distinta dentro de Apple Wallet y Google Wallet.

​
Banner Image

El Banner Image es la imagen principal del pase.
0 1
Se muestra en la parte principal (al centro) de la tarjeta y normalmente representa el estado actual del programa de lealtad.

​
Especificaciones

  • Resolución recomendada: 3720 × 1476 px
  • Relación: 1860 × 738 px (3x recomendado)
  • Mantener siempre la misma proporción.
Todos los Banner Images de un mismo programa deben tener exactamente las mismas dimensiones para evitar cambios de tamaño entre estados.

​
Logo

El Logo aparece en la parte superior izquierda del pase.
Pass 1
Generalmente corresponde al logotipo de tu marca.

​
Especificaciones

  • Hasta 960 px de ancho.
  • Altura flexible.
Si el logotipo es demasiado ancho, Apple Wallet ocultará parte de la información del encabezado.
Recomendamos utilizar versiones horizontales del logotipo con fondo transparente.

​
Icono

El Icon es utilizado principalmente para:
  • Notificaciones Push.
  • Centro de notificaciones.
  • Pantalla bloqueada.
  • Algunas vistas previas del pase.
    6906a92550f2e30023f200ba Notificacion2 1

​
Especificaciones

  • Resolución mínima: 1440 × 1440 px
  • Relación: 1:1 (Cuadrado)

​
Color del Pase

Además de las imágenes, también puedes modificar el color y textos del pase.
Screenshot 2026 07 13 At 21 59 53
Esto permite diferenciar distintos niveles dentro de un mismo programa. Por ejemplo:
  • Bronce
  • Silver
  • Gold
  • Platinum
  • VIP
Muchas marcas utilizan distintos colores para comunicar visualmente el nivel del cliente.

​
Tutorial: Crear un Pase de 10 Sellos

Una forma sencilla de comenzar consiste en crear todos los estados del programa desde el inicio.

​
Paso 1

Diseña el Banner Image inicial. Este será el pase que verá el usuario al instalarlo por primera vez. Recomendamos ser un hook como mencionamos anteriormente, con alguna oferta inicial para incentivar la descarga del pase. No contiene sellos activos.

​
Paso 2

Duplica ese diseño. Ahora activa únicamente el primer sello. Guarda esta imagen como: Imagen 1

​
Paso 3

Duplica nuevamente el diseño. Ahora activa los dos primeros sellos. Guárdala como: Imagen 2

​
Paso 4

Repite el proceso hasta completar todos los estados del programa.

​
Paso 5

Diseña las imágenes especiales para las recompensas. Aquí puedes aprovechar para cambiar completamente el diseño del Banner Image y comunicar claramente el premio desbloqueado. Por ejemplo:
  • ¡Ganaste un café gratis!
  • ¡15% OFF desbloqueado!
  • ¡Recompensa lista para canjear!
Estas imágenes suelen generar una mejor experiencia para el usuario que simplemente continuar mostrando sellos.

​
Buenas prácticas

Mantén un mismo estilo

Todos los Banner Images deben compartir la misma identidad visual.

Destaca las recompensas

Cuando exista un premio, cambia completamente el Banner Image para llamar la atención.

Utiliza pocos textos

Los usuarios deben comprender el estado del pase en pocos segundos.

Diseña pensando en el progreso

Cada nuevo sello debe transmitir sensación de avance hacia la siguiente recompensa.
Los mejores programas de lealtad no solo acumulan sellos; cuentan una historia visual. Aprovecha los Banner Images dinámicos para sorprender a tus clientes, comunicar recompensas y hacer que cada visita se sienta como un nuevo logro.