The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

Replacing Drop-Down on an eCommerce Store Increased Revenue by 56.43%

Posted in Case Studies on June 20th, 2013

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.

Test Background

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:

Bodyecology Control

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?

Test Hypothesis

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:

Bodyecology Variation

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.

Results

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:

Bodyecology Comparison

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.

Bodyecology Test Results

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.

Smriti Chawla

Content Marketer at Visual Website Optimizer by the day, SEO enthusiast by the night. I love reiterating quotes and collecting weird people. You should follow me on Twitter.

The Complete A/B Testing Guide

Know all that you need to get started:

  • What is A/B Testing?
  • Is it compatible with SEO?
  • How to start your first A/B test?
Show Me The Guide


Tags

20 Comments
Josh
June 21, 2013

It seems then the hypothesis for a rule of thumb could be: if the customer understands the product categories, mega drop downs work.

Even so, the reason for the results from this test are confusing. Seems the customers sees the drop down and gives up? The product page existed when there was a mega drop down. The product page sells you nicely on the products within the categories.

Josh, I think it’s the images that did the trick. There’s already proof that larger product images usually lead to increased engagement and sales (http://visualwebsiteoptimizer.com/split-testing-blog/larger-product-images-increase-conversion-rate/) so am guessing in this images vs. no-images scenario, the images win.

Rishi Rawat
June 21, 2013

Hello Josh,

My name is Rishi I’m part of the team that set this test. The reason the test version won is partly because of what Siddharth said (product images) but also because test version had a description about the product. The drop-down just mentioned product name. It didn’t give new visitors a chance to read more about Body Ecology products.

Rishi

Joe Ward
June 22, 2013

Too many choices cause friction in the user experience. If you click a drop-down with the expectation that you’ll likely find what you’re looking for, but you’re met with overwhelming choices and visual stress, we lose their fleeting attention… just as the example case study suggests. Compare it to an analogy of shopping from a glossy SkyMall mail order catalog on your flight versus a black and white newspaper classifieds section. What is a more enjoyable experience? :)

Joshua Uebergang
June 22, 2013

But the control still had the products page where it had a description of the products with images. The test had the mega drop down menu removed. If you clicked on the products tab of the control group, you were still taken to the products page or the menu?

Am I miss-reading or not seeing something? :-)

Rishi Rawat
June 22, 2013

Josh said: But the control still had the products page where it had a description of the products with images. The test had the mega drop down menu removed. If you clicked on the products tab of the control group, you were still taken to the products page or the menu?
Rishi: Great observation. My theory is that in control version people didn’t click product tab. I didn’t track for this so I can only speculate.

Rishi

Rishi Rawat
June 22, 2013

I totally agree, Joe.

Rishi

Robbie Williams
June 24, 2013

Great research here. I love seeing a “no-brainer” in terms of UX testing. The idea of simplifying the navigation makes a lot of sense from a UX perspective, but I’d love to see the impact this will have when they launch it on their site in terms of SEO/Organic Search.

If they have an employee at this company dedicated to SEO, he/she is going to have a fit at this change. This eliminates top level product categories from the navigation, leaving them to exist on only 1 page. I’d assume that would negatively affect their performance in natural search.

Would love to see a follow up to this. Thanks!

Rishi Rawat
June 24, 2013

Robbie said: If they have an employee at this company dedicated to SEO, he/she is going to have a fit at this change. This eliminates top level product categories from the navigation, leaving them to exist on only 1 page. I’d assume that would negatively affect their performance in natural search
Rishi: Thanks for the comment, Robbie. I’m not an SEO expert but will share your comment with bodyecology.com. Thanks!

Rishi

Nick Eubanks
June 26, 2013

Robbie –

From an SEO perspective (IMO) this is not going to negatively effect the flow of link equity to the category and sub-category pages.

The top-level products page still has anchor text links to all of the categories, so link equity is still flowing the right direction from parent to children categories. I would even go as far to say this may actually increase keyword relevance for the top-level categories as top-level navigational (sitewide) links can actually degrade authority.

Brent Starling
July 17, 2013

Would love to see a follow up on this one. I have now noticed – unless they are testing further… that they have gone back to the Mega Menu but with the product ‘category’ lists sat underneath this.

What was this decision based upon?

Rishi Rawat
July 17, 2013

Hello Brent,

While the test concept won decisively we wanted to study it more. We examined outcome from the shopper’s perspective. We wanted to fully understand why our test concept won. We realized removing dropdown was great for new visitors who were in research mode but inconvenient for repeat buyers, who were visiting bodyecology.com to make repurchases. For those shoppers navigating via dropdown was convenient. So we tested a followup concept that had a dropdown + a prominent call to action so new visitors could go to product summary page. And this concept did even better so we permanently implemented it.

Rishi

Kacy
July 24, 2013

Why do they still have drop downs on their site now? I went to the site for the first time and they were there…

Rishi Rawat
July 24, 2013

Hello Kacy,

While the test concept won decisively we wanted to study it more. We examined outcome from the shopper’s perspective. We wanted to fully understand why our test concept won. We realized removing dropdown was great for new visitors who were in research mode but inconvenient for repeat buyers, who were visiting bodyecology.com to make repurchases. For those shoppers navigating via dropdown was convenient. So we tested a followup concept that had a dropdown + a prominent call to action so new visitors could go to product summary page. And this concept did even better so we permanently implemented it.

Rishi

Yuna
November 1, 2013

Hi,

Great article.

I think that bodyecology.com should add the product list under the images and summary of each category, on the product page. Also, add small images next to each product in the category. That would give an alternative to the drop down menu for customers. I haven’t tested this, but that is what I’d like as a customer. Please inform me of how it goes if you test this. Thanks!

Rishi Rawat
November 8, 2013

Could you elaborate on your idea, Yuna?

Rishi

Yuna
November 8, 2013

Hi Rishi,

The product page already has pictures and a summary of the category. Next, they should put the products underneath the summary, like they have it on the drop down menu. And then they should add small pictures of the product next to the products on the product page.

I think the problem with the drop down menu is it is slightly hard to click. That’s usually the case with drop down menus. You can try to click something and it will disappear.

Therefore, the product page gives customers an alternative to the drop down menu. The product page is probably easier to use for some customers.

So, maybe making the product page almost exactly like the drop down menu would be even more helpful to customers.

That’s what I think and what I would like, at least. I’ll be testing this myself, soon.

Hope this helps. :)

Rishi Rawat
November 11, 2013

Hello Yuna,

Thanks for the explanation, I get it now. I’ll notify you if we test this.

Again, thanks for the great suggestion. I’m impressed.

Rishi

Yuna
November 11, 2013

Hi Rishi,

You’re welcome. :)

Carrie
January 11, 2014

The typo in “projected annual increase” undermines the article’s credibility. So many numbers, which ones to trust??

“…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,31,514…”

Leave a comment
Required
Required - not published


+ six = 12

Notify me of followup comments via e-mail.

RSS feed for comments on this post.

I ♥ Split Testing Blog


Stay up to date

Recent Posts

Write for this blog!

We accept high quality articles related to A/B testing and online marketing. Send your proposals to contribute@wingify.com