Gift cards have become a prominent topic in ecommerce, which is not surprising. They are not only wonderful for expressing appreciation and affection, but they also work well as a hair-raising purchase solution when you are running out of time to think of a thoughtful present idea.

Given their immense power, gift cards are a very effective marketing tool, thus streamlining their purchase and redemption processes makes sense. But how ought to the entry fields be made? What subpages should they be advertised on? And based on UX standards, how ought the card redemption and purchase to appear?

For the purpose of creating gift card UX and UI for websites and mobile devices, this blog article compiles best practises and design ideas. From promoting gift cards on your website through completing the transaction, giving the card to the lucky receiver, and finally using the card to make a purchase at your business, we will go over the entire customer journey.

choosing a card format

The following step in the path to purchase should be the ability to choose between digital and physical gift vouchers if you provide both types of coupons. It should be noted that this step and the ones that follow should all be provided on one page. Sending users to new pages to finish the purchase process will probably ruin their experience and make them abandon the transaction.

It should be easy to choose a delivery option. To emphasise the differences between the two alternatives, you may try utilising contrasting colours or iconography. Additionally, using clear copy is advised because the difference between “Send by email” and “Send by post” should be obvious. If the recipient of the present receives it by email but wishes to have it printed at a store, you may also give them the choice of a printable design (a PDF attached to the email). Additionally, you can include a gift QR code in the email that can be instantly scanned at the point of sale.

Both alternatives are given the same weight by the UI. The CTAs “Send by mail” and “Send by email” can be misleading, particularly for non-native English users, thus I would advise using more contrasting CTAs.

Make success and mistake announcements
Manifest a success message and the modified order total to demonstrate that the gift card code was utilised successfully. To ensure that users see the message and connect it to the entered code, place it next to the voucher area. It could be perplexing if that message appears at the top or bottom of the page. The user should receive further confirmations in addition to the success message. Both the checkout view and the shopping cart should reflect the modified order total.

By the same reasoning, a pertinent error notice identifying the kind of gift card issue should also be displayed. When an error occurs, don’t always show the same message because this leaves the user in the dark about what’s wrong and how to solve it. Here are some illustrations:

“The code for the gift card is wrong. Do it once more.”
The code for the gift card has expired.
If you distribute gift cards to specific clients, you are not the card’s owner.
“Your order does not comply with the gift card terms (if you place a cap on card redemptions).”