Coupon Codes and Checkout Woes

Adding a coupon code feature to a checkout process: how hard could it be?

Photo by rupixen.com on Unsplash

This week, I tackled a common checkout flow feature: coupon codes. After all, a free trial is one of the best ways to get a user hooked, and a coupon code is an easy way to give users free or discounted access.

I had 2 major considerations:

  1. Given that not all users will have a coupon code, how could I integrate this in a way that wasn’t distracting, but also easy to find for users who do need it
  2. Business objective: capture users’ credit card information so that they don’t experience an interruption of service when the coupon code expires.

This was my first idea — adding a coupon code field and button to the existing Payment Information page. This way, all payment-related tasks can be performed on this page.

Pros: only only page stands between the user and access to the service.

Cons: it’s not exactly a simple page, and there’s a lot going on. The coupon code field and button almost feel too prominent? What if users see the coupon code field/button and think that it’s required, that they’re missing something? Let’s see if we can declutter this page a bit.

Checkout summary, then the hard part: credit card details

Since the first idea felt a little too cluttered, I thought about separating the checkout summary and payment details. On the Summary page — a list of charges, and option to add a coupon code (and see the coupon code reflected in the payment total). Following that — credit card details. Based on checkout flows and best practice to avoid user drop off, it made sense to ask for credit card information as the last step.

Pros: Each page remains simple, with one clear action per page. Users have a chance to pause before entering payment details and review their purchase.

Cons: Adds a new page into the flow, and more taps required before checking out.

Personally, I think option 2 makes more sense — while it does add an additional screen into the flow, it allows users to see exactly what they’re getting and pause before committing to the purchase. Now, it’s up to the stakeholders and developers. Let’s see what they think!

UX Designer, eater, thinker