One pass, two wallets: how Apple and Google draw the same card
Apple Wallet and Google Wallet don't share a layout. Here's how one loyalty card maps onto each, and what to keep in mind when you design for both.
When you design a pass in TapAce, you design it once. It still has to render twice: once in Apple Wallet and once in Google Wallet. The two apps don't share a layout, so the same fields land in different places and some design choices only exist on one side.
Here is one loyalty card from our fictional café, sunday club, in both wallets.
Apple Wallet: styles and fields
Apple gives every pass one of five styles: generic, store card, event ticket, coupon or boarding pass. The style decides the shape of the card and which images it can use. A store card has a wide strip image across the top. An event ticket gets a notch and a shorter strip. A generic pass has a small thumbnail next to its main field instead.
Text goes into field rows. Header fields sit at the top and stay visible when the pass is stacked behind others, so they suit the one value people check most, like the stamp count above. Primary fields are the large text, then secondary and auxiliary fields fill the rows beneath. Anything longer goes on the back of the pass.
Google Wallet: one template
Google's generic pass follows one template. A round logo and the issuer name sit at the top, then a small subheader above a large header, then rows of label and value pairs, the barcode, and a wide hero image at the bottom.
You set one background colour, and Google picks the text colour to contrast with it. That keeps every pass readable, but it means you can't choose label colours the way you can on Apple.
Where they differ
| Apple Wallet | Google Wallet | |
|---|---|---|
| Layout | Five styles, each with its own field rows | One template with a header and rows |
| Images | Logo, icon, strip, thumbnail, background or footer, depending on the style | A round logo and a wide hero image |
| Text colour | You choose the value and label colours | Picked automatically to contrast with the background |
| Updates | Wallet asks your server for the new pass after a push | You update the pass object through the API |
Designing for both
- Put the key value up top. A stamp count or a seat number belongs in Apple's header field and Google's header, where people see it first.
- Keep labels short. Both wallets cut long labels and values to fit the card, especially on smaller phones.
- Use photos without text. Apple draws field values over the strip image, so busy or bright photos make text hard to read. Pick dark photos for light text.
- Put your typeface in the logo. Apple renders logo text in the system font, so brand lettering only survives as part of the logo image.
- Check the colour in both. With a mid-tone background, Google may pick white text where you chose dark text for Apple, which changes the feel of the card.
TapAce templates store the fields once and map them to each wallet's layout, so you can see both versions side by side while you design.
