Increasing conversions by more ‘adoption’ of coupons on Checkout - Part 2
Checkout Coupon Discovery
You’re currently reading Part-2 of a two-part series. ICYMI, here’s Part-1.👇
You’re currently reading Part-2 of a two-part series. ICYMI, here’s Part-1.👇
Coupons were not much discoverable and intuitive on the checkout.
Problem statement: To increase the adoption of coupons by making them more discoverable, intuitive and usable on the checkout page, which would result in higher conversion rates.
Let’s have a look at the old flow of coupons on checkout:
Problems ⚠️
We conducted user interviews, to understand how many users could and could not use coupons, and if they were, what problems they experienced while using them in the checkout journey.
Following are the issues we concluded based on the input we got from them:
- The coupons section was not catching much attention. It needed to be highlighted more. Moreover, in the mobile view, this section was not contained inside the viewport and was discoverable only after scrolling down.
- There was not much context about the coupons/offers available shown upfront. Basically, the users were kept in dark.
- The ‘Apply’ button confused the users, making them assume that by clicking on this, a coupon would be applied directly. Whereas, a popup occurs on clicking ‘apply’ showing the list of coupons, which is not intuitive.
Our goal 🎯
➡ Increase the use of coupons by making them more discoverable and intuitive, by giving more context about all the available coupons in the first step itself.to help users decide which offer is best for them.
➡ Decrease the drop-offs / increase the conversion rate for sellers.
How did we solve it? 👀
We worked on the issues that were listed above, which automatically made the experience of the coupons discoverable and intuitive to use.
This was the final design we came up with:
➡ Made the coupons section more discoverable by adding a green icon to indicate ‘offers’ — which catches more attention.
➡ Removed the ‘Apply’ CTA and instead, we are now showing the total number of offers/coupons available.
➡ Showing the best available coupon with its discount amount— which makes it more intuitive and contextual.
Hence, based on the discount amount shown, users can make a quick decision (without having to see the list of offers) about whether to buy it or not.
In this case, it would actually motivate the users to proceed with checkout by looking at the discount amount.
➡ We decided to show the coupons on a new page instead of a bottom modal since, when there were a lot of coupons and offers, the modal sheet became scrollable which is not a good experience.
Here, we gave more context about the coupon details — by highlighting the most important information which is the discount value/amount.
➡ Also, if a coupon is not enabled, a proper context of how much should be the cart value to make the coupon enabled is given.
➡ After a coupon is applied, the user will be able to now see how much they have saved in the coupons section.
➡ To solve the problem of the ‘coupons section not being visible in the viewport’, we decided to keep the coupons section on the payment page as well. This will make sure that if a user has somehow missed it on the bag page, they will discover it on the payment page and use a coupon.
This would make sure that any user wouldn’t miss this section and is highlighted enough.
Bonus 🌟
As a part of making it more user-friendly, the best-available coupon is now auto-applied at the checkout, which means that if a coupon is eligible based on all the conditions, the user will directly see this on landing on the cart/bag page:
The outcome
After implementing these design changes, we observed a 30% increase in coupon adoption on the checkout!
Stay tuned…🔥
for more stories on how we decipher users’ needs and tackle complex problems through design.
