MAKING PAYMENTS BETTER

LIGHTNING TALK

INSERT YOUR CREDIT CARD NUMBER HERE

The average shopping cart abandonment rate is over 68%.

The number one reason? The checkout process.

2

The value of the abandoned carts?

4 trillion dollars.

3

According to BI projections

63% of that amount is potentially recoverable.

4

Why oh why?

5

NOT READY TO BUY

UNEXPECTEDSHIPPING COSTS

PAYMENT SECURITYCONCERNS

HAVING TO CREATEAN ACCOUNT

HORRIBLE UX NO COUPONCODE

Main Elements

6

FUNCTIONALITY

USABILITY

SECURITY

DESIGN

Anatomy of the checkout process

7

Login/guest checkout

Cart Page

Billing and Shipping

Summary and confirmation Page

Payment

LOGIN & GUEST CHECKOUT: MAKE REGISTRATION LOOK OPTIONAL

8

Save your users time and effort

Ask for the information you absolutely need to process the sale

FORMS

9

Keep it simple (for the user)

• Prefill when logical

• Visually indicate missing fields or errors

• Make it clear which field is required

FORMS

10

Tell the user where he/she f@!#ed up.

It reduce frustration and makes things easier to fix.

IN FIELD VALIDATION AND SMART ERROR NOTIFICATIONS

11

• Display cart details

• Modify the quantity or removeitems.

• Final price

• Product photos

• Save for later or wishlist

Cart Page

12

BILLING AND SHIPPING

13

PAYMENT

14

SUMMARY AND CONFIRMATION PAGE

15

CREDIT CARDS

• Ask for essentials only

• Use smart error notification

• Use input masks

• Offer card scanning options

4 tips to improve credit card forms

17

Offer card scanning options

18

HOW TO VALIDATE A CREDIT CARD NUMBER

WITH YOUR MIND

http://www.rosettacode.org/wiki/Luhn_test_of_credit_card_numbershttp://digitalboutique.co.za/credit-card-security-ecommerce-shops/

Limiting the number of characters

20

new Card({ form: 'form', container: '.card'})

• Animations for 4 different card types

• Intuitive experience

• It shows the security code on the card

• Pure CSS, HTML, and Javascript (noimages)

• 100% free and open source

Making better credit card forms

21

http://jessepollak.github.io/card/

http://jquerycreditcardvalidator.com/

http://kenkeiter.com/skeuocard/

Progressively enhance credit card input

22

Payment info validation

23

http://zdfs.github.io/toscani/paymentInfo/index.html

MOBILE

Avoid long scrolling lists

Show appropriate keyboard layouts:

• Use calendar view with dates

• Use input email type

• Use numerical for credit card info

Disable auto-correct when it is logical

MOBILE

http://mobileinputtypes.com/

@myriamjessier