Uphold’s Error Messages
Assigned task: To draft error messages that give precise error explanations in an easy-to-understand way along with ways to redress the same.
Overview: While working at Uphold, I’d drafted several error messages with the objective of making them the least technical and the most human-sounding possible. I’d work towards drafting the error message in a tone mimicking day-to-day human conversation, and what the user can do to fix it. In this regard, I was tasked with decrypting technical error messages associated with linking and using debit and credit cards. I used the word ‘decrypting’ knowingly since these error messages are associated with specific codes which are in a not-so-human-sounding language, attributed to an external payment provider’s API.
My process
I worked with the concerned Product Manager to first, classify the elaborate list of codes assigned by the third-party payment provider based on the errors they covered and contextualizing them with descriptions of what the error represents.
The nature of the error would dictate the tone and wording. For example, for errors associated with suspected fraud, we were legally not at liberty to disclose much information to the user, except for directing them to Customer Support.
After classifying all error codes, we analyzed the frequency with which the users were encountering each such error category for prioritization and to determine the level of detail they required.
Guidelines
Keeping in mind that errors especially while conducting financial transactions can be especially frustrating, I laid out the following guidelines for crafting the error message:
Explain clearly what the error is.
Pinpoint where the problem lies, i.e. with the user or the provider/Bank/Uphold
Sound apologetic but strategically placed.
Offer ways to rectify the error wherever possible.
Provide links for Customer Support.
Being brief is not a priority since the user wouldn’t mind reading when trying to rectify a transaction-related error. Not providing enough or offering vague information on the other hand could contribute to more frustration.
Credit card/Debit card related error messages
There’ a cognizable difference between the error messages you’ll see below and their erstwhile versions. In the older versions, users were simply shown a ‘generalized’ error message. This was especially frustrating to the users since in most cases, they were in the process of transacting money.
The users weren’t offered any context on what exactly went wrong. Instead, by default, they were redirected to customer support, although they had as much an opportunity to redress the error themselves in sizeable situations.
Following are a few examples of error messages I drafted to help users navigate issues encountered during linking and/or transacting using credit/debit cards:
Code: 3D_Secure
Description: 3D Secure validation failed.
‘Card transaction’ error screen:
Title: Sorry, the transaction failed because we couldn’t complete 3D Secure validation for your {credit/debit} card
Body: Please try again. If the problem continues, get in touch with your bank for more information or contact our Support Team
CTA 1 copy: ‘Try again’
CTA 2 copy: ‘Maybe later’
Code: 3D_secure_not_enrolled
Description: 3D secure has not been enabled on the card.
‘Add/link card’ error screen :
Title: Your {credit/debit} card has 3D Secure disabled
Body: Get in touch with your bank to enable 3D Secure. If the problem continues, please contact our Support Team
CTA Copy: ‘Ok, got it.’
Code: insufficient_funds
Description: The card does not have enough funds
‘Card transaction’ error screen:
Title: The transaction failed because you don’t have enough funds
Body: Get in touch with your bank for more information or try again with a lesser amount. If the problem continues, please contact our Support Team
CTA1 Copy: ‘Try again’
CTA2 Copy: ‘Maybe later’
Code: card_expired
Description: The card has expired
‘Add/link card’ error screen:
Title: The transaction failed because your {credit/debit} card has expired
Body: Please add a different card and try again. For more help, contact our Support Team
CTA1 copy: ‘Try another card’
CTA2 copy: ‘Maybe later’
Code: card_volume_exceeded
Description: Transaction amount deemed too high by the bank.
‘Card transaction’ error screen:
Title: The transaction was rejected by your bank as the {{deposited/withdrawn}} amount was deemed too high
Body: Get in touch with your bank for more information or try {{depositing/withdrawing}} a lesser amount. If the problem continues, contact our Support Team
CTA1 copy: ‘Try again’
CTA2 copy: ‘Maybe later’
Code: request_data_invalid
Description: Error detected due to card details being invalid.
‘Add/link card’ error screen:
Title: The {credit/debit} card details submitted are invalid.
Body: Please check your {credit/debit} card details and try again. For more help, contact our Support Team
CTA1 copy: ‘Try again’
CTA2 copy: ‘Maybe later’