Pass Design Guide

Introduction

Creating passes for Apple Wallet and Google Wallet involves careful consideration to ensure optimal user experience and functionality. This guide provides best practices for creating mobile wallet passes with Litecard.

On the Litecard dashboard, you can drag and drop, save, duplicate, export and import mobile wallet pass designs, but below are some examples and an explanation on how passes appear on Apple and Google Wallets.

Example Pass Downloads

Scan the QR codes below to download an example pass design type to your mobile wallet

1. NFC Pass

2. Barcode Pass

3. QR Code Pass

4. No Code Pass (e.g. used for online transactions only – or manual entry into the Point of Sale)

1. Apple Wallet

 Apple Wallet QR code and Barcode pass

  Apple Wallet NFC pass  (Apple Wallet NFC passes can display a QR/Barcode on the back)

Front of the Pass  #

Strip Image #

• Dimensions: 1125 pixels wide x 432 pixels high (298mm x 114.3 mm).
• Ensure the image is high resolution and relevant to the pass content.
• Strip Image is not supported for ID cards. Instead, display a thumbnail image with an aspect ratio between 2:3 and 3:2. Ensure the thumbnail image is at least 320 by 320 pixels to maintain clarity and quality.
• The Ticket card pass does not support a Strip Image. It should include only text fields, specifically requiring date and time details, to ensure essential information is presented.

Logo #

• Ratio: 3:1 or 1:1 (rectangle or square).
• Maximum Dimensions for Rectangle Logos:
  • Width: 200px
  • Height: 800px
• Background: Transparent (PNG)
• Ensure the logo is clear and recognisable.

Background #

• The background colour is customisable. Choose a colour that complements the logo and strip image.

Field Capacity and Customisation #

• Above the Strip Image:
  • Can fit up to 2 fields depending on text length.
• Below the Strip Image:
  • Can fit up to 3 fields depending on text length.
• Colours: Field and text colours are customisable.
• Font and Size: Standard and cannot be modified.

QR/Barcode #

• Placed at the bottom of the pass.
• Ensure the code is scannable and clear.

NFC #

• A QR or barcode can be placed on the back of the pass.

Back of the Pass #

• Additional information or instructions can be placed here.
• To get to the back of the pass, press the (i) icon.
• Ensure the content is concise and necessary for the user.
• Each field must have a header and the text below.
• The fields without hyperlinks will appear on top.
• You can hyperlink any part of the text.
• The hyperlinked test will appear in blue.

Back of the Apple Wallet pass, including backlinks

2. Google Wallet

 Google Wallet QR code and Barcode pass

 Google Wallet NFC pass (contains a QR code for backup in case NFC reader is not working)

  Google Wallet NFC pass     Back of the Google Wallet NFC pass displaying a QR code

Front of the Pass #

Hero Image #

• Dimensions: 1125 pixels wide x 432 pixels high (298mm x 114.3 mm).
• The image should be high resolution and relevant to the pass content.

Logo #

• Ratio: 1:1 (square).
• Ensure the logo is clear and recognisable.

Background #

• The background colour is customisable.
• Choose a colour that enhances readability and complements other design elements.

Field Capacity and Customisation #

• Company Name Field: Next to the logo.
• Pass Title Field: Row below the logo.
• Additional Rows:
  • Google Wallet can fit 3 rows with up to 3 fields per row.
• Colours: Text will appear black or white automatically for optimal readability based on the background colour.
• Font and Size: Standard and cannot be modified.
  

Back of the Pass
#

• Additional information or instructions such as links and call to actions can be placed in the more information section.
• Unlike the Apple Wallet, this is available immediately underneath the mobile wallet pass/
• Ensure the content is concise and necessary for the user.
• The fields without hyperlinks will appear on top.
• You can only hyperlink the whole field.
• The hyperlinked field appears with a globe icon and caption.

Back of the Google Wallet pass, including backlinks

3. Push Notifications #

Push notification on the lock screen from Apple Wallet

Title and message usage:

• Both title and message are utilised in push notifications.
• The message is prioritised as it displays on the lock screen and notification centre.
• The title is visible in the notification section on the back of the pass.
• Clicking the push notification brings users to the front of the pass.
• Additional clicks on (…) or (i) provide access to the back of the pass, showing the title and message.

Fields to fill out:

• Short and sharp push notification messages work best.
• Title: 50 character limit.
• Message: 250 character limit.
• The lock screen and notification centre display only the first 4 lines (approx. 157 characters) of the message without the title.
• The complete message and title are visible on the back of the pass.
  

4. General Best Practices

Design Consistency #

• Maintain a consistent design that aligns with your brand identity.
• Use high-resolution images and logos.

Readability #

• Ensure all text fields are legible and not overcrowded.
• Use contrasting colours to enhance readability.

Functionality #

• Test QR codes and barcodes to ensure they scan correctly.
• It’s best to include essential information on the front of the pass and use the back for additional details.

Customisation #

• Leverage customisable elements (e.g., background colour) to make the pass visually appealing and aligned with your branding.

By following these guidelines, you can create effective and visually appealing Litecard passes for both Apple Wallet and Google Wallet.

5. Glossary

Litecard – a platform for creating digital wallet passes for Apple Wallet and Google Wallet, designed to enhance user experience and functionality.

Mobile Wallet – a digital wallet on a mobile device that can store digital cards like passes, credit cards, and other forms of digital identification.

Pass – a digital card stored in a mobile wallet (Apple or Google Wallet). Sometimes referred to as card.

Strip Image – the central image on the front of the Apple Wallet pass, dimensions 1125 pixels wide x 432 pixels high (298mm x 114.3 mm).

Hero Image – the main image on the front of the Google Wallet pass, dimensions 1125 pixels wide x 432 pixels high (298mm x 114.3 mm).

Logo – the brand logo displayed on the pass.

Background Colour – the colour of the actual Pass.

QR/Barcode – a scannable code placed on the pass.

NFC – Near Field Communication (a subset of RFID) technology used for contactless interactions. NFC passes are tap passes that can be used as a coupon, membership or access card without unlocking your phone.

Back of the Pass (Backlinks) – the reverse side of the pass for additional information, instructions and fields with hyperlinks.

Push Notification – a message that pops up on a mobile device, sent by an app to provide updates, reminders, or other information to the user without them having to open the app.

Pass Creation – Passes can be created on our platform via a signup form which you can create yourself on the dashboard or by your customer success manager. Passes can also be created via API connected to your PoS or CRM.Pass Sendout – Passes are sent out via web browser (e.g. after filling out a form), SMS or email. They can also be distributed via Google or social media advertisements.

For more information, email hello@litecard.com.au