twitter-black
medium-black
dribbble-black
instagram-black
payment-101-creative

Design recommendations to improve digital payment experience

Design recommendations to improve digital payment experience

Design recommendations to improve digital payment experience

Design recommendations to improve digital payment experience

Design recommendations to improve digital payment experience

Every day we make digital payments on different apps and websites. Most of the business in today’s world rely on digital payments. There are 100s of companies in the Fintech space working towards making digital payments more accessible, seamless, trustworthy and reliable.

In the midst of all the innovation and evolution around digital payments, in my experience, most of the apps and websites miss nailing the last mile of the user's experience of making a digital payment.

The difference between good and great is attention to detail.

I've listed down such small design details and interaction that makes a good experience, great.

This is by no means a comprehensive list. I will keep adding more. If you want to contribute, you can reach me at @designaive

Every day we make digital payments on different apps and websites. Most of the business in today’s world rely on digital payments. There are 100s of companies in the Fintech space working towards making digital payments more accessible, seamless, trustworthy and reliable.

In the midst of all the innovation and evolution around the fundamentals of digital payments, in my experience, most of the apps and websites miss nailing the last mile of the user's experience of making a digital payment.

The difference between good and great is attention to detail.

I've listed down such small design details and interaction that makes a good experience, great.

This is by no means a comprehensive list. I will keep adding more. If you want to contribute, you can reach me at @designaive

01

Have permanent labels for input fields.

Have permanent labels for input fields.

Have permanent labels for input fields.

Don't leave room for assumptions.

Don't leave room for assumptions.

Don't leave room for assumptions.

Don't leave room for assumptions.

Do

Always have permanent labels for input fields. You can smartly use placeholders as labels to keep the design clean.

Don't

Don't rely only on placeholders to educate users what input is required.

02

Automatically focus on the required input field.

Automatically focus on the required input field.

Automatically focus on the required input field.

Drive intent.

Drive intent.

Drive intent.

Do

Whenever a user input is required automatically focus on that input field.

Don't

Don't wait for the user to tap on the input field. It's an extra tap that can be avoided.

03

Open the correct keyboard.

Open the correct keyboard.

Open the correct keyboard.

Don’t be dumb.

Don't be dumb.

Do

Show numeric keyboard where user needs to enter only numbers.

Don't

Don't show the default alphanumeric keyboard where user needs to enter only numbers.

04

Jump to next input field once the user enters a valid input.

Jump to next input field once the user enters a valid input.

Jump to next input field once the user enters a valid input.

Be smart.

Be smart.

Do

Once the user enters a required value for an input field, automatically change the focus to the next required input field.

Don't

Don't wait for user to tap and change focus manually. It's time consuming.

05

Keep the Call-To-Action button visible.

Keep the Call-To-Action button visible.

Keep the Call-To-Action button visible.

Keep the Call-To-Action button visible.

Keep the Call-To-Action button visible.

Make it easily discoverable.

Make it easily discoverable.

Do

Make sure you have the main Call-To-Action Button always visible on the screen. And make it easily accessible.

Don't

Don't let the main Call-To-Action button to get out of the viewport or hidden behind some element.

06

Have security icons & badges.

Have security icons & badges.

Have security icons & badges.

Build trust.

Build trust.

pay9_yes

Do

Make your payment page look visually secure by adding security badges / icons. This will help the user to perceive the page being secure to share financial details.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

pay9_no

Don't

Don't leave your page without any security badges / icons. Lack of trust is one of the top reasons for checkout abandonment.

07

Show realtime error.

Show realtime error.

Show realtime error.

Be less annoying.

Be less annoying.

Be less annoying.

Be less annoying.

Do

Validate and notify for invalid inputs in realtime.

Don't

Don't wait until the user submits the form to validate the input fields.

08

Give instant feedback when a user submits a form.

Give instant feedback when a user submits a form.

Give instant feedback when a user submits a form.

Give instant feedback.

Give instant feedback.

Do

When a user taps on a button give instant feedback either by disabling the button, showing a loader or taking user to the next page.

Don't

Don't leave the user wondering if the form is submitted or not.

09

On payment failure give users means to continue their experience.

On payment failure give users means to continue their experience.

On payment failure give users means to continue their experience.

Have no dead ends.

Have no dead ends.

Do

When a payment fails, communicate clearly and give users options to retry paying or reach out to you for help.

Don't

Don't just inform the user about the payment failure without giving them means to complete the payment.

10

Have descriptive Call-To-Action buttons.

Have descriptive Call-To-Action buttons.

Have descriptive Call-To-Action buttons.

Make it obvious. Clear > Clean.

Make it obvious. Clear > Clean.

cta1

Do

Try to tell the user exactly what will happen on pressing the button and where it might take her.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

cta2

Don't

Avoid having short imprecise texts for buttons.

11

Show a delightful payment success screen.

Show a delightful payment success screen.

Show a delightful payment success screen.

Show a delightful payment success screen.

Design to delight.

Design to delight.

Do

Make it visually very clear that the payment has successfully been done before showing other details.

Don't

Don't show a lot of details along with communicating that the payment has been done. Do it after.

12

Have an action  to clear input field.

Have an action  to clear input field.

Have an action  to clear input field.

Save user’s time.

Save user’s time.

Do

Save users time by having an action to quickly clear an input field.

Don't

Don't make users spend time doing tedious work..

Shoutout to Adit, Rahul & Samir for contributing. Feel free to reach out if you want to contribute as well.

Adding more soon.

Shoutout to Adit, Rahul & Samir for contributing. Feel free to reach out if you want to contribute as well.

Adding more soon.

Share it on