Three CRO tips for your e-commerce site

Like most people, I shop online a lot! It’s extremely convenient. However, as a CRO specialist with years of experience at a prominent A/B testing Saas company, I often see e-commerce sites shooting themselves in the foot when it comes to conversions and average order value. Here are some commonly practiced design mistakes that hurt conversions.

I took one of my favorite sites, www.bodybuilding.com and redesigned some elements to optimize for conversions and average order value.

The Navigation Bar

The navigation bar of any website is EXTREMELY valuable to the user. It is a tool to help them get to navigate the site more effectively. The faster they get what they want, the higher the chances of them converting. However, navigation bars have become crowded with extraneous content and CTAs distracting users from what really matters: making a purchase.

Here is the original design of the navigation bar at BB.com:

Issues for the User: The navigation bar provides too many options, and makes it hard for the user to focus on the task at hand. Also, the banner above the navigation bar that promotes the current sale is redundant and distracting — although it is important to point out that the site has a sale, I am not convinced the navigation bar is the best place to surface this information. Based on my experience, many of the elements in the navigation bar don’t get used, read, or noticed. Would a user really just “like” BB on Facebook directly from the navigation bar? My assumption is that it has a relatively low conversion rate and the space may be better used for other purposes.

Solution: By removing non-critical content from the nav bar and making the search bar more prominent, users will be more likely to make use of the search functionality. The faster users find the product they are looking for, the sooner they can make a purchase, and the less likely they will exit the site without buying anything.

New design:

Other companies who do this:

Amazon-

Target-

Product List

Here’s the original design of the product page at www.bodybuilding.com:

Issues for the User: Essential information for target users including the nutrition facts are listed at the bottom of the page. Every bodybuilder counts calories, and this essential information needs to be available without undue searching. If users get distracted while they search for essential information they will often exit without purchase.

Additionally, the products are automatically listed from cheapest to most expensive. If customers are first exposed to the lowest price point, they will be anchored to that price point, and the more expensive items will seem overpriced. However, if the items are sorted by popularity, perceived quality, or highest to lowest, customers will have an easier time digesting a higher price point.

Solution: By using a drop-down menu, as shown below, bodybuilding.com will be able to reduce friction to purchase. Customers will no longer need to scroll all the way to the bottom of the page to order the biggest size and view the nutrition facts. Pick lists are common practice for e-commerce sites. They are easier to use and more effective for mobile use than requiring users to click on a small button to select a specific product.

Checkout Page

Original design:

Issues for the user: The page is too long, which requires the user to scroll to the bottom of the page in order to checkout. It also has a lot of clickable elements which creates more routes for our users to exit.

Original design:

Red box= What the user is giving or missing out on (pain)
Green box= What the user is receiving (pleasure)

The new design:

Solution: This page is improved by highlighting all the goods received and minimizing what they have to give up (e.g. money or missed promotions). Users associate what they are receiving from the transaction as pleasurable and what they are giving/losing as a potential barrier to purchase. Always highlight pleasure and minimize pain during the checkout.

For example, I made the photo larger and emphasized the discount multiple times. This highlights what an awesome deal the user is getting making the decision to part with their money much easier. Also, moving the net savings above the checkout button has the same effect because it is now more visible.

Additionally, I moved promo code box off to the left to minimize friction for the users who don’t have a code.

It would also be a good idea to make all ancillary elements on the page not clickable, directing users exclusively down the purchase path.

Conclusion: It is important to note that all of these ideas should be tested. What works for one site may not always work for another. However, I have seen these strategies work over and over again with large e-commerce sites.

Additionally, I’d like to thank Bobybuilding.com for their service! Their product is awesome.

Shout out to Sam Brown and Hazjier Pourkhalkhali who were on my team and are also heavily responsible for these learnings.

Feel free to share your thoughts/learnings in the comments below or contact me via my site. Happy testing you noble souls!