Day 2 • Credit card checkout

Day 02 – Credit Card Checkout

Even though we are familiar with the mobile checkout process, it doesn’t mean that paying online is always fast or convenient. Unfortunately, it is all too common for tricky checkout sequences to take 10 minutes or more to navigate! How can we make the mobile checkout process easier and faster?

Here are some critical details to consider:
◻︎ Minimize the number of checkout steps (here I have four steps but I didn't display the first one which is a shopping cart)
◻︎ Allow user to update/remove items in the cart
◻︎ Clearly display product, price, and shipping
◻︎ Minimize scrolling
◻︎ Collect card name, number, expiration date, and security code
◻︎ Consider offering geolocation / camera scanner / digital wallets
◻︎ Show useful error messages
◻︎ Show payment security (lock icon on submit button)
◻︎ Show a receipt and order number

In the future, I will include these details too:
◻︎ Allow checkout as a guest
◻︎ Offer mobile-friendly payment options but don’t overload with options
◻︎ If accepting credit cards, indicate what cards are accepted
◻︎ Minimize typing and present the correct keyboard for each field


I hope you enjoy my work and let me know what you think! #DailyUI

Image source: unsplash.com