Key Takeaways
- Updating card information is the second most important account profile feature for users
- Yet testing revealed this ostensibly simple task can in fact be a high-friction experience
- Aligning with users’ mental model of “editing” their card details resolves the issue
Key Stats
- 81% of test participants reported saving credit card details in their account at sites they shop at frequently
- Yet, 75% of test sites didn’t allow a stored credit card number to be “edited”
- 8% of test sites didn’t allow any credit card details to be “edited”
Users with accounts at ecommerce sites need to update their stored credit cards for a variety of reasons.
For example, their card has expired (typically after 2–5 years), they need to replace a lost or stolen physical card, or there’s been a change in either the card type or the issuing bank.
Indeed, “Managing Credit Card” was ranked the second most important account profile feature by respondents in Baymard’s quantitative study into the most important account features.
However, during testing, participants’ attempts to edit their credit card details were not always successful due to strict technical and security regulations that prohibit sites from storing certain cardholder data in any directly retrievable or editable form.
Consequently, participants were forced to delete and re-add credit cards, unnecessarily increasing the mental and physical effort required to manage credit card details.
Users’ ability to update their credit card details efficiently is critical, as an outdated card will block most of them from completing purchases until the issue is resolved.
In this article, we’ll discuss our research findings on managing stored credit cards in customer accounts:
- Why it can be challenging for users to manage their stored credit cards
- How using a fake “editing” flow resolves the issue for users
Why It Can Be Challenging for Users to Manage Their Stored Credit Cards
“At this point, I would probably just delete and reenter it…Okay, ‘Delete’, ‘Confirm Delete’.” A participant (iOS) at Wayfair had to delete one of two stored credit cards in order to update the expiration date (first image). “So I’ll ‘Save and Continue’ — Oh, I’ve got to go through here because all my addresses — Okay, I have to be careful there.” When he re-added the card, he nearly overlooked that the billing address defaulted to the most recently added address instead of his address (second image).
“It’s pretty annoying that I can’t edit the number. It looks like I have to delete it”, remarked another participant at Wayfair when she discovered she couldn’t update a previously stored credit card (first image). She proceeded to delete the card (second image), then added the new card information.
“I guess I would have to add a new card because there’s no way to edit [the expiration date]. I find that a little bit annoying because now I have to remove the original card instead of just being able to update it”, explained a participant at Nordstrom when she discovered she could only update the billing address on a stored credit card (first image). “Then, I would remove this card…Oh, I think I might have just removed the wrong one, though. Maybe I should have removed it to begin with”, she remarked after accidentally deleting the credit card she had just added (second image).
As observed during testing, users will arrive at stored credit card interfaces for a variety of reasons.
For example, some users may proactively update their profile information after receiving a new credit card.
Meanwhile, other users may discover during checkout that their stored credit card has changed or expired.
Regardless of the exact scenario, a subgroup of users will assume that any account-management interface will allow them to edit all stored information.
After all, when editing any other stored profile information, like an address, all fields can typically be edited.
However, payment processing regulations (PCI compliance) prohibit sites from storing a user’s credit card number in any retrievable or editable form, which is also why sites display only the last four digits of the card number to identify a stored card.
This restriction limits the stored credit card data that can actually be directly edited by users (see also our Checkout article on retaining credit card info during the checkout process).
In fact, the most important pieces of data, the credit card number and security code, are impossible to truly edit due to PCI compliance regulations.
Consequently, a site’s only option, technically, is to delete the old card entirely and then add the new credit card.
“I would go to my wallet and select ‘Edit’ from here”, explained another participant (iOS) at Lowe’s, aiming to update a stored credit card number (first image). “I’d expect by selecting ‘Edit’, I’d be able to edit the number, but I think I’d have to delete and add a new card”, he remarked when he discovered that he could not edit the card number in the “Edit Payment Method” interface (second image).
Yet across multiple large-scale studies, this presumption that all user profile data would be editable resulted in confusion and frustration for a subgroup of participants who were unable to directly “edit” their stored credit card data, including the card number and expiration date (see guideline #919).
As one participant stated, “I expected within this window here to be able to directly edit the credit card number”.
Beyond the misalignment between users’ expectations and sites’ technical and security restrictions, prohibiting users from “editing” their stored credit card details places an undue burden on them to work out how to manage this stored information and then perform the task: “It looks like I would probably have to completely delete this and re-add it.”
“It looks like it’s only giving me an option to delete it, not actually update it. Okay. Let me go back — maybe I missed something.” A participant (iOS) at Wayfair wanted to update the expiration date on a saved credit card (first image). “Nope. Looks like that might be the only way. Let me see if maybe there’s a different option on this. Nope. Well, it looks like I will have to delete the debit card and then reenter it.” When she tapped to select the card, she discovered she could only delete it (second image). She spent over 2 minutes searching the “My Account” section for a method to edit the expiration date; she ultimately resorted to deleting the card and re-adding it with the updated expiration date.
“I didn’t see a way to edit the expiration, only to edit the address. I would probably add a new card, but that’s a little frustrating if it’s the same card and I can’t just change the expiration date”, complained another participant (iOS) at Nordstrom, aiming to update the expiration date on a stored credit card (first image). After confirming she could only edit the billing address (second image), she exited the form and the “My Account” section. She then circled back to “Payment Methods”, concluding she’d have to delete the card and add it back with the updated expiration date.
As observed during testing, a subgroup of users will devote a significant amount of time to working out how to edit their stored credit card details.
Indeed, some participants exited the “Payment Methods” page — and even went as far as leaving the “My Account” section of the site — before circling back and concluding that the stored credit card interface would not allow them to edit these details: “That was a little frustrating because I shouldn’t have to delete the entire card. I should be able to just edit the number.”
Moreover, removing an existing credit card and adding a new one is typically more time-consuming and click-intensive than a fake editing flow.
For example, at 83% of test sites, participants had to click once to initiate removing the existing card and again to confirm the action.
They then clicked to add a new card, reentered their payment details — sometimes including the billing address — and clicked once more to save the new information.
“It appears that I have to make it a whole new card. That’s not my favorite because I’m going into this card to make a change”, complained a participant after she discovered she couldn’t simply update the credit card number.
She exited the “edit” flow and spent 4 minutes deleting and re-adding the card, including reentering the billing address (see guideline #896).
Meanwhile, one test participant accidentally deleted the card she had just added while attempting to replace a stored credit card for which she couldn’t update the expiration date.
How a Fake “Editing” Flow Resolves the Issue for Users
“Oh, I like that there’s this ‘Edit’ function here, so we don’t have to add a new card. I like that because I don’t have to reinsert all of those details”, remarked a participant at Bloomingdale’s when she discovered she could update the number on a saved credit card (first image). When she clicked into the “Card Number” field, the masked card data disappeared, and a “Security Code” field appeared (second image). The fake “editing” flow allowed her to update all the saved credit card details without the perceived friction of having to delete the existing card and then add it back with the updated information.
“Yeah, it looks like we are able to do that without going through the whole process of adding and removing. I mean, that’s cool that we have that option to edit all the information on a card.” A participant (iOS) at J.Crew, aiming to update the number on a saved credit card, effectively overwrote the saved card during the fake “editing” flow. Despite having to type in all the new card details, the process was perceived to be more efficient and streamlined than removing the existing card and then adding a new one.
“I do like that because I think it eliminates having to delete and add a new card. I appreciate that”, remarked another participant (iOS) at J.Crew when she discovered she could update the saved credit card details. The interface provided a fake “editing” flow by combining the processes of deleting the old card and adding a new one within a single “Edit Card” task.
Users simply won’t know enough about PCI compliance and regulations, which prohibit sites from storing sensitive credit card information, to understand why it’s not possible to simply just “edit” their stored credit card details.
This misalignment between user mindset and the actual technical flow is fundamental.
Therefore, sites should “fake” an editing flow for updating stored credit card details — the credit card number and security code and, in some cases, the expiration date.
In practice, creating an illusion of editing by combining the processes of deleting the old card and adding a new credit card, and framing it as an “edit” flow (when it is actually a “fake edit”), aligns the site’s technical flow with users’ perception of managing their stored credit card details — without users having to understand the underlying technical and security processes working in the background.
Moreover, replacing the existing credit card behind the scenes streamlines the experience and reduces clicks.
As observed during testing, even when a user has to reenter the cardholder name, card number, security code, and expiration date during a fake “editing” flow, this single continuous process will be quicker and easier than deleting the existing card and inputting the new card details: “I’m sure, you know, you can do the same thing by adding a new card and removing the old card, but yeah, it just seems like this is a little bit — you can do it a little bit more quickly.”
Support Users Managing Their Payment Information
“It looks like I’m not able to change the number, which is pretty annoying. I usually don’t like it when I run into this issue because I have to delete the card and add a new one”, explained a participant at Lowe’s when she discovered she couldn’t edit the number on a stored credit card (first image). She proceeded to delete the existing card (second image), then added the new one. “If they had let me edit the number itself, that would have been less frustrating”, she remarked later.
Managing payment methods isn’t a frequent task for users, but it is the reason many users are visiting their account pages.
While it may be a low-frequency experience, users’ ability to complete the task efficiently is critical.
If the user’s credit card isn’t up-to-date, most will be blocked from completing purchases until the issue is resolved.
It’s therefore important to support users’ ability to update their payment information as efficiently as possible.
In particular, using a fake “editing” flow smooths the process significantly for users by aligning their mental model of “update my credit card information” with the site’s technical compliance requirements.
This article presents the research findings from just 1 of the 700+ UX guidelines in Baymard – get full access to learn how to create a “State of the Art” ecommerce user experience.
If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site or app.
