Select Page

Order payment

Challenge 
User feedback revealed that some users did not feel secure entering their credit card information on the website. Additionally, IT wanted to switch their systems to to Cardinal Cruise, so this was an ideal time to rethink credit card entry.

Action
Performed literature review on security solutions, revealing that a handmade lock icon is just as effective as a branded badge in facilitating user trust (Baymard). Putting the fields inside a colored box also promotes a sense of security. Redesigned the payment entry portal to make users feel more secure based on these findings. Added features like auto-spacing and auto-tabbing to create a smoother and faster credit card entry experience.

Result
Decreased payment page abandonment rate by 4.2%.

literature review

Security Fears
A Baymard article revealed that users are just as likely to trust a homemade lock icon, as they are a sponsored security badge from a security company like Norton. 

It also suggested adding a differently colored box around payment entry to create the illusion of added security for users. 

Ease-of-input
It was also important that users be able to input numbers the way that it looks on the card they are holding, which existing functionality did not support.

In order to clean up the input interaction to include auto-spacing, I needed an understanding of the different formatting standards and number logic.

design

Overall, design was pretty straight-forward. I chose a neutral gray from our color palette, and designed a simple lock icon in Sketch.

Iteration
I iterated designs by testing certain features in lower fidelity. Many of these lower fidelity tests were performed by just asking people on the corporate campus (not associated with ecomm) to enter their credit card credentials in a partially coded prototype.

To dropdown or not to drop down
There was a lot of back and forth about whether to use traditional drop downs for the expiration date or an input field. Ultimately, input field won out in a speed test.

In-line Validation
I also had to work out the intricacies of the in-line validation with IT, as well as the auto-spacing (certain parts were still not implemented as desired).

Auto-tabbing
At the last minute, I was able to slip an auto-tabbing feature into the product. It created an incredibly smooth experience and became the most commented-on feature.

Result

Post release testing showed positive results from users.

User security complaints in feedback forms dropped from approx. 7 per week to 0.

Payment page abandonment dropped by 2.7%

“Oh wow, that’s nice. I like how it just skipped to the next line for me. That makes it really easy.”

– Post-Release Test Participant

4.2%

Decrease in payment page abandonment