Embedded Files
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)
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
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:
Manual number entry
Autofill/Autocomplete
Card Scanning with Camera - mobile only
Design and Test
Design and Test
Solution
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
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
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
Page updated
Google Sites
Report abuse