I recently tried to setup an auto-pay for one of my insurances.
Here’s “My Payments” screen. Under “Payment Preferences” there are two options, “Make it easy” and “I will log in and pay”.
The first option “Make it easy” has a description that says “Pay my bill automatically each time it is due”, so this is the option that I want to select in order to set up an autopay.
So I selected this option.
As soon as I selected this option by clicking the radio button, additional options appeared underneath.
After selecting my options, I clicked “CONTINUE” button.
After “Please wait…” message….., it took me to the next screen “Review your Order”.
This screen showed my billing address and credit card information in editable text input fields.
After entering and checking the information, I clicked “Finish” button.
The screen displayed a message “Payment Information Updated Your payment information has been successfully updated.” with my credit card information.
Although it looked like autopay setup was completed, I wasn’t 100% sure because the message on the screen did not say anything about autopay.
After I went to another page and came back to My Payments page, I was shocked to see that “Make it easy” option was not selected! The second option: “I will log in and pay” was still selected, as if nothing happened.
When I clicked the notification icon on the top right on a titlebar, I couldn’t get any information about whether the autopay was set successfully or not.
At this point, I don’t have any confirmation that the autopay was setup successfully or not.
I was annoyed and frustrated, because I spent a few minutes and went through the whole process to setup an autopay, only to find out at the end that it wasn’t set up.
I tried this process a few times, thinking that I might have missed something along the way. But it never worked.
So how can we design this experience better?
This is what I think it should be.
After going through the whole process, instead of “Payment information updated” which is vague, it should show a clear message that says something like: “Autopay setup completed”.
In addition, the next payment date should clearly show the exact date, such as March 1st, 2021” instead of “1st of the Month”.
2. Payment Preferences selection
Payment preferences should show that “Make it easy” is selected, with “Save changes” button disabled.
A notification message should be clear without duplications between the main text and the sub text. Instead of a vague message “Change of Payment Information Notification…”, it should say “Autopay setup completed successfully.”
A clear feedback gives a user a confidence and a peace of mind. If it doesn’t, it gives a user a very bad experience.
To make feedback clear, typically it’s better for messages to be specific rather than generic.
But lot of times, engineers tend to want to make these messages to be generic so that they can minimize the number of different messages.
This is where a UX designer needs to advocate a user, and make sure that a product user experience does not cause any confusions or frustrations to its users.
Check out YouTube version too!
Here are other articles related to feedback of a service or a product.