Best Practices for Mobile Payment Experiences

Have you ever been in tricky online payment situations that give you mini panic attacks ever so often? Ever wondered if your payment did go through? or did it not? or why is it taking so long to give you confirmation? This sure does happen to me a lot and always makes me very anxious to not have control when it comes to things ‘money related’.

Inspired by ‘Designing Mobile Payment Experiences’ by Skip Allums I put together best practices for enhancing mobile payment experiences. If you have not read the book, you must. From my reading, I have summarised important best practices to keep in mind while creating mobile payment experiences.

Focus on the user’s goal.

Favour speed over spectacle. Keep user needs above yours. It is easy to get lost by exploring emerging technologies and constantly tweaking UI elements. Avoid lots of data entry by :

• Because you are designing for mobile you can take advantage of the mobile’s camera to click a picture of the card and use character recognition to eliminate data entry. Refer to image 1.
• Don’t ask for card type because the first six digits of the credit card number encode the card type. Refer to image 2.
• Get zip code first and then use an API to pull city and state.
• Stick to shallow navigation by setting a primary payment method the first time.

Image 1 : Venmo — Linking to a card by the scan method

Image 2 : Uber — Elimination ‘card type’ field because first six digits of the credit card number encodes the card type.

A conversation with the users. React to every action.

Provide constant feedback to show the user that there is an outcome to the actions that they just took. Feedback can be visual (text and/or animation), sound or vibration pulses(if working on a native app).

Information is power.

Parse MMC (merchant category codes) codes to allow users to make financial decisions like selecting a category of rewards and such. Allow users to feel in control by:

• Review payment before submission.
• Showing balances and recent activities.
• Offer transaction (transaction history) records in plain English

Security

At the UI layer, it is better to use customized keypads rather than stock OS keyboard to punch in 2FA and Auth0 codes, passcodes/mPIN, Gesture Patterns, User Data and preferences. Reasons being :

• To avoid nefarious programs listening in on common touch coordinates
• To allow for larger touch targets as opposed to calculator-like interface with special characters and mathematical elements which is unnecessary in this context (image 3).
• Another option would be to use biometrics for mobile security (image 4).

Image 3: Examples of a customized keypad for entering passcodes/mPIN. PC: Designing Mobile Payment Experiences

Image 4: Biometrics on PayPal for mobile payments security.

Design for error cases.

Any errors with payments can lead to sheer mistrust. How your app handles these situations can make or break the experience. Providing feedback is important here as well — visual (text and/or animation), sound or vibration pulses. Be sure to explain the error and next steps the user can take instead of leaving the user high and dry. Lighten the situation by using amusing instructional text (image 5).

Image 5: LevelUp gives the user several attempts before a final warning, after which she’ll be locked out. PC: Designing Mobile Payment Experiences

Avoid tech jargon.

Use plain English. Financial apps, in particular, are notorious for using industry jargon. Users need to see warm and familiar language that is concise and easy to understand. Explain to the user why they are waiting and what is happening in the background.

Dress the part. If something looks odd, users won’t trust it.

Users trust familiarity. You do not want to throw them off their comfort zone when dealing with money. Make the interface as predictable as possible by using IOS guidelines on IOS devices and android guidelines on android devices. Always provide users with what they are used to.

Function follows form.

This could be classified as service design. Be transparent about transfer time, processing fee, service fee etc. Keeping the users in the loop about a delay and wait times supported with reasons and next steps cut down on user’s anxiety and panic. Bring to the user's attention immediately that they have to make adjustments to their hardware if that is the reason for the delay.

Teach and Educate

This is a new way to pay for things and services. So users have to be instructed and educated about the processes.

• Use tutorials and/animations to educate users. This is far more important when dealing with proximity payments.
• Provide easily navigable FAQs and help sections.
• Instruct consumers, merchants and support teams to guide and educate the users as well.

Award repeated use.

Incentivize with offers and loyalty points to motivate users to use mobile payment ways. Examples — Starbucks, Groupon etc.