Product Design
Payment calculator enhancement on the Kaodim App
John decided to hire an interior designer through the Kaodim app. The total cost of the service is RM2,000. He needs to pay a 50% upfront payment to the ID firm. He has a discount code for RM100. At the "Pay any amount" screen, he was not sure whether he needed to key in RM1000 or RM900. Because the pre-loaded promo discount does not appear on the same screen as the “Payment” section.
Old UI
I explored a variety of different ways to display the payment breakdown, job details, and played with colours, fonts, and positions to make the “Enter Amount” section more distinguishable, as that is the main action the customers should take on this screen.
New UI
This enhanced payment calculator feature is also released to the Kaodim Vendor app for our vendors so that they, too, can preview the payment breakdown and check job details when requesting partial or final payment from their customers.
The enhanced payment calculator feature was quickly adopted by the customers and vendors. It reduced the number of complaints from our customers greatly.
Quote from the Kaodim customer support team member — “The payment calculator helped the customers understand how to redeem the maximum discount & reduced the number of complaints.”
New UI for customer initiating partial payment
New UI for vendor requesting partial payment
I also designed a simple announcement email, highlighting the features of the enhancement for the respective teams to send out to our vendors via the Kaodim Vendor App.
Have a look at the announcement email here to preview the animation: Figma preview URL
