quick start guide the pass designer - passkit start guide the pass designer 2 the pass designer the...

12
QUICK START GUIDE THE PASS DESIGNER

Upload: vanhanh

Post on 11-May-2018

225 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

QUICK START GUIDE THE PASS DESIGNER

Page 2: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

2

THE PASS DESIGNERThe quickest and easiest way to design Pass templates.

+

A BEAUTIFUL, USABLE PASS

=Pass Template Pass Data Certificate

+

Page 3: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

3

FIRST THINGS FIRSTPlan your objective and implementation before designing your pass templates.

PASS OBJECTIVE PASS DISTRIBUTION MANAGE DYNAMIC DATA

PASS REDEMPTION LEVERAGING YOUREXISTING SYSTEM

STAFF ANDCUSTOMER SUPPORT

Page 4: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

4

4

UPLOADING PASS CERTIFICATESEvery organization issuing passes must use their own certificates. We recommend using a different certif-icate for every pass to avoid passes stacking up in Apple Wallet.

To upload your own certificate, you will need to be enrolled in the Apple Developer Program. Follow the instructions here for more information:

http://help.passkit.com/hc/en-us/arti-cles/203379819-Uploading-Pass-Certificates

Pass

Des

igne

r, Pa

ss S

ettin

gs

FIRST THINGS FIRSTBefore we jump into designing your pass and bringing it to life, let’s make sure that we’ve got the foundation set.

CHOOSE A PASS TYPESelect one of the 5 templates in the Pass Designer to kick off your design. (Transit ticket, coupon, store card, membership card, event ticket).

1

SELECT YOUR CERTIFICATEChoose a certificate for this pass. You will not be able to change the certifi-cate afterwards.

2

COMPLETE THE REQUIRED FIELDSGet your pass set up by filling in the template name, organization name, and pass description.

3

TEMPLATE NAME PASS CERTIFICATEThe template name cannot be changed after saving your pass. Choose a name that is specific to the pass you are creat-ing. (i.e. Burger King Loyalty Card)

Passes of the same pass type (i.e. coupon) and certificate will stack in Apple Wallet. When creating passes, use different certificates.

APP INTEGRATION CALLBACK NOTIFICATIONSAdd an app the back of the pass by fill-ing in the iTunes ID - 9 digits after id in the URL. (https://itunes.apple.com/us/app/loopy-loyalty-stamper/id945301614?mt=8)

Get a notification every time a pass is ussed, registered, and more. Simply fill in your email address to receive these notifications.

PASSS E T T I N G S

Page 5: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

5

Even

t Pas

s Ex

ampl

e

COLORS&

IMAGESBEAUTIFUL PASSESHere’s where the fun part begins - colors and images. Here are some power tips and best practices:

1. Follow the guidelines below and upload your images first before choosing the colors that make up your pass.

2. Once you’ve uploaded your images, use an image color extract tool (i.e. http://www.coolphptools.com/color_extract) to find color codes based on your uploaded images. The look and feel of your pass will be 10x better and consistent in terms of branding and design. Feel free to play with different color combinations to see what works.

ICONIMAGE

Icon images should be 120 x 120 pixels and not be transpar-ent. This will appear on the lockscreen and on the webform.

LOGOIMAGE

Logo images should be 320 x 100 pixels and left aligned. We recommend using a transparent logo image in this case so that the logo blends nicely on the pass.

STRIPIMAGE

Strip images should be 640 x 220 pixels. This will appear on specific pass templates and on the webform. Tick the box ‘Supress shine effect’ to remove the automatic shine effect.

Coup

on P

ass

Exap

mle

Page 6: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

6

6

NOTIFICATIONS‘Notification to display when data changes’ is the message that will appear to customers when data has changed on a pass. The short code %@ represents the data that has been changed. Simply put %@ in that text field, or add ‘%@’ to a string of text.

i.e. ‘You now have %@ points’

Keep the notification message to a maximum of 23 characters to prevent text being cut off on the lock-screen.

FRON

TCO

NTE

NT

WHAT TO INCLUDEThe content on the front of the pass should provide users with the most important & relevant information. Depending on your pass type, here are some examples of what you can include:• User’s name• Expiration date• Discount/offer details• Time of event• Location of event• Points balance• Cash balance

FIXED VALUEThis can be used to statically describe the field (i.e. Name, Card Number). Pushing a change to a fixed text value will affect all devices.

1

DYNAMIC VALUEUse this if the value will be unique for each user (i.e. a person’s name, card balance, points collected).

2

COLLECTING USER DATATick the box ‘Passholder can change default value’ to collect users’ informa-tion before they install their pass. (i.e. Name).

3

FORMATTING OPTIONSAdjust text alignment to give the pass nice balance, and even change the format to number, currency, date/time for optimal display.

4

1

2

34

Stor

ed v

alue

car

d

Page 7: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

7

WHAT TO INCLUDEThe back of the pass is where you should be providing additional content and value to the user. The beauty about passes is that you can add as much content as you’d like without being limited to space. Here are some things you can include:• Terms and Conditions• Promotions• Links to your website, social media pages• Contact information• Address• Links to payment pages• Offer details• Membership details

REFER TO THE PRE-VIOUS PAGE FOR

TIPS ON FIXED TEXT, DYNAMIC TEXT, AND

ADDING IN LOCK-SCREEN NOTIFICA-

TIONS

BACK CO

NTEN

T

AUTO-LINKINGFields on the back of the pass such as telephone numbers, emails, and websites are automatically linked so users can take action.

1

HTML ENHANCEMENTSUse the HTML href attribute to hide long URLs and create hyperlinks. For example, add a hyperlink to the words ‘Buy Tickets Now’.

2

SUPPRESS AUTO-LINKINGDisable the auto-linking of phone numbers, emails, and more so that a field is not incorrectly linked.

3

1

Page 8: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

8

8

LOCK

SCRE

EN

LOCATION BASED TRIGGERSNow it’s time to add location based relevancy to your passes. By leveraging GPS and beacon tech-nology, your passes will appear on the lockscreen of your users’ device based on their location. This provides them with immediate access to their pass - right when they need it.

Add up to 10 GPS locations and 10 beacons per pass.

GPSType an address to find the latitude and longitude for that location.1

GPSIf you only want your lockscreen message to appear at a certain floor of a building, for example, add altitude in meters. (i.e. for the 50th floor).

2

BEACONSCopy and paste your UUID or type in a name to generate a UUID to be used. If you have GemTot Beacons, simply type in ‘GemTot USB’.

3

NOTIFICATIONSKeep notifications to a maximum of 23 characters to prevent text from being cut off.

4

1

2

3

4

Page 9: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

9

9

35 LANGUAGESMake your mobile wallet content more personal and relevant. Passes can be displayed in the language of your user’s phone setting. You can even change the images per language (useful if you have text in those images). Whether you have a global customer base or not, you can add up to 35 different languages per pass.

HOW TO DEMOWe would recommend using another device that is set up in a different language to demopass localization.

This makes it easier to show clients with multiple devices rather than having to change your phone language settings.

Alte

rnat

e pa

ss la

ngua

ge e

xam

ple

(Tra

ditio

nal C

hine

se)

TRANSLATING TEXTCopy and paste the string from each text field and provide the relevant translation. Don’t forget to include the text in ‘Pass Settings’!

1

IMAGESSimply drag and drop the relevant images below the text translations.2

LANGUAGES

Page 10: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

10

10

DISTRIBUTION

OMNICHANNELThe beauty of passes is that you can promote and distribute it across multiple channels. Anywhere you can add a URL or place a QR code, you can also use to share your pass:

• Website• Email• SMS• In an app• Social media• Tent cards• Posters• EDM

QUANTITY RESTRICTIONIf you don’t want to go over your pass limit, you can limit the number of passes that can be issued.

1

SOCIAL SHARINGEnable the social side panel on the pass distribution page (webform) so customers can share that page on multiple channels.

2

PROMOTE PASS URLWant to share your pass on PassKit’s Twitter feed? Tick this box to enable it.3

QR CODEOnce your pass is saved, the Pass Designer generates a QR code that links to that pass. Take a screenshot of it or generate your own QR code with the pass URL.

PASS URLSend the pass URL directly to your cus-tomers via e-mail, SMS, social media, and more. One click to add the pass to their mobile wallet. Easy.

PK.PASS BUNDLEYou can also distribute passes as a pk.pass bundle but we don’t recommend it as the pass may not be the most updated version. Distribute passes via the URL instead.

Dis

trib

utio

n Pa

ge

Page 11: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

11

WOOHOO!You’re now an expert at creating engaging mobile wallet content using the Pass Designer.

Refer to this guide whenever you’re stuck, or get in touch with us on the live chat in the Pass Designer.

Here’s to your success!

THE FINAL PRODUCT

CREATEDesign beautiful passes, collect customer information when necessary, and leverage location based triggers.

1

DISTRIBUTEPromote your pass across multiple channels for maximum brand exposure to acquire more customers.

2

ENGAGEPlan for real-time, contextual updates and engage with customers at the right moment. Send regular updates and make it conversational.

3

OPTIMIZESee how your campaigns are performing by looking at the Statistics tab and downloading the CSV of data to improve your mobile wallet marketing efforts.

4

Page 12: QUICK START GUIDE THE PASS DESIGNER - PassKit START GUIDE THE PASS DESIGNER 2 THE PASS DESIGNER The quickest and easiest way to design Pass templates. + A BEAUTIFUL, USABLE PASS =

LEARN EVERYTHING ABOUT PASSKIT:https://PassKit.com