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.
[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.
What are 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.
2. Automatically apply publicly available coupons to provide the best possible experience
If a 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.
3. Offer a sales compilation page
Collecting all publicly available cart-level promotions and 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.
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.
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.
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.
