← Tous les articlesDesign Wallet

Design d’une carte de fidélité : ce qui change entre Apple Wallet et Google Wallet

Logo, bannière, tampons, solde et QR code : les éléments personnalisables et les limites visuelles des deux Wallet.

Concevoir deux rendus pour un même programme

Le programme de fidélité peut partager les mêmes règles et le même identifiant client sur iPhone et Android. En revanche, Apple Wallet et Google Wallet construisent l’écran à partir de composants différents. Une maquette libre ne peut donc pas être collée telle quelle sur les deux cartes. Préparez un système visuel commun — logo, couleurs, illustration, intitulé de récompense — puis adaptez sa composition à chaque Wallet.

Sur Apple Wallet : une carte structurée

Une carte de type store card peut comporter un logo, du texte, une image de bandeau, des champs et un code-barres ou QR code. Apple choisit la position finale de plusieurs éléments selon la place disponible et l’appareil. Privilégiez un logo simple, une image qui reste lisible si elle est recadrée et des libellés courts. Le nombre de tampons peut figurer dans un champ actualisable, tandis que leur représentation graphique doit être générée comme une image mise à jour.

Sur Google Wallet : logo, couleur et image héro

La carte de fidélité Google prévoit notamment un logo de programme, une couleur de fond, un solde de points et un code. Une image héro peut enrichir sa face avant. Cette image n’est pas une page entière que l’on contrôle au pixel près : Google conserve sa propre hiérarchie de champs. Le logo peut être masqué dans une forme circulaire ; prévoyez donc assez de marge autour du symbole.

Tampons et points : ne pas confondre donnée et décoration

Le compteur est une donnée qui doit changer après chaque validation. Les tampons dessinés dans une bannière sont une image. Si cette image reste fixe, le client peut voir 5/8 dans le texte et toujours quatre cases remplies dans le visuel. Pour éviter cette incohérence, liez l’image de progression à chaque carte client ou choisissez un visuel décoratif qui ne prétend pas représenter le solde.

Vérifier le contraste et le QR code

Testez la carte avec un nom long, une récompense longue et un téléphone de petite taille. Le solde doit rester distinct du fond et le QR code doit être facile à présenter au scanner. Ne dessinez pas vous-même un faux QR code dans la bannière : utilisez le composant prévu par le Wallet, relié à l’identifiant du client. Vérifiez le résultat installé, pas seulement le rendu dans l’éditeur.

Mettre le design à jour sans perdre la confiance

Après publication, modifiez une carte de test et confirmez que l’ancienne carte enregistrée reçoit le nouveau solde et le nouveau visuel. Lorsque la récompense est atteinte, affichez un message clair plutôt que de laisser seulement une grille pleine. Gardez les variantes Apple et Google reconnaissables comme la même marque, tout en acceptant leurs différences d’interface.

Passez à la pratique : personnalisez un modèle de carte, puis découvrez comment la partager et enregistrer les visites.

À lire aussi : Créer une carte de fidélité sans application à télécharger · Points ou tampons : quel programme choisir pour votre commerce ?

Créer ma carte de fidélité →