How to design a loyalty card people keep on their phone
A wallet pass is a small fixed layout, not a blank canvas. Three decisions carry almost all of the design, and most cards get the third one wrong.
Designing a digital loyalty card is a much smaller job than designing anything else you have made for the shop, and the constraint is the point. A wallet pass is a fixed layout with about six slots in it. You are not laying out a page; you are filling in a form that will be read at arm’s length, in a queue, in about a second.
Three decisions carry nearly all of it: whether your logo survives being small, whether your color leaves the text readable, and whether the reward is stated in words a customer would use. The third is where most cards fail.
Key takeaways
- A wallet pass has fixed slots. You choose a logo, a background color, a label or two and the reward text, not a layout.
- Design for the lock screen. The pass is most often seen small, at a glance, held out at arm’s length.
- State the reward as the thing itself. “Your 10th coffee is free” works; “Loyalty Rewards Program” does not.
- Test contrast properly. A mid-tone brand color with white text is the most common legibility failure.
- The card is not a poster. Everything explanatory belongs on the back of the pass, which nobody reads in the queue and everybody can find later.
What you actually get to design
Both wallets give you roughly the same slots, under different names.
| Slot | What goes in it | Notes |
|---|---|---|
| Logo | Your mark, small, top-left | Shown at around 40px tall |
| Background color | One flat brand color | Must contrast with the text |
| Card name | The shop name | Not “Loyalty Card” |
| Balance field | Stamps or points | Filled automatically |
| Reward line | What they are working toward | The most important text on the card |
| Barcode or QR | Scanned at the counter | Do not restyle it |
| Back fields | Terms, address, opening hours | Unlimited, unread, useful |
That is the whole canvas. There is no typography choice, no grid, and no space for a tagline. This is a mercy.
The logo problem
Your logo was probably drawn for a shopfront or a cup. On a pass it appears small, and often against your brand color rather than white.
Three failures are common:
- A wide horizontal wordmark. It gets scaled to fit the height and becomes unreadable. Use a stacked or square version, or just the monogram.
- Fine detail. Thin outlines, a hand-drawn coffee bean, a fine serif, all gone at 40px. Simplify rather than shrink.
- A logo with a white background baked in. It sits on your color as a white rectangle. Export with a transparent background and a light or dark version to suit the card.
If you only have one logo file and it is wide and detailed, the fix is usually to crop to the initial or the icon. A single strong letter reads better small than a perfect wordmark does badly.
Color, and the contrast trap
Pick one flat background color, and then check the text on it.
The trap is mid-tone brand colors: a mid green, a dusty pink, a mid blue. They look right in the designer, where you are viewing a large card on a bright screen, and then fail on a phone at half brightness in daylight. White text on a mid tone is the single most common legibility failure.
The rule of thumb: go clearly dark with white text, or clearly light with dark text. Anything in the middle needs checking, and if you have to squint at it on your own phone outdoors, customers will not squint at all.
Avoid gradients and photographs behind the balance. Both wallets will render them, and both make the one number that matters harder to read.
Say the reward in words
Here is the part that matters more than the visuals.
A customer glancing at the pass should learn two things: how far along they are, and what they get. The balance handles the first automatically. The reward line handles the second, and it is usually wasted on the name of the scheme.
Weak: Loyalty Rewards Program. Members Club. Collect points!
Strong: Your 10th coffee is free. 6 cuts, 7th on us. Every 8th loaf free.
Use the noun for the thing you sell. Not “beverage”: coffee. Not “reward”: a free cut. The card is competing for attention with a boarding pass and a concert ticket, and a plain sentence about free coffee wins.
Choosing that threshold is a separate decision, and a more consequential one than any of the design choices here. It is worked through in stamps, points or vouchers and in how many stamps a card should have.
Use the back of the pass
Every pass has a back, reached by tapping the corner. It is unlimited, nobody reads it in the queue, and everybody can find it when they need it.
Put there:
- The address, and opening hours.
- The terms: expiry, one stamp per visit, what happens if they change phones.
- How to get in touch.
Keeping this off the front is not a compromise. It is what lets the front stay readable.
Both wallets, one design
Apple and Google render the same information slightly differently: Apple leans on the flat background color and a small logo, Google gives a little more room to imagery and shows the balance with more prominence.
You do not need two designs. You need one that survives both, which in practice means: flat color, simple logo, high contrast, short reward line. A design that depends on a photograph or precise placement will look considered on one and accidental on the other. The differences worth knowing are set out in Apple Wallet vs Google Wallet.
The arm’s-length test
Before you ship it, do this. Put the card on your own phone, set the brightness to about half, hold it at arm’s length, and glance for one second.
You should be able to answer: whose shop is this, how far along am I, and what do I get. If any of the three takes a second look, the fault is almost always contrast or a reward line that says “rewards” instead of what the reward is.
Then hand the phone to somebody who does not work there and ask the same three questions. Staff cannot run this test on themselves; they already know the answers.
Frequently asked questions
Can I use a photograph of the shop? On the back, or as a small hero image where the wallet allows it. Behind the balance, no: it costs you the legibility that makes the card work.
Do I need a designer? Not for this. There is no layout to get wrong, and a card generator will produce a defensible pass from a logo and one color. A designer is worth it for the counter poster, which is a real design job.
Should the card match my website exactly? It should be recognizably you. If your site’s exact brand color is a mid tone that fails contrast, use a darker version of it on the card rather than breaking the card.
What if I change the design later? Wallet passes update in place, so a design change reaches the cards people are already carrying without anyone reinstalling anything. Balances are unaffected.
Does the barcode need to look on-brand? No, and do not try. Scanners are less forgiving than eyes, and a restyled or low-contrast code slows down the counter, which is the one place you cannot afford friction.
Where to go next
Design is the smallest of the four setup decisions. The complete guide to digital loyalty cards covers the others in order: card type, length, reward, enrollment. Once the card looks right, the next job is getting people onto it, which is mostly about the code next to the till.
Passumo includes a card designer that renders both wallets as you edit, and can generate a first draft of the card from your logo and colors.