Designing the pass face comes down to one test: can your customer tell who you are and how far along they are in a single second? The face is a dashboard, not advertising space. A clear logo, the balance in the largest type, high contrast — everything else belongs on the back.
One second, three pieces of information
Your customer does not study your card. They open the wallet standing at the till, look at it for under a second, and turn the phone towards your cashier. In that second three things must have landed: who you are, what their balance is, and what they get when it fills.
Everything else — the address, opening hours, terms, phone number, your social accounts — is not wrong in itself, but it is wrong on the face. It belongs on the back, where whoever wants it will look for it without crowding out what everybody needs.
The order of elements
- Logo at the top, sized to be read rather than to fill It is the first thing the eye lands on and the thing that makes this card yours among ten others in a wallet.
- Balance in the middle, in the largest type on the card "4 of 6" has to be readable at arm's length and out of the corner of an eye. This is the number they came back for.
- The reward directly beneath the balance, in one phrase "Free coffee", not "the cafe rewards programme". A balance with no goal is a number with no meaning.
- The code at the bottom, with nothing decorating it It is a working tool your cashier scans; it needs no frame, no shadow and no caption explaining it.
That order is not taste — it follows how an eye moves down a vertical screen, top to bottom, with the middle as the focal zone. Putting the balance at the bottom or in a corner makes the customer hunt for it, and hunting takes longer than a second.
Colour and contrast
The single most repeated mistake is a brand-coloured background with text in a shade close to it. It looks elegant on a designer screen in a well-lit room, and becomes completely unreadable at low brightness in a dimly lit cafe.
Do
- A flat dark background with light text, or the reverse, with no complex gradients.
- Test the card at your phone's lowest brightness before approving it.
- Give the balance a different colour from the rest of the text so it jumps out.
- Use your brand colour on one prominent element rather than on everything.
Do not
- Do not put a photograph behind text; contrast then changes from letter to letter.
- Do not run a gradient from light to dark underneath a single line of text.
- Do not rely on colour alone to distinguish things — some of your customers cannot separate some colours.
- Do not copy a bank card palette; those are designed for plastic, not for a screen.
The low-brightness test is the most important step in that entire list and takes ten seconds. Turn your phone brightness to its minimum and look at the card in an ordinary room. If you have to squint, your customer will have to squint too — and they will not bother.
Small-looking mistakes that cost a lot
| Mistake | What happens | The fix |
|---|---|---|
| Shop name instead of a logo | The card does not stand out among ten others | A visual mark, however simple |
| Balance in small type | The customer opens the detail view every time | Largest type on the card goes to the balance |
| Long reward wording | It truncates mid-sentence | Three words maximum |
| A small or low-contrast code | A delay at the counter on every visit | A large code, black on white |
The third row deserves detail: reward text is truncated without mercy on small screens. "Get your sixth drink free in any size" becomes "Get your sixth drink…" and loses its meaning. Write it in three words that survive truncation: "Free coffee" works at every screen width.
Matching your actual shop
The card is opened inside your shop, in front of your sign and your printed logo. If the logo on the card differs from the one above your door — an old version, lighter colours, a shortened name — you create a small moment of hesitation on every visit, and it is a moment you never needed.
Use the same logo file that is on your sign, and exactly the same colour rather than one close to it. Nobody notices this detail when it is right, and everybody notices it unconsciously when it is wrong.
Common questions
Can I change the design after customers have added the card?
Yes, and the change reaches every existing card automatically with nothing for the customer to do. That is one of the strongest advantages a digital card has over paper. But do not change the logo or the primary colour often, because customers recognise your card in the wallet by its colour before they read the name.
Should I put a photo of my product on the face?
Better not to. A photograph competes with the balance for attention and wrecks the contrast under text, and those are the two most important elements on the card. If you want to show your product, work it into the logo itself or a small side image rather than a background beneath the numbers.
Does the design look the same on Apple and Google?
The content matches; the appearance does not. Each platform has its own template for field order, image sizes and how a balance is displayed, and they will never look identical whatever you do. Design for both and test on one device of each type before launch rather than assuming they match.