Best Practices of Coupons, Discounts and Promotions UI & UX

“Shoppers love deals, whether in the form of site-wide sales, select sale items, or coupons. However, for users to be successful using promotions, a website must do two things well:  it must communicate these various promotions effectively throughout the site, and it must also make it easy for users to get the deals being communicated.”
– Kim Salazar, Senior User Experience Specialist with Nielsen Norman Group

This post collects best practices and inspirations for designing the user interface and experience for promoting coupon codes and auto-applied promotions on your website or mobile platform. We will cover the whole customer journey, from promotional messages and price drops on the website through coupon and promotions validation and application at checkout, and finally, redemption. We wrote this post based on our customers’ UI & UX, the best performing in terms of revenue DTC e-commerce platforms’ UI, and various UX studies.

Note: All desktop screenshots were made on Mac, Chrome and all mobile screenshots were made using the iPhone X resolution on Chrome. 

We hope this guide will help you redesign your platform to include coupon and cart-level promotions, improve your existing customer couponing experience and monitor offer codes. For the complete guide, download the ebook below.

{{EBOOK}}

{{ENDEBOOK}}

[Webinar] Ecommerce Hacks for Promotions UX

Your promotions and loyalty programs stopped moving the needle? Have you checked their UX lately? Join experts from Divante and Voucherify who discuss the ins-and-outs of designing effective promotions and loyalty programs. From common UX fails to the best practices to avoid them. But, that's not all – explore how to test promo UX to ensure that your promotions are driving engagement and increasing loyalty. Watch now.

The basics of coupon UI & UX

We will cover some general tips here that apply to most discount coupon and promotions design, placements, and promotion. Later, we will move on to the specific coupon and cart promos placements on the website while highlighting the best design solution from the standpoint of customer experience. Remember that it's never enough to just launch a coupon campaign, you also need to take care of the coupon design, placement, validation, and redemption process to make your campaign a blazing success.

1. Clearly state the promotion time frame

You should inform the customers about the duration of the coupon or cart-level promotion to avoid dissatisfied customers who learn at the checkout that the offer is no longer valid. It also helps create a sense of urgency and slightly nudge shoppers to complete their orders. Failing to do so leads to broken user experience and customers dropping from your site.

You can do it either by mentioning the time frame (dates or hours) of the promotion or by adding a countdown timer. Best practice is to always add the promotion time frame on every banner and advertisement, not only in the terms and conditions, to ensure customers know about the promotion’s expiry date. 

UI Examples:

Pomelo Fashion is using a countdown timer to clearly display when their offers expire.

2. Automatically apply publicly available coupons to provide the best possible experience

If a discount or coupon code is offered on the site, you could simplify the redemption process by allowing users to automatically apply it to their cart by clicking on the discount code or, at least, to automatically copy it when clicking on it, so that they do not have to remember the code. This will increase the promotion usage by making it easier for the users to apply it to their carts. You can also automatically apply unique discount codes sent via various channels (email, SMS and other) if the customer clicks on the link they have received. 

Learn more: How to ensure the best coupon validation experience?

If the offer is publicly available, always carefully consider whether it could be just a cart-level auto-applied discount instead of a public coupon code. It simplifies the checkout process for customers and can lead to increased conversion rates of the promotion. 

Another good UX practice is to make the coupon code possible to copy (place it on the website or mobile app as text, not embedded in an image). 

UI Examples:

Vanity Planet automatically applies public coupon codes on eligible orders in the cart. After going to the checkout, the order total is recalculated to reflect the discount code. 

They even add a free product to the order, if the order qualifies for it, again auto-applying the discount code:

3. Offer a sales compilation page 

Collecting all publicly available cart-level promotions and discount coupons on one page is a great way to make it easier for customers to find them. This way you can display the promotions also to new or not-logged-in customers, as opposed to using only customer cockpits to show all promotions. Often companies display all promotional banners simply on the home page which may obscure different page elements and break the customer experience.

UI Examples:

Victoria's Secret presents all available offers in a clear UI on one site. Note how the information architecture on the site uses size to emphasize or de-emphasize selected offers.

4. Enable filtering in your sales category for better UX

If you offer a sales category collecting all items a certain cart promotion or discount code is applicable to, you should allow users to navigate and filter that category. Some visitors will just want to see products on sale and nothing else, so separate sales categories should allow them to view all offers, and navigate through this section with ease. Filtered navigation options should allow shoppers to sort and filter within sales sections to narrow the selection effectively. Without filters, sales shopping can be hard work and may result in customers dropping from your site.

UI Examples: 

Pomelo Fashion offers sale category filters by product type and size.

5. Offer a customer cockpit 

Displaying all cart promotions and discount codes a certain customer can access in a dedicated customer cockpit helps customers understand which promotions are available specifically to them. It also allows you to display personal, amazing discount coupons, gift cards, loyalty points balance, or other rewards, as opposed to a sales page that displays only promotions available to the public, not personalized ones. 

Learn more: How to include sales campaign in customer dashboards?

UI Examples:

H&M offers a customer cockpit, where customers can find their loyalty points balance, available promotions and discounts, unique vouchers, and a referral program.

6. List discounted items in the Sales section and in appropriate categories

Do not limit the display of sale items to a dedicated Sales section of the site. For the best discoverability, it is best to list discounted items on both the appropriate category page and in the Sales section. Some users navigate directly to Sales sections when motivated to find a bargain, but others do not specifically seek out Sales sections. Users looking for a particular item generally browse based on category. Sites that display sale items together with full-price items help users discover discounts within their area of interest.

UI Examples:

Pretty Little Thing lists sale items under sale items and product categories so that they can be found in both.

7. Communicate site-wide promotions globally to avoid bad press

If the site offers free shipping or other site-wide discounts or coupons, show these offers on each page of the site. Consistent discount reminders can help users find items in their budget as well as encourage them to buy. Again, they portray your brand as one that provides perks to buyers. By only showing site-wide promotions in selected areas, you risk that not all users will discover them. In addition, if coupons are not advertised on all pages, people may assume that they were intentionally hidden to prevent use  which ultimately reflects negatively on the brand.

Possible discount placements include:

• Promotional announcements in the hero space on the homepage.
• Banners at the top of every page with the cart promotion details or coupon code – including on the shopping-cart page or the checkout page where the coupon code should be entered.
• Promotional callouts within the product-listing page or in the right rail.
• Banners at the bottom of the page, in or near the footer.

UI Examples:

‍Pomelo Fashion communicates their site-wide coupon on home page banner, top page ribbon, and category pages.

PrettyLittleThing reminds customers of site-wide discount coupons even on product pages – a great move from the UX standpoint. 

8. Be clear about restrictions on promotions upfront

Sometimes, cart promotions or discount coupons might be subject to qualifiers or restrictions. If that is the case, ensure that the offer clearly indicates what restrictions apply. Link to more detailed information about these conditions if necessary, but do not require users to dig through the fine print to understand basic restrictions. Nothing is more frustrating than expecting to receive a deal, only to find out at checkout that you do not qualify. Keep in mind that your coupon design should not only be eye-catching, but more importantly, functional.

UI Examples:

Pretty Little Thing states straight on their main page banner that the promotion is excluding sale items and beauty items.  

Coupon and Promotions UX for home page

Types of promotions advertised on the home page

You should not advertise all promotions on the home page as customers may get overwhelmed with the number of offers (and get so-called banner blindness). Only publicly available cart promotions or coupons should be advertised there. The best UX practice is to leave the product- or category-specific discounts for category or product pages. 

UI Examples:

Happy Socks showed on their top page ribbon and home page main banner of the auto-applied 30% off summer sale that was their biggest public discount at that moment.

If there is an ongoing site-wide auto-applied or coupon promotion, instead of listing all eligible products and conditions on the home page, you could just provide a teaser that will lead to the sales page where customers can read all terms and conditions of the promotion and browse through the eligible products and offers. 

UI Examples:

Chubbies Shorts displays a promotional banner on the main page, linking to the sales collection page.

Coupon and Promotions UX for category pages

Pop-ups 

Pop-ups can be used to advertise coupon discounts and cart-level promotions available in the store but they have various UX downsides. If they are the only method of advertising a promotion, users can close them and forget the exact discount conditions or the voucher code required. Therefore, pop-ups should be used with other means of communication like banners, emails, SMS. Another issue of pop-ups is that they are intrusive. They cover the content users actually wanted to browse and can be seen as annoying. 

On the other hand, pop-ups are a great replacement or addition to emails when assigning a discount to the customer for an action they have just performed. For example, if the customer subscribed to the newsletter, you could display the discount earned on a pop-up. This way, the customer will get it easier and earlier than if they had to check their inbox. Again, pop-up and email could co-exist, to make the discount available if a customer would like to come back to it later. 

A good alternative to pop-ups on the mobile app are push notifications. 

UI Examples:

Tula uses pop-ups to communicate a cart-level promotion but the pop-up can be accessed also when the user clicks on a 15% off fixed banner. That makes it possible to come back to the promotion later. 

Coupon and Promotions UX for ribbons and footers

Similarly to the home page placement, ribbon should be reserved for public or site-wide cart or discount coupon promotions. It is a great place to add a public coupon code and make it visible across all pages, including checkout, to make the code easily accessible when users are checking their shopping cart or completing the checkout. 

UI Examples:

Chubbies Shorts uses the ribbon to advertise big publicly available cart promotions.

Footer is one of the least read places on the website. Placing discount coupons or cart-level offers there is not the best idea as the discounts will probably be missed by most of the customers. On the other hand, footer is a great place for adding promotion terms and conditions. If you do not need a separate page for T&C of the promotion as the T&C are very short, you can place them in the footer. 

UI Examples:

ThredUp uses the footer to display their cart promotions’ Terms and Conditions. 

Coupon and Promotions UX for product pages

Leave the old price tag on 

Make sure your customers know what the price was before you slashed it. People make purchasing decisions based on how much they value the deal, not how much they value the product. Whenever possible, give your customers a reference price that makes your deal look good by comparison. 

UI Examples:

Shein crosses out the old price, places the new price, and even adds a tag stating the level of the discount in percentage.

State the bundle promotions rules clearly 

For bundle discounts, make offerings easy to see and take steps on product pages to ensure that users qualify if they choose to. If the site offers a discount for the purchase of multiple items of the same product, users should be able to easily discover the offer and reach the minimum requirement.

UI Examples:

Chubbies Shorts displays the “Buy 2, get a discount” sale straight next to the product price tag on the category page. 

They also display the discount in the shopping cart. 

Coupon and Promotions UX for the shopping cart

Include coupon code fields as a core part of both the shopping cart and checkout pages

Users who have a coupon code want to enter it as soon as possible. You should provide a clear place for coupon codes in the shopping cart, before the first step in the checkout process. This UI approach enables people to check if it is valid before they enter any personal information and also allows the total to be updated appropriately early in the process.

When it comes to the coupon code placement, it’s strongly recommended to make promo codes a core part of the checkout process instead of a sidebar item. When promotions are placed in the right rail, they tend to be confused with ads and ignored due to banner blindness.

On the other hand, if your customer does not have a coupon code and they see a coupon field they may feel they are missing out on a possible deal and churn, because they will start looking for a discount. If not all your coupons are publicly available, the best solution is not to provide a visible open text field. You should rather provide a text link to expose a text field. This design is less likely to prime users and send them on a coupon quest as many shoppers will not notice it. The tradeoff, of course, is that it’s less findable for those with a promo code.

The coupon code box, whether automatically expanded or hidden under a link, should be a text field. If your coupon codes have a fixed number of characters or a certain pattern, you could also add an auto-validation that would prompt the user if they add not enough, too many or wrong type (numerical, alphabetical, special signs) characters to help them spot the error earlier. The field should be long enough to accommodate coupon codes used on the site, to ensure that users enter them correctly. The best length of coupon codes is 8-12 characters. If you offer coupon code suggestions, you could also display them on a dropdown list. 

When it comes to how you phrase the copy around offered coupons, the mental accounting marketing psychology suggests that if your products tend to fall more into the necessities category, you should tell your customers that they have “earned” coupons (imagine a pop-up message saying “Hi! You have just earned a $10 off coupon!”), because the act of earning makes it seem like a more serious source of income. In contrast, if your products are more frivolous, you should try to cast your coupons as a surprise or as having been given to them because of luck (imagine a message saying “You have just won a $10 off coupon!”). You can read more about mental accounting in our blog post.

The coupon codes themselves should be easy to remember and write in the coupon box (unless you offer them as a dropdown or a radio button to choose from). This means making the combinations mean something to the customers, avoiding similar letters and numbers like O and 0 and keeping the length under 12 characters. Read more about cognitive fluency in our blog post. 

UI Examples:

Birchbox has a very visible coupon code box in the cart view. They also offer a link to open a coupon code box in the checkout view, for those who missed it in the shopping cart view. It is a great way to keep the option to add a promo code on both steps, hiding the coupon code box on the checkout form which helps to decrease churn.  

For minimum-spend promotions, do the math for users and help them reach the spending target

Some sites offer promotions like free shipping for purchases above a certain dollar amount. These deals entice users to spend extra time and money to qualify for them.

For minimum-spend promotions, sites should tell users exactly how much more they need to spend to qualify for the offer. A great UI idea for that is counting down directly in the shopping cart how much users need to spend more to qualify for the discount, whether it is free shipping, % or dollar off discount.

If you would like to ensure customers are motivated to spend more to reach free shipping but are not limiting their shopping to reach “just enough” level of spending, putting a price ceiling and anchoring to the value required to reach free shipping, you could play with your UI to display the progress towards free shipping going faster at the beginning of the spending and slower towards reaching the order volume “goal”. This is according to the “goal velocity” idea, based on research. You can read more about it in this blog post.  

Sites could go even further, by suggesting relevant items in the shopping cart that would allow the shoppers to hit the minimum spend target and save them the effort of doing the math themselves.

UI Examples:

Tula uses the UI to show in the shopping cart how much is missing to qualify for free shipping. 

Remind users about available special offers they can qualify for in the shopping cart

The last chance to catch users’ attention and help them discover available cart-level and coupon promotions is on the cart page. There they can still easily make changes to the order, so be sure to include any special offers users can qualify for, such as free shipping or discounts. 

Offers must be clearly visible to attract users’ attention. To draw the user’s eye, use appropriate placement and visual weight.

Here are some of the best UX practices:

• For product-level offers, present messaging near the product itself.
• For site-wide offers, present the offer in a priority space directly above the option to proceed to checkout.
• If the discount applies to shipping, placement with site-wide discounts or next to a shipping total may be appropriate.
  

Do not offer too many coupons and cart-level promotions to the customers, especially at checkout. Choice overload can lead to churn. Read more about the value of variety and choice overload in our blog post. 

UI Examples:

Chubbies Shorts display all available discounts and rewards straight in the shopping cart. 

Mention any special conditions or restrictions

If the cart promotion or coupons have any special conditions or restrictions, mention it on the sales page, in your terms and conditions and in the shopping cart, before customers complete the purchase. 

UI Examples:

Shein mentions the special conditions of their promotion in the shopping cart, for example the maximum number of promotional products a customer can purchase and that sale items cannot be returned. 

Coupon and Promotions UX for the checkout page

Include a coupon code field 

As we have mentioned before, it is better to include the coupon code field on both, shopping cart page and checkout page if someone forgot to apply it on the shopping cart view page. 

Display a success message if the code is applied successfully 

Show a success message and the discount amount to confirm that the coupon code has been successfully applied. Place the message close to the coupon code field to make sure users see it and associate it with the entered coupon code. Having that message show top of the page or bottom of the page may be confusing. Make sure the success message is not the only source of information that the coupon has been successfully applied. Display the added discount in the order totals, in the shopping cart and at the checkout page, preferably specifying which coupon code has applied which discount (especially, if customers can add more than one discount code to the order). 

UI Examples:

Pretty Little Thing shows a checkmark and the amount of savings applied to the order after entering a valid code. They also display the discount amount calculated in the order totals, specifying which discount code applied the discount.

Display an error message for invalid coupon codes 

If the code is invalid or the promotion conditions are not met, you should display a relevant error message stating the type of the issue with the coupon code. Do not display the same error message in every case as it will not instruct the user what is wrong and how they can fix the issue. 

Display the error message right next to the coupon code box, not on the top or bottom of the page as the user may not notice the error message. Make sure the error message is visible, for example by using red or other contrasting color. 

Types of error messages to display: 

• Coupon code is invalid. 
• The coupon code was already used and cannot be redeemed more times. 
• The order amount is insufficient or excessive to apply the coupon (in that case, return the information on how much is missing to qualify for the coupon or how much excess there is in the shopping cart). 
• The order contents do not meet promotion terms(in that case, mention which items should be removed or added to qualify). 
• The coupon has expired. 
• Other reasons – if you can imagine other cases, craft a message specifically for them. Have one default message for all other cases that you could not have thought of. 

UI Examples:

Summer Salt displays an error message if the code entered is invalid or if the promotion conditions are not met. They encourage customers to double-check their code. Having the public coupons visible on the top ribbon helps to correct the mistake. 

Make it clear whether customer can add more than one discount coupon or combine promotions

If you allow for just one coupon to be added to the order, once a customer adds a valid coupon code, make the coupon code disappear or hide. Replace it by adding a button “change my coupon code” as customers may want to change the coupon code to another one. Remember to have an option to remove the coupon code as well. You should clearly state somewhere on the page that customers can add only one coupon code per order. 

If customers can add more coupon codes, once they have added one coupon code, you could display it as “added to the order” and let the coupon code field reload and be empty again, so that customers can apply another coupon code. 

If discount codes and cart promotions cannot be combined, you should clearly state it in the promotion advertisements, T&C and on the checkout page, especially as an error message if someone tries to add a coupon on top of already on sale items. 

UI Examples:‍

Summer Salt adds the added coupon below the coupon code field and empties the coupon code field once a coupon is applied to the order, suggesting users can apply more than one coupon per order.  

Pretty Little Thing allows customers to apply just one coupon code per order. They make the coupon field disappear after the coupon is applied to the order and replace it with a “change code” button. 

Help users find discounts for elevated customer experience

Next to the coupon code field, you should display a link to the customer cockpit where they can see all discounts available or simply a list of coupons and cart promotions to choose from. This makes it much easier for customers to use your deals and may increase their shopping cart size, if they see they could qualify for a discount if they just add some items more to their shopping cart. 

UI Examples:

Shein links to the “My coupons” page that collects available coupons next to the coupon code field at checkout and mentions publicly available coupons under the coupon code field. 

This is the customer cockpit showing the available coupons and expired coupons that is opened upon clicking on the “My coupons” link.

Reflect the received discount

Show any discounts or special restrictions applied to items in the shopping cart, both cart-level promotions and coupons. Coupon codes should be validated and reflected in the cost before requesting the payment information. Cart-level discounts should be displayed at product or order level, depending what they were applied to. It is essential that users can see savings and understand how the total is calculated. The best is to even display which coupon code and which promotion gave them which exact amount of savings in the order total.

Special restrictions on discounted items should be communicated before customers place their order.

UI Examples:

Shein displays product-level discounts on the product-level in the shopping cart summary. 

Summary

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. You should monitor promotional code. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

Get started

{{ENDCTA}}