Payment interactions are incredibly important. They are the culmination of all other efforts on a site or app. To lose people here is to waste all of your other efforts. Around 68% of people abandon their carts before checkout, which amounts to $4 trillion in unobtained spending. If you have an awesome payment page, users who are on the fence about pulling the trigger will be delighted and will go forward.

As digital technology progresses quickly, there are many different ways that payment can occur within an interface. As well, many types of products will call for different types of interactions. So, what kind of experience do you want your users to have when they pay? Below is a curated selection of some of the best payment service interactions from designers around the world to inspire the project that you’re working on.

Messenger Bots and Partial Payment

payment design

Credit: Isil Uzum



Isil Uzum gives us a peek at “the end of apps as we know them.” This payment service for a travel app operates within a messaging app to offer the user a sequence of actions. Uzum shows us how two friends can remotely survey ticket pricing together, then make a purchase collectively. This design not only makes checkout more efficient, but it also provides a social element to payment that would not otherwise be possible. Imagine that users could not only book their flight this way, but also the rest of the services for their trip ahead.

Payment and Delivery Tracking

payment design



Although this app has been designed specifically for Domino’s, the design could easily be adapted to any delivery service. Saptarshi Prakash designed an interface with a quick way to choose between cards, then keep track of how long until you have to put on your bathrobe and get to the door. If the app just closes once payment is made, the user might feel detached from the service and unsure about their delivery. The timer and option to call the store are simple efforts to tell the user that their delivery is in good hands.

Workflow Payment



Barthelemy Chalvet show us an interface for a social payment service to keep tabs on which of your friends just bought Beyonce tickets. The user experience centers around a central button that accesses the essential actions. With a quick tap, you can choose to pay to a friend, set up a recurring payment, or deposit some cash.

Checkout Flow

payment design



Digital representations of that plastic thing in your wallet are becoming popular in many payments apps and services. Ramakrishna designed an intuitive interface for users to save this information so that they can quickly access it during payment. The graphic makes for a visually appealing interface, but also gives users a sense of realism that can be lost in digital products.

Tinder Travel



The main detail to notice from this interface is the thumbprint identification at the end of the payment. The interaction flows seamlessly with the rest of the payment process, but provides a more tangible confirmation for payment than just the on screen animation. For products that handle payments as significant as a flight, this security feature is something to consider.

Card Input

payment design



This interface is an example of a payment interaction that might be more applicable to users who don’t frequently use the same service. As the user wouldn’t have a card saved with the product, Oliver Schmid makes entering in information as easy as possible. The web form fills the screen so that our thumbs don’t have to search for hard to tap fields.

CC Payment Swipe To Confirm

payment design

Credit: Sam Atmore



Sam Atmore addresses a simple interaction concept with this design for a swipe to confirm button. The swipe action not only simulates the physical action of a credit card being scanned, but it also means the user has to intentionally follow through with the swipe action. A button can allow for an unintended tap, so by using the swipe we are able to eliminate an accidental confirm errors that may occur if a customer realises they have handed over the wrong card.

Citrus Onboarding

payment design



Onboarding is a relevant process for any digital product. Here is an example of a fun, but intuitive set of animations for a social payment app. The sequence distills the essential functions of the app that users will benefit from.

Payment loading

payment design



Tired of the same old spinning wheels? Toptal designer Lubos Volkov gives users something interesting to watch while their payment loads. The element is a part of a bigger concept that you can check out on his Dribbble.

Payment Concept for Online Charity

payment design



Payment services aren’t just for businesses. Handoko Dyan Aditya offers an easy way to support those in need by isolating a cause and offering users to donate to a selection of organizations. Aditya imagines that payment is easiest with NFC instant payment. What do you think?

Conclusion

As with all design problems, the payment process requires attention to function, usability, security and aesthetics. However, since checkout is often the culmination of an app’s entire efforts with a user, this point of the experience should be dealt with great care. The question is what experience is best for your product: something light hearted like the delivery tracker, the more secure thumbprint confirmation, or the social in-messenger payment? Perhaps some new breed of all-of-the-above?

Hiring? Meet the Top 10 Freelance UX Designers for Hire in December 2016
Don't miss out.
Get the latest updates first.
No spam. Just great engineering and design posts.
Don't miss out.
Get the latest updates first.
Thank you for subscribing!
You can edit your subscription preferences here.

Comments

Samseen
Hey Kent, never stop whatever it is that helps you curate good designs. I love them all. Great source of inspiration you know!
Steve
Cool!
comments powered by Disqus