Entering a Promo Code

The cart or checkout pages are expected to have a promo code input.

A blank promo code/coupon box with a large Apply button can be quite confusing, making users wonder whether they should search for a code and potentially lead to lost conversions.^[1]

However, users should notice this element without extra effort when scanning a page. Displaying a noticeable link allows designers to kill two birds with one stone. Firstly, it's easy to spot. Secondly, it only expands into an input on click and doesn't distract users who don't have a code or aren't interested in promotions.

When you offer users a promo code on a website or advertisements, allow them to apply the promo with a click rather than having to enter the code manually. It'll notably reduce user efforts, as they won't need to strain their memory to remember the code if it's embedded into an image that can't be copied.

Another option is to offer a selection of available promo codes during checkout. Once they find the right deal, users can click the code and apply it automatically to the order without unnecessary worries.^[2]

Sometimes, websites can offer promo codes for certain actions such as signing up for a mailing list or making an order for a specific price total. Don't ask users to make an extra effort – automatically apply such coupon codes to the shopping cart.

You can also send users an email notifying them that they've been granted a promo code. Make sure users can copy or apply the coupon directly from the email and are redirected to a page where the code is already applied to their order.

When a user successfully applies a promo code, it's important to confirm it immediately. This can be achieved by using success state colors (such as green), an icon, or explanatory text. These visual cues will help users feel assured that their coupon is valid and that a discount will be applied to their order.

By keeping users informed throughout the process, you can enhance their confidence in your website or app, and make them more likely to complete their purchase.

There's no point in promo codes if users don't see the discount applied and the price reduced. Before users proceed with the checkout, make sure the system applied the coupons, registered the discount, and recalculated the total correctly. It's important to also show the discount near the total at checkout.

In some cases, the promo code may not be applicable. In other cases, it could have expired or have been entered incorrectly. Let users know about it by providing an explicit error message, including constructive advice on what users can do about it. If the promo code has expired, you can provide a link where users can browse through the list of other available coupons. If the promo code contains an error, suggest that users check and reapply it.

In some cases, users might not like the discount offered. They may prefer the original sale price of an item or could have found a better promo code to use. When they remove a code from the input, provide a concise message informing users about it. It will eliminate any confusion regarding whether or not the total includes any discounts.