A wallet card is a small, fixed rectangle seen for about two seconds, usually on a lock screen, often one-handed. Designing one is mostly a matter of deciding what to leave out.
What should be on the front of a loyalty card?
Four things: who it is from, what the reward is, how close the customer is, and what to do next. Anything else competes with those and makes the card slower to read.
| Element | Why it earns its place |
|---|---|
| Business name or logo | The customer holds several cards; yours must be identifiable instantly |
| The reward, in words | "Free coffee" tells them why the card exists |
| Progress | 7 of 10 is the mechanism: the visible finish line |
| What to do next | "Show this at the counter" removes the only real hesitation |
Progress deserves the most visual weight. It is the part that changes, the part the customer checks, and the reason they open the card at all.
What colours work on a wallet card?
High contrast between background and text, and a background dark or saturated enough to stand out against the wallet's own interface. A pale card on a white background disappears in a list of cards.
Use your real brand colour rather than something chosen for the card. The card sits beside the customer's bank cards, and the value of it looking like your shop is greater than the value of it looking pretty.
What belongs on the back of the card?
Everything the customer might need once and does not need at a glance: opening hours, address, phone number, the programme terms, expiry, and how to stop receiving messages. The back is unlimited and free.
This is the most underused surface in wallet loyalty. Most cards leave it empty, which pushes every routine question, where are you, when do you open, does this expire, to a staff member.
Should the card show a barcode?
Include one if anything in your process scans it, and leave it off if nothing does. A barcode nobody scans occupies the largest single area on the card for no purpose.
Where a business identifies customers by phone number rather than by scanning, the card is a display rather than a token, and the space is better spent on progress.
How does the card look on a lock screen?
Only the top strip and the card's primary field are reliably visible, so the reward and the progress need to be in those positions rather than further down. Design for the strip first and the full card second.
It is worth checking on a real phone before launch, in daylight, at arm's length. A card that reads well on a desktop preview and not at a counter has been designed for the wrong screen.
What should the card say when it is full?
That the reward is ready and how to claim it, in place of the progress count. This is the single highest-value state the card ever reaches and it should look different from every other state.
Pair it with a notification at the moment it happens. A customer who does not know the reward is waiting will not come in to claim it, and an unclaimed reward is a customer the programme failed to motivate.
How often should the design change?
Rarely. A card already installed updates in place, so a redesign reaches every existing holder, which is useful for fixing a real problem and disruptive if done for novelty.
Seasonal variations are the exception worth making, because they are noticed without being confusing. Loonine's card designer previews the real card rather than a mockup, so the check can be done before anything is issued.
Should the card look different from the business's other branding?
No. The card sits among the customer's bank cards and travel cards, and its job is to be recognised in under a second. Anything that makes it look like a generic loyalty card rather than your shop works against that.
The common error is designing the card as a marketing asset: gradients, a strapline, a stock photograph. Those read as clutter at card size. A flat brand colour and a clear logo outperform every decorative treatment.
What text should the progress field use?
Whatever a customer would say out loud. "7 of 10" is understood instantly; "70% complete" requires conversion; "350 points" means nothing without knowing the threshold.
For a points scheme, state the reward in currency alongside the balance, "160 of 200 points · €10 off", because the customer's real question is what it is worth, not how many units they hold. A balance a customer cannot value does not produce the goal-gradient effect the mechanic depends on.
Does the card need a photograph or an illustration?
Rarely, and only if it survives being shrunk. The card's image areas are small and are cropped differently across Apple Wallet and Google Wallet, so anything with detail becomes an unreadable smudge.
Where an image does earn its place is the logo strip, because it is the fastest identification the format offers. Test it at actual size on a real phone rather than in a design tool, which is the single step most often skipped.
Does the same design work on Apple Wallet and Google Wallet?
The content does; the presentation does not. The two platforms crop images differently, place fields differently and render the card at different proportions, so a layout tuned precisely for one will be slightly wrong on the other.
Design for the common ground rather than optimising for either: a strong background colour, a logo that survives cropping from any side, and the reward and progress in the fields both platforms surface prominently. Then check it on one phone of each kind before issuing anything.
What about accessibility?
Contrast is the one that matters and the one most often failed. A pale brand colour with white text may look fine in a brochure and be unreadable on a phone held at arm's length in daylight.
Aim for a strong contrast ratio between the text and the card background, and never rely on colour alone to communicate the reward state. A card that says "reward ready" in words works for every customer; one that only turns gold does not.