Homepage > Journal > Designing form fields of Gift cards and Vouchers

Designing form fields of Gift cards and Vouchers

How you like that:

Gift cards, gift certificates (digital gift cards), and Vouchers have become popular in ecommerce. It's not a surprise. They solve many problems and are convenient.

It's also easy to deliver them to end users (they're usually offered in a bearer formula).

They can be offered online or in-store. The digital gift cards or voucher numbers can be sent electronically and provided through email or on a separate dedicated page in the customer's panel. Physical gift cards can also be encountered in stationary stores.

Gift cards and vouchers are immensely helpful sales tools that not only allow customers to buy "personalized" gifts but, in the case of some online stores, can also provide them with store credit in case of a return.

How to design gift card and voucher form fields? On which subpages, at which stage of the purchasing process is it the best to offer them?

What experiences should be avoided, and which purchasing decisions should be supported? What should the ecommerce path to purchase look like in this aspect?

Today we will discuss these issues. We invite you to read the article.

We audit and create paths to purchase.

The most important benefits of selling Gift cards and Vouchers or how to increase sales in ecommerce

Gift cards and vouchers are becoming increasingly popular in ecommerce.

It shouldn't surprise you just as you are no longer surprised by the widespread use of business cards, which serve a similar purpose with all proportions and differences.

Namely, they allow people to establish relationships and express interest in an elegant, tactful, and charming manner.

Gift cards in ecommerce
Gift cards can be bought as well in stationary stores.

Gift cards and vouchers also serve to make life easier for their users. They allow them to show a variety of emotions seamlessly.

Gift cards and vouchers support sustaining relationships and enable you to show interest, appreciation, respect, and recognition, simultaneously relieving the need to resolve purchasing dilemmas.

Anyone who had to buy a gift for a loved one or someone with whom they're professionally associated knows perfectly well how thankless this task is. Gift cards and vouchers effectively solve the problem of bad gifts.

At the same time, they are discreet, tactful, and inconspicuous. They aren't intimidating and work well both as private or business gifts.

From the perspective of the online store owner, online gift cards and vouchers are equally helpful.

A gift card program allows online stores to:

  • Acquire new customers
  • Increase the customer loyalty
  • Evoke or stimulate the need to buy (e.g., by offering free gift cards)
  • Increase the sales volume; primarily, this refers to gift card sales during the busy buying periods (holiday season or during special events).

While using the potential of gift cards and vouchers in ecommerce, it's worthwhile to remember a remark made by Amelie Wong in the article "The UX Of Gifting And Returns."

Its author very astutely observes that buying, giving, and gifting is an emotional journey whose constant elements include uncertainty, dilemmas, risks, and the need to perform time-consuming market research.

Vouchers in an online store
Allegro's gift card.

And as you can guess, these are the problems people like avoiding and getting rid of.

Gift cards and vouchers lower these risks and eliminate dilemmas; they simplify the gifting problem.

More importantly, they let you avoid a situation in which a bad gift that doesn't meet expectations in some way can't be returned or exchanged for another because that's inappropriate.

With the use of gift cards and vouchers, this problem ceases to matter for online store customers.

Here are some tools that can help you set up gift cards:

  • Shopify
  • Wix eCommerce
  • Amazon gift card API
  • Square Gift Cards.

How to promote your Gift cards and Vouchers?

Now you know what benefits the use of gift cards and vouchers can bring to your online business. The question is how to let your customers know that you offer them. There are some places along the path to purchases that you can use to promote them.

The article "What are eCommerce Gift Cards and how to use them" on WIX eCommerce has some suggestions regarding this matter.

Namely, they suggest the following touchpoints:

Throughout the ecommerce site

Once you create a product page for your gift card or vouchers, you should place links leading to them across the online store. You can leave them in the spots such as banners, category and index page headers, or listings in on-site search results.

In the cart and checkout

Leaving a nice reminder for customers on the checkout and shopping cart page about the availability of gift cards allows your customers to not forget about them, and at the same time, you provide them with a quick way to reach them.

In email marketing

Putting information about gift cards and vouchers in promotional emails can help you highlight the benefits that they can bring to shoppers and, yet again, allows customers to reach them seamlessly.

On social media

When you launch, for example, a marketing campaign on social media for a seasonal event, you can include in it information about gift cards and vouchers and thus maximize your marketing efforts and encourage customers to use them.

Remember that gift cards and vouchers solve many problems regarding purchasing gifts.

You can find a broader discussion of these issues in the article of researchers from the Baymard Institute, "5 Ways to Provide a Superior Gifting UI and Flow".

For now, we will just note that its authors point out, among other things, problems associated with the following:

  • Packaging of products intended for gifts
  • Their sending and returning
  • The need to divide the order into a couple of individual ones because of different product statuses and different delivery addresses
  • Removing information about the price
  • Personalizing the package through, for example, a message attached to the product.

From the perspective of the store's operation, logistics, and ecommerce customers' experiences, gift cards and vouchers are less problematic than providing the ability to buy a product as a present.

Gift card form in an online store
Forms for gift cards and vouchers should enable their validation.

Buying gifts involves costs, risks, barriers, and dilemmas, and people who buy someone a gift don't like it and definitely would like to eliminate these factors.

Also, it's worth mentioning that the gifts at least potentially represent trouble to some extent for the recipients. In particular when they're bad because then they are a source of awkward situations.

Gift cards and vouchers simplify this process and, to a large extent, combat disappointment and uncomfortable situations.

Even more importantly, and this is pointed out by Jakob Nielsen from Nielsen Norman Group himself, gift cards and vouchers usually make the recipients almost immediately visit the online store in question.

They make purchases in them and spend more money than the indicated value of the card they received.

As a side note, we would like to add that you can find more interesting notes and recommendations from Jakob Nielsen regarding the relationship between wishlists and, gift cards, vouchers in his article "Wishlists, Gift Certificates, and Gift Giving in E-Commerce." We definitely recommend you read it.

How to design input fields for Gift cards and Vouchers?

From the above findings, you may get the impression that the process of buying a product with a traditional or digital gift card or voucher is entirely seamless. Naturally, it's not the case.

Designers and ecommerce business owners still have to consider the usability of offering such options and ensure a positive user experience in the online store which appears when customers can place an order with the help of gift cards or vouchers.

Gift card - mediaexpert
MediaExpert offers customers the ability to personalize the Gift card.

While designing these kinds of solutions and functionalities, a pretty obvious but easy-to-remember remark made by Kim Salazar in the article "Applying Discounts and Promotions on Ecommerce Websites" is worth keeping in mind.

The usefulness of gift cards and vouchers is proportional to the ease of their use in the online store.

Kim Salazar, a researcher and author affiliated with the renowned research company Nielsen Norman Group, writes: "If a discount or coupon code is offered on the site, allow users to automatically apply it by clicking on it."

It's worth taking her design recommendation very seriously because, according to research conducted by her parent company, ecommerce customers often have problems using gift cards and vouchers.

And these problems result in amplified negative impressions and experiences. They're a source of disappointment and frustration for the recipient and the gifter if the latter finds out about the issues encountered in the online store by the person to which they gave the card.

Designing gift cards in an online store
Monexia.com offers the option to buy Gift Cards for various online stores.

From the user experience perspective, this situation is very unfavorable and may cause negative consequences.

That can be seen in the sales volume, customer retention of the online store, and its image and reputation. And in the decline of positive ratings and opinions in rating systems.

How to offer the use of Gift cards and vouchers?

Kim Salazar doesn't only draw attention to the problem but also suggests its solution. A best practice is to avoid a situation where the customer must remember the card number or can't easily copy it (e.g., from the email).

It's simpler, more effective, and more convenient to offer the entering of the card number in any part of the site. In particular, however, the gift card and voucher input fields should be located on the home and product pages and repeated on the shopping cart and order summary pages.

Gift cards and vouchers - H&M
With PrezentIdealny.pl, you can purchase gift cards for most of Poland's largest online stores.

You should also remember to offer digital gift cards (or traditional ones) and vouchers immediately and with minimal requirements (e.g., related to a subscription to a newsletter or registration in the online store).

You also can't forget that the online store user has a strong need to redeem the voucher or use the gift card, and they want to do it at the very beginning of the purchasing process before they start to look for specific products.

Sales in online stores are based on similar mechanism and need.

Hence, the field for entering card numbers and vouchers should be:

  • Appropriately exposed in the structure of the site
  • Long enough so that it fits the whole number, which can be entered through copy/paste function or manually
  • Equipped with a validation function (to check the expiration date of the card and the amount available on it or the voucher)
  • Offered as a form field because this solution is much more readable than a text link.

You should avoid situations of conditional redemption of gift cards and vouchers, for example, related to placing an order with a minimal amount.

If these solutions are implemented for various reasons, they should be very specific, unambiguous, and clearly communicated.

The most crucial problems with the usability of Gift cards and Vouchers in ecommerce

According to researchers from NN Group, purchases made with gift cards and vouchers further expose the need to provide a positive user experience.

Regarding, above all, readable, specific, and publicly available information about delivery costs and the total cost of the product.

Gift cards and vouchers in ecommerce - Sephora
Sephora offers an advanced option to personalize the gift card. Customers, among other things, have the ability to attach a video file.

Gift cards and vouchers have a specific amount on them, which simultaneously is a significant limitation and incentive for the online store customer.

The customer, while making a purchase in particular, pays attention to costs. They configure the purchase of products with greater than usual meticulousness.

The available budget is a limit, and at the same time, it is an incentive to make purchases that far exceed it.

It comes from the concern that the difference in the nominal gift card value or voucher and the order amount may be lost or too low to buy another product which should fulfill not only the need for profit but also an existential or emotional need.

Considering the above remark, you should offer the ability to redeem the gift card or voucher at the earliest possible stage of the purchasing process, definitely earlier than during the finalization and payment for the order.

In line with the findings of researchers from Nielsen Norman Group, ecommerce customers feel immense discomfort if they can't find the field for redeeming the gift card or voucher.

Particularly when the gift card form is not available in a seamless way.

Such a situation results in very negative reactions. Users are distracted, which often causes many errors.

Users with gift cards and vouchers often actively look for fields on the website that will enable them to redeem them.

Their appearance, shape, and size strongly relate to the appearance, shape, and size of fields used to make payments.

Thus a best practice and design recommendation are to unambiguously distinguish the redemption field of gift cards and vouchers from the payment field. Their close vicinity and similarity can be a source of errors and frustrations.

The order of availability of fields is significant and influences user experience. That's why the fields for redeeming cards, as we've mentioned, should be accessible on every subpage of the online store.

From the perspective of online store customers, it is information about the availability of such an option. Its presence calms customers, which is really important because having a gift card or voucher that can't be redeemed undermines the credibility and trust in the store.

It can also be the reason for abandoning the store with a sense of disappointment and being cheated.

The general availability of redemption fields for gift cards and vouchers also comes from diverse sources of site traffic. Often the customer journey and path to purchase don't start on the store's home page but on, for example, the category page or the product (service) page.

A crucial design mistake is requiring customers of the online store to provide credit card information despite entering and redeeming the gift card or voucher and despite the lower amount of the order than the nominal value of the card or voucher.

Remember that credit card data is sensitive and reluctantly shared by ecommerce customers.

In the case of payment with a gift card or voucher, the store shouldn't require the customers to enter their credit card data additionally.

Holiday gift cards in an online store
Various variants of gift cards depending on an event or holiday at Zalando.pl

It's essential to provide information about the balance of the gift card or voucher after making a purchase with them and about an expiration date and ability to make further purchases.

That said, ensuring the card number is unambiguous is also vital. In particular, this applies to upper and lower case letters and the distinction between the letter O and the number 0.

A best practice is to avoid using the letter O and the number 0, especially since, on different devices, they may not be sufficiently distinctive and distinguishable.

Designing Gift cards and Vouchers in an online store. Summary

  1. Gifting is an emotional journey characterized by uncertainty and rich in dilemmas and risks.
  2. You should sell digital gift cards and vouchers in your online store because it enables customers to seamlessly show emotions, build and maintain relationships, and show gratitude and interest.
  3. They're helpful both for individual customers and businesses.
  4. Gift cards and vouchers effectively solve the problem of bad gifts and relieve the need to resolve thankless purchasing dilemmas.
  5. In ecommerce, they are helpful because of their capability to acquire and retain customers and stimulate purchases.
  6. From the perspective of ecommerce customers, the helpfulness of gift cards and vouchers is proportional to the ease of their use.
  7. That's why you should offer fields for entering gift card and voucher numbers on the home page and product card and repeat them on the shopping cart and order summary pages.
  8. The field for entering the numbers of gift cards and vouchers should be available on the form, and it should be adequately exposed, long enough, and equipped with a validation function.
  9. Purchases made with gift cards and vouchers strengthen the need to ensure a positive user experience.
  10. The available budget on cards and vouchers simultaneously limits and encourages customers to make purchases that exceed it.
  11. Online stores should offer to redeem gift cards and vouchers at the earliest stage of the purchasing process.
  12. The best practice and design recommendation are to unambiguously distinguish the redemption field of gift cards and vouchers from the payment field.
  13. A significant design mistake is to require customers to provide their credit card number despite entering and redeeming the gift card or voucher in the online store.
  14. Online store owners should provide their customers with a convenient format of gift cards or vouchers that doesn't raise unnecessary interpretive dilemmas.
How you like that:
Journal / Redaktor
Author: Radek
UX Writer and researcher by education + experience. Collects The Story's knowledge and shares it on the Journal.
Reviewer: Dymitr Romanowski

Are you interested in working with us? Take a look at our Portfolio