Clean Program had the hard part figured out. Their website was inspiring 125,000 monthly visitors to take a positive step toward improving their health by trying a cleanse. The trouble was, 4 out of 10 customers were tripping up in the checkout process. We believed in their product and we knew they could do better. So we created Awesome Checkout, a shopping experience with more engaging cues and intuitive designs that streamlined people through checkouts. By the time we were done, 76% of customers that started a checkout finished it. Here’s how we did it.
Our relationship with CLEAN went back three years. So when they
saw money being left on the table, they asked us to take a look
at the drop-off rates and figure out what was going on. We analyzed
their sales funnel using Kissmetrics and Jirafe and found encouraging
news. Tons of visitors were adding products to their cart and making it
all the way to checkout. Getting them to complete the purchase was a different story.
A ton of users were abandoning at the the final step.
Why exactly were these customers not completing their checkout?
Customers were losing their way in the checkout process. Leveraging some of Digital Telepathy’s design insights, we restructured the cookie-cutter Magento interface into a 3-tabbed layout so customers could see where they were in the checkout process and how many more steps they had to go. Each step was broken down by action. Previously, the biggest location of cart abandonment was between entering a shipping address and selecting a shipping method. We combined those two steps into one, since they’re really part of the same action. Pretty soon, things began to move more smoothly.
Instead of settling for a flat interface that just took down information, we designed an experience that interacted with customers and felt more alive. When fields were correctly filled, we added animations, encouragement copy, and fading checkmarks to reinforce that action. We also gave CLEAN the ability to customize the form’s help text so that they could speak directly to consumers and guide them through the experience in a way that fit the CLEAN brand. By getting these small details right, we converted checkout from a boring formality to an engaging and intuitive experience.
All along the way, we questioned everything. Even the 3-tab design we used initially. Based on research and split-testing data, we found the tabs were more effective when they were placed vertically with the forms on the right, rather than when the tabs were arranged horizontally and the forms were placed below them. Though this alignment was a bit different from what most e-commerce customers were used to seeing, it worked better, and that was all that mattered to us. With that one simple change, conversion rates improved by a small but noticeable margin.
A streamlined checkout wasn’t enough. The entire interface had to be on brand, from shopping down to checkout. So as a final step, we created a checkout that matched the rest of the e-commerce experience. We restyled everything. Sure enough, conversions went up again. Back in October, CLEAN had started with a 60% conversion rate. By the time we were through, they were up to 76%.
What started as a mission to solve Clean Program’s checkout hurdles has grown into Awesome Checkout -- a Magento extension available to anyone. We’re constantly testing and iterating, and it’s only getting better. You’re losing too many potential conversions for no good reason. Abandonment sucks. Be awesomer. Give Awesome Checkout a whirl now.
Sell more stuff. Ask fewer questions. 'Nuff said.
How much does your Magento
store make per day?
got the 10% increaseRead the case study