Declined card error

Dell was showing users a “card declined” error message in checkout that users assumed meant they did not have enough money in their account to make the purchase. Users would check their bank, verify they had the funds, and then become frustrated when they couldn’t use the payment method that they wanted. However, there are multiple reasons a card can be declined; your bank may just need you to approve a larger charge or verify your activity.

How can we clarify the reason for the decline so users don’t abandon their cart?

I started with a version that informed users that Dell wanted to help them complete their purchase but couldn’t with this payment method, and recommended users contact their bank for help. However, the user researcher on the project explained that users would contact their bank to check for insufficient funds, the bank would confirm they had enough, and we’d be back to square one.

I tried to craft a version that guided the conversation with the bank and gave possibilities of why the card declined beyond just insufficient funds, but the message was too long.

Knowing that I couldn’t sacrifice clarity for conciseness, I brought the issue to the UI designer and asked for their assistance in truncating the message. We considered using a popover to house the possible reasons for the card decline, but dismissed that idea when we considered how difficult popovers were on mobile experiences.

The designer and I ended up amending an existing component from Dell’s design system: using hyperlinked text as an accordion to give users the option to view common solutions but not overwhelming them with text at first glance.

The final error message was “We could not charge your card because your bank declined this payment. Contact your bank to learn why or choose a different payment method.” The expansion label was “View common solutions.” and the expanded copy was “You may need to approve this charge, verify your activity, or resolve a different issue. Contact your bank for assistance.”