Drop-downs are almost a rule on eCommerce websites. Most sites accept them as “standard” and an inevitable part of their design. Not many dare to question their usability, even when eye tracking studies have shown that drop-downs annoy visitors.
Apparently, our eyes move faster than our mouse. So when we move the mouse, we have already decided that we want to click a particular option in the drop-down. But as our mouse reaches to click that option, it shows us a new range of options in the menu. This creates a moment of friction in visitors’ minds. And sometimes they just disappear the second the users’ mouse hover a little beyond the drop-down menu.
Still, visitors do know how to finally click the right option on the drop-down since they are annoyed like this on other sites as well.
And because of this familiarity, such annoyances do not usually make you lose sales per se, but removing them definitely increase user loyalty and customer satisfaction, which improve long-term business value of your website.
Our current case study is about one of those exceptionally interesting cases where our customer, Frictionless Commerce, explored their options to improve conversion rate for their eCommerce client, BodyEcology.com beyond these drop-downs for better usability.
About the Company
Body Ecology is a health products driven eCommerce store. Their website strives on the concept of the back-to-basics approach of their unique Body Ecology Diet, which they propagate through the associated product range that they make available on their website.
As Body Ecology follow a somewhat different concept for an eCommerce store, their product range is also quite complicated. With product categories, like Fermented Foods, Probiotic Culture Starters, Body Ecology Core Programs, and more, our customer Frictionless Commerce realized that it is difficult for visitors to choose the products they are interested in, if they have no idea about what these products are about.
Now the drop-down menu in the Control displayed only the product categories and specific product names, as you can see it in the image below:
But this drop-down didn’t seem sufficient for visitors to take action and proceed with their purchase as it contained text links only. And obviously, you wouldn’t be willing to even go to the second step if the first step of the process didn’t cater to your interest. Right?
The test hypothesis was that removing the friction at this first step of selection by replacing the drop-down in the Control with the complete product category page (which provided a brief introduction for every product category) will increase revenue for Body Ecology.
Instead of the drop-down, given below is the Variation page where the click on the “Products” option in the top navigation bar on the homepage takes visitors to the page below:
Clearly, the page needs a lot of basic design fixes, but let’s not get there. If you consider this Treatment from the “usability” perspective, this definitely makes a lot of sense.
The Treatment beat the Control with 56.43%. The test ran for a period of two weeks and this meant a total increase of $8,880 in revenue for Body Ecology. This indicates a projected annual increase of $2,30,880.
You can compare the two versions in the image below:
As you can clearly see the results below in our tool, the average revenue per conversion has increased significantly and now stands at $143.61, which is great if you compare it to the average revenue per conversion of the Control, which was $100.33.
Going against conventions is difficult but if you have a good hypothesis to support your A/B testing idea, it definitely can be very rewarding and worth checking its potential.
Having said everything above, this in no way means that you should get rid of drop-downs to increase the conversion rate of your website. It all depends on your drop-down design and how it fits in your conversion cycle.
Mega drop-downs have proven to work well in usability tests. So like every conversion tactic, there’s no absolute here. It’s all about coming up with a good hypothesis and testing it with your visitor set.
Of course, we all know that larger product images can increase conversions and that sure would have influenced visitor action to some extent in this case as well.
But apart from this, a great (but often ignored) takeaway from this test is the importance of making your offers clear to improve conversions. Make sure that your customers know exactly what you offer.
It’s not your visitors’ job to find out all that they need to make the purchase. It’s your job to guide them on your website intuitively, ease their pain points, and in the process provide them all that they need to make the purchase.
Another important point worth noting here is that while this Variation is great for new visitors who are in the “research mode,” it is taxing for repeat customers for whom adding the new page instead of the drop-down just means an additional step in their purchase process.
Frictionless Commerce is well aware of this loophole and is now preparing to come up with a follow-up test for Body Ecology, which could address the need of both visitor type, new visitors as well as repeat visitors.
Back to You!
So what are your thoughts? Do you have any suggestions for the follow-up test for Body Ecology website? I would love to hear your ideas in the comments section.