How to design a Wallet Card customers recognise

Apple says each of its card styles "defines the appearance and layout of your pass". Google says of the top of its loyalty card, which shows the logo, the issuer's name and the program title: "Neither the field references used to populate them nor their position can be changed."

So you do not choose where the logo sits. Apple also says what stays in view before a card is opened: the logo and the brand name "remain visible when the pass is collapsed in Wallet". At a glance, that is your logo and name, on your colour. In native.cards the hint under Business name reads "Wallet shows it beside the card and in notifications." Use the name customers say out loud, not the one on your company registration.

Apple Wallet vs Google Wallet: what your customers see covers how the two Wallets differ.

The background colour covers more of the card than anything else you supply, so it does the most to show whose card it is. But text sits on it. Apple's instruction: "Ensure sufficient contrast between background and text colors."

Apple gives no figure. The W3C's web accessibility guidelines do. They measure contrast as a ratio between the two colours, and ask for at least 4.5 to 1 for ordinary text. That threshold is set to allow for, among other things, "the loss of contrast sensitivity that typically accompanies aging".

Take a mid yellow, #F9BB2D, which is on Google's list of recommended card colours. White text on it measures about 1.7 to 1. Black measures about 12 to 1. (Our arithmetic, using the guidelines' formula.) The yellow is fine. White lettering on it is not.

In native.cards you set this on the Brand tab of the card designer. Colours has Background, Text and Labels, and a badge beside the last two reads Readable or Hard to read. On Text, Hard to read comes with the advice "Aim for 4.5:1 or more so customers can read it outdoors and at small sizes." It is only advice: you can still submit a card that shows it. All three colours apply to the Apple card. The Google card takes one, Card colour, with the note "Google picks text that reads clearly on it."

A pale colour, such as cream or a pastel, needs dark text, and on the Google card that choice is made for you. A very bright colour goes against Google's advice to avoid high-saturation colours, "for example, neon green #00FF00 or electric cyan #00FFFF". Use a deeper shade on the card and keep the bright one inside the logo.

The first is a wordmark: your name in your own lettering. Apple puts the logo in the top corner of the card and describes it as "typically a horizontal text logo representing your brand, optionally combined with a graphic element". The space is at most 160 points wide and 50 high (a point here is Apple's unit of screen size). Google has a matching place, the wide logo, recommended at 1280 by 400 pixels. Its documentation says that on Android the wide logo replaces the round logo and issuer name at the top of the card. Both spaces are 16 to 5, so one piece of artwork serves both.

The second is a square mark. Apple asks for an icon 38 points a side, which stands for the card "on the Lock Screen, in Mail, and on passes in Wallet". Google's standard logo is square too, and then cut: "Google Wallet masks your logo into a circular shape." The minimum is 660 by 660 pixels, and "The logo needs to have a 15% margin so that it isn't cut off when masked."

On a 660-pixel square, 15% from each edge is 99 pixels, which leaves 462 across the middle. That middle square is almost exactly the largest one that fits inside the circle: its corners reach 99% of the way to the edge. (Our arithmetic; Google gives no reason.) A long wordmark squeezed into it becomes a line nobody can read. So the mark has to be a symbol, a monogram or your initial in your own lettering. Leave the tagline off both files.

In the designer both go under Images. The square ones are required: the checks before review include "Add a default Apple icon before publishing." and "Add a Google logo before publishing this loyalty card." On a Stamp card the square mark does more, because the Stamp mark drawn inside each collected stamp can be your logo or icon.

A picture is optional. A plain card in your colour with a clear logo is a sound design. If you add a picture, each Wallet cuts it to a different shape. Apple's store card, the style it gives loyalty cards, has a strip image of 375 by 144 points: a band about two and a half times as wide as it is tall. Google recommends a hero image of 1032 by 812 pixels, "approximately 5:4", and its don'ts include "Use thin rectangular images".

A photograph framed for one loses its edges in the other. Choose one with the subject in the middle and room around it. On a Stamp card in native.cards the picture sits behind the stamps as a Backdrop, softened with Blur and Shade, so treat it as texture.

Both companies say to keep words out of the picture. Apple: "Reserve pass images for visual content. Embedded text isn't accessible and may not be visible if images don't display on all devices." Google lists "Embed text into your images" among its don'ts and adds a reason that matters in Malaysia: "This content won't be localized." Words typed as text can be translated: the designer's Card languages page says "Wallet shows the one that matches each customer's phone." Words that are part of a photograph stay in one language and end up wherever the crop leaves them.

An Apple Watch crops the picture again. Apple notes that "a pass on Apple Watch shows less information and fewer images than on iPhone", and that watchOS crops the strip image to fit its own card. Nothing a member needs should depend on the picture.

Apple's advice for the front is to lead with what the member came to check: "Show essential information, like an event date or account balance, in the header so people can see it when the pass is collapsed in Wallet."

Terms and opening hours belong on the back. In the designer, every value on the card is one of two kinds. Fixed Text is "Wording you type once. Every customer sees the same text." Customer Data is filled in for each card from your records. The help text names the mistake to avoid: typing "680 points" as Fixed Text "gives every card that exact wording, regardless of the customer's actual balance".

A 2017 analysis pooled 268 estimates from 81 articles on what repeated exposure does to liking, familiarity and recognition. It found a curve that rises with repetition and then falls back, "an inverted-U shaped curve", for things people see but not for things they hear. Those are ratings collected in experiments. We read the abstract, not the full paper, and found no study that measures recall, visits or sales from a card kept in a phone Wallet.

So the case for a recognisable card is practical. A member has to find it quickly at your counter, among whatever else is in their Wallet. Repetition can only help while the card looks the same. Settle the colour and logo before launch, then leave them alone. If you do publish a changed design, the dialog counts the cards customers already hold and says publishing updates them.

The designer is under Wallet Card, then Card Designs. Its own guide begins "Start from a complete card": pick a ready-made design, which already has the right fields and image spaces, and change it. The editor has seven tabs:

• Content: the front of the card.
• Brand: the name and colours. Saved brand here lets you "Reuse your saved name, logo and colours across cards".
• Images: the logos and the picture.
• Scan code: the code staff scan.
• Actions: what members can open from their card.
• Details: the back of the card.
• Settings: the internal name and specialist tools.

Before you submit, switch the preview to Compare, which shows the Apple card and the Google card side by side. Expect the two to differ. Then choose Apple Wallet and Watch to see it on an Apple Watch.

Submit for review runs the checks first. If something is missing, the dialog is headed "A few things to fix first" and explains "Apple and Google need these before your card can go live". native.cards then checks the card. Once it is approved, you press Publish. A preview is a drawing of what each Wallet documents. When the design is live, add your own card on an iPhone and on an Android phone and look at the real thing.