Product Design

Payment calculator enhancement on the Kaodim App

Photo of Space Simplified by Twentythree project

We received complaints from customers that they are often confused about how much they should pay a vendor when they are initiating a partial payment, specifically when there is a promo code to be applied. This redesign aims to improve the user experience of the payment calculator, to include the promo discount, and a payment breakdown for customers to enter the right amount.

ROLE 👩‍🎨

Product Design, Prototyping

timeline 🗓️

2020

Problem

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.

Photo of before vs after payment calculator

Old UI

Design

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.

Photo of before vs after payment calculator

New UI

Results

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 customer initiating partial payment

New UI for vendor requesting partial payment

New UI for vendor requesting partial payment

Feature announcement email

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

Photo of Payment Calculator EDM

Flight Interruption System re-skin

Kaodim Vendor Growth Plan