Credit Card Ease of Use

While we offer a myriad of express payment methods, including PayPal & ApplePay, over 70% of St. Jude donors choose to give with a Credit Card.

From donor surveys, usability testing, and conversations with our call specialists, I learned that entering Credit Card data was not easy.

The Problem(s)

What made people abandon at the Credit Card fields or encounter errors in data entry unnecessarily?

Credit card number

  • Full form width text field – for a fixed size of the field should help the user understand when they

  • Numbers are not chunked – This was the biggest issue with the form. Lack of autoformatting made it difficult to see if you had entered the correct number.

  • Only place to see card type entered is in payment method option selection. Not visible on mobile.


CVV

  • Full form width text field.

  • Question mark icon opens a modal with a very long detailed explanation of what this field is.

  • Label is "CVV"


Expiration Date

  • Two dropdowns, one for month, another for the year – this makes it especially difficult to enter on a mobile device.

  • Form defaults to current month and year, which is hardly ever the correct entry.

Not an issue for everyone

I want to acknowledge, that not all donors who used their credit card, ran into the issues above. And many people successfully gave despite the difficulty.

There are several main ways to enter your card data:

  1. Manual number entry

  2. Autofill/Autocomplete

  3. Card Scanning with Camera - mobile only

Design and Test


Solution

See it live for yourself by visiting: stjude.org/donate

And why not make a little donation while you're at it ;)

What changed:

  • Card number digits are chunked

  • Expiration date is before Security code

  • Expiration date is no longer two dropdowns, but two number inputs

  • Expiration date is no longer defaulted to current date and year

  • After completing each field, focus is auto-advanced to next field.

  • Field labels are updated: "Credit / debit card number" "MM/YY" and "Security Code"

  • Front-end error messages are updated.

My Role

  • I did all of the discovery work, competitive analysis, research on why other

  • I got feedback from my fellow product UX designers at ALSAC.

  • I created the mobile and desktop prototypes in Axure for purposes of testing time on task.

  • I co-led the usability testing analysis with my fellow UX researcher/content strategist.

  • I documented all of the changes for the development team to reference and create JIRA tickets. This documentation included the reasoning for each change as implementation occurred while I was on maternity leave.

  • I set up A/B testing after the release to compare the changes with the previous version.

Impact

A/B Testing

Ran for 17 days

Over 25k visitors to each experience.

3.75% lift in conversion rate, our primary success metric.

95% confidence

Usability Testing

Showed a reduction in time on task by 9 seconds