Hub · Blog

13

Jun

State of the in-app payment experience

 

‘Aaarghh – why are they asking me for all this, all I want is to pay!’

I am often heard growling something along those lines (swearing omitted), when I try to complete a payment from my phone.

As the UX lead at Judopay, when faced with poor checkout experiences – that, I some years ago might have accepted as the painful way of things – now invoke similar reactions in me as when my older relatives are having ‘computer problems’, blood pressure included.

There is no excuse for asking a legitimate customer attempting an in-app transaction anything else other than the necessary details to pay. Full stop. That’s it.

Yet, when we review apps from leading brands, we regularly come across tired payment forms asking for irrelevant info, forced into the small spaces available on mobile (where touch keypads already cover up to 50% of the screen).

When it comes to mobile UI design at Judopay we are driven by three core principles:
Clarity – A clear purpose for each task
Efficiency – The shortest path to complete tasks
Familiarity – A familiar pattern (where it matters; payments)

This article looks at some of the typical pitfalls of mobile payments UX and how we have addressed these with our mobile-specific UI for capturing card details.

( Pizza + checkout time4 ) = X

While they kindly allow guest checkout, when it comes to the payment stage in Pizza Hut’s hybrid app, a customer’s appetite for a promising ‘Stuffed Crust Philly Cheese Steak’ is likely to be lost.

Not optimized for mobile
Once they have endured unresponsive buttons in the menu and are ready to pay, this hosted re-direct solution displays a card selection step that is barely legible as it is not optimized for mobile (fig 1).

Asking for card type
There is no need to ask for card type, as this can be detected from the first digits of card entry. For those lucky enough to pick the right card type from the apologetic options, another tiny but towering set of fields appears for the payment step (fig 2).

Wrong keypad
A user that can live with a disorienting zoom-in and hidden field labels when they tap to enter their details might start to lose patience when presented with alpha-numeric keypads (fig 3) for entry of numeric details…

blog_image_fig_1-3

Unnecessary info
…or abandon the checkout completely at the requirement to enter a full billing address for a simple click-and-collect order (fig 4).

Lack of validation
For the few who haven’t already ordered their pizza elsewhere, there is no attempt to immediately validate their entered details. Entry errors are only caught after they have tapped ‘Make Payment’ (fig 5).

Cancel here!
That is, unless they accidentally tap the bright ‘Cancel’ button that visually dominates the faded ‘Make Payment’ and pointless ‘Clear form’ buttons. This screen is crying out for a strong call-to-action for the user (fig 6).

blog_image_fig_4-6

Few payment options
While PayPal is offered as an alternative payment method, there is no option to use Apple Pay™ or Android Pay™, which would help many users to pay instantly.

Not-so-fast food
Lastly, as a traditional e-commerce provider handles the payment online, it brings the remaining users face to face with the dreaded ‘Spinning wheel’ of death during processing.

So, no pizza from here today then.

The customer journey was smooth up until the payment page. Continuing that intuitive flow, avoiding disruption at the moment of closing the sale is key to making or breaking the customer experience.

More of the usual suspects

With 65% of mobile commerce transactions now taking place within apps, many other brands are still struggling to shake off the hangover of e-commerce standards in their checkouts.

Whether this is caused by legacy systems, ignorance about the differences between online and in-app purchases or over-enthusiastic data capture for marketing, ultimately customers will leave and never come back.

It’s good to see brands moving towards native app strategies, but I’d like to see the following usual suspects abolished from in-app payment experiences.

blog_image_fig_7-9

Fiddly menu pickers
A common argument for using dropdowns for card capture is accuracy, but the change from a keypad for long card number to a menu picker wheel, then back to keypad for security code as in Monsoon’s app (fig 7) is a pain. Simply letting the user enter the digits on a numeric keypad (with the help of instant input validation) is faster.

No card visuals
The common step of asking users for card type, as seen in Cineworld’s app (fig 8) often leave out simple card identification visuals of front of card (for card type) and back of card (for security code). These are familiar visual cues that would simplify card entry.

One size fits all
There are instances where you have to ask for additional info, such as ‘Start date’ and ‘Issue number’ for Maestro cards, but there is no need to display these by default, as in E-on’s app (fig 9). Instead, by identifying users based on type, use progressive disclosure to reveal fields only when needed to protect users from too much irrelevant information.

A clean UX for mobile payments

Developing a clean app user experience with gradual engagement and minimum friction is critical to customer retention.

Judopay’s award winning SDKs are designed to offer simple and secure in-app payments, with a customizable UI that can be easily themed to match the branding of your app.

The interface only asks for three bits of info by default – card number, expiry date and security code, gradually revealing more fields if necessary.

It is available for iOS Swift and Obj-C and Android.

blog_image_judo_sdk_ios

Built-in intelligence
Built to free up your time to focus on other areas of development, judo’s Out-of-the-box SDK benefits from a set of intelligent features.

Drawing on rigorous user tests, it enables you to provide payments in your app that are easier to complete through the built-in hints, real-time error messaging and auto-advance functionality.

With our built-in security toolkit, you can prevent fraud with DeviceDNA™ and our mobile-specific fraud tools.

Our SDK also lets you offer more options for your users to pay with Android Pay and Apple Pay.

For any questions around using Judopay’s SDK in your app, please drop us a line on hello@judopay.com.

 


About Judopay · Judopay simplifies in-app payments, enable frictionless checkouts and intelligently prevents fraud for leading companies globally. Our payments and mobile experts help guide businesses and their development partners to create best in class apps to make paying faster, easier and more secure. Founded by serial financial technology entrepreneurs in 2012, Judopay is backed by leading venture investors and supported by banking and card scheme partners to offer in-app payments that are simple, frictionless and protected.

m-com snapshots

65%

of mobile commerce transactions now taking place within apps.


100%

of sales growth now driven by mobile commerce.


35%

of overall e-commerce accounted for by mobile.

Recent Tweets

Contact us, we'd love to hear from you

* Required. We will get back to you soon and we never share your details.