Decor Planet’s checkout re-design resulted in a 15.98% increase in conversion rate, a 4.44% increase in revenue per visitor and a -9.73% decrease in exit rate.

Improving the e-commerce checkout experience.

Project Background

Decor Planet’s checkout looked dated, had unnecessary form fields, and did not provide a guest checkout option. It also had a very high drop-off rate.

Role
Lead UX/UI Designer
Project Status
🚀 Launched
Date
Feb 28, 2022 - March 31, 2022
Team
Vadim Ostapchuk (Developer), Joshua Sjogren (Project Manager), Eric Hnatov (Director of Digital Product)

Decor Planet's checkout process had a couple of big, glaring issues that violated e-commerce best practices. Watching user screen recording videos, examining Google Analytics and reading up on best practices led me to pinpoint a few key areas that we needed to address. I presented these points to stakeholders and got the go-ahead to re-design the checkout process.

Insights & Solutions

Key finding #1:
👎 No Guest Checkout Option Causes User Frustration
At the start of the Decor Planet checkout process, a user is required to enter in their email address. If their email address is recognized by the system, a user must remember their account password to continue with the process. Recordings of user interactions on the website revealed that many users got frustrated because they could not remember their passwords and were forced to reset them.
Solution:
✅ Create a Guest Checkout Option
The new checkout design allows users to check out as a guest. For users that want to check out with an account, they now also have the option to reset their password if they know they can't remember it. The layout follows Baymard Research best practices by giving equal visual hierarchy to the "Account Checkout" and "Guest Checkout" options.
Key finding #2:
👎 Existence of Unnecessary Text Fields.
According to Baymard Research, minimizing the number of form fields users must consider during checkout will reduce the drop-off rate. Decor Planet's checkout had a lot of redundant and unnecessary form fields. It required some users to fill out their name twice, and had form fields like "Company Name" and "Consumer Type" displayed by default.
Solution:
✅ Minimize Text Fields as Much as Possible
The number of contact and address form fields in checkout was reduced from 8 to 5. Historical consumer data suggested that fields like "Apt/Suit" and "Company Name" were not used often, so they were nested behind a link.
Key finding #3:
👎 Users Can’t View Their Order Total and Items in Cart During Checkout
The customer's order total and cart preview were not visible during the first two steps of the checkout process. Session recordings revealed that many users would exit the checkout process to double-check what was in their cart. They often did this before entering in their payment information to make sure they were purchasing the right items and that their order total was correct.
Solution:
✅ Display User's Order Total Panel and Product Overview in a Panel
The new checkout design includes a panel on the right-hand side that provides the order total, cost breakdown, and a preview of the items in your cart during all stages of checkout.
Key finding #4:
👎 A Large User Drop Off is Happening on The Order Review Page
According to Google Analytics, the checkout order review page has a high drop-off rate.
Solution:
✅ Remove The Order Review Page
The “Order Review” step was removed from the checkout process so that the payment page became the last step with the order review information added in a panel on the right-hand side.

Final Results

Version 3 A/B Test Findings on (07/10/2022)

Final results of A/B test after making design changes

✔️ Increase in conversion rate: + 15.98%
✔️ Increase in revenue per visitor + 4.44%
✔️ Decrease in exit rate of: – 9.73%

Reflection

My Takeaways From This Project

Learnings:

The biggest lesson I learned from this project was that reducing the number of steps in a flow can have a big impact on user follow-through rates.

Things I would have done different:

The disabled "Place order" button shown during checkout distracted some users who tried clicking on it. In my next iteration of the checkout flow, I would hide this button until it becomes active.

Limitations:

A lot of buttons and text boxes in the checkout flow weren't tagged in Google Analytics. The lack of tags made it difficult to compare user behavior in the new and old checkout flows. Due to the lack of information, there were probably some pain points in the new design that were left undetected during the A/B test.

Go to Next Project

RTA Cabinet Store Product Page Re-design

Want to get in touch?

Let’s chat!
Copy email address

More

HomeAbout

Social

DribbleLinkedIn