UI/UX updates: new payment screen design for higher conversion

Today, KOMOJU brings you an update of our payment screen. This update includes a number of improvements that will make the payment process smoother for your customers, allowing them to easily switch between payment methods, receive instant feedback on the details they enter and get LINE notifications for payment instructions. 

We are bringing the changes of the UI design as part of our rebranding process. After renewing KOMOJU website to make it more sleek, intuitive and easy to navigate, we decided to make the same improvements to the payment screen. We believe the changes we have made will make the customers comfortable with the payment and will increase conversion rate. 

Improved UI design

The new look of the payment screen is the first change you will notice. Instead of a regular payment screen that has no branding and therefore looks out of place, the new redesigned screen has your store logo at the top. This simple and effective solution ties the payment screen to your store, so the customers feel safe trusting the website with their information, especially the credit card details. 

Easy navigation between payment methods

To make it easier for customers to switch between different payment methods, we added a payment method menu. Now if one of the payment methods doesn’t work, a customer can click “back” and try another method, instead of going back to your website and starting the payment process from the beginning. The more payment methods you add through KOMOJU the smoother the navigation will be for your customers. 

Improved credit card validation

Credit card input is usually a major point of friction for customers, but since it is still the most popular payment method, we did our best to improve the user experience for your customers, so you can increase your conversion rate. 

Credit card identification

As soon as your customer starts typing the credit card number, our system will identify and indicate the credit card brand. This reassures the customer that the card brand input matches the card they are holding in their hand and allows them to correct the mistake if not. 

Client-side error validation

Customers often make mistakes when inputting credit card details, and while some mistakes like invalid credit card numbers or security codes can only be caught after the information has been sent to the server, other mistakes can be caught before that. Incorrect email input, wrong expiration date, fields left with no input will be highlighted and the error message will clearly state what error occurred.

Only after all the fields are filled in correctly will the purchase button be highlighted in blue and the customers will be able to submit the form. This will help customers to save time when inputting the information and avoid frustration. 

LINE notifications for payment instructions 

In this update, we are introducing LINE notifications support. Prior to this update, if a customer chose a bank transfer or an offline payment method such as Pay-easy or Konbini, they would have to wait to receive an email for payment instructions. Now they can log in to their LINE account and instantly get LINE notifications with the payment instructions. Their information will be saved for the next time they check out so the customers don’t need to log in every time. This makes even offline payment methods smoother and faster, increasing conversions for you. Merchants can opt out of LINE notifications in the settings. 

We hope these new improvements will make the checkout process easier for your customers and will bring you more sales. Let us know if you have any feedback or thoughts on how to make the payment screen even better by contacting us here.