Ecommerce Design Best Practice Series – Back to Basics – the Homepage

Ah, the Ecommerce homepage!  Surely, with as much focus as the home page gets, must retailers do this right.  I should have very little to talk about here so I will just put my feet up and relax… Uh no. Thankfully for this blog, there are still plenty of examples of how to do the home page wrong (and right).

And now the rules and who is doing it right and who is doing it wrong. 

Rule #1 – Sell products

I am sure you are reading this and thinking that it is a total idiot statement.  Of course you sell products on an ecommerce home page.  But you would be shocked at how many sites do not sell products on the home page.  They sell  the idea of their products but no actual products.  Let’s see a site that does this right and a site that does this wrong.

Thumbs up – Powell’s Books

Take a look here at Powells.com, an amazing book store in Portland, Oregon.  From their home page, you can view actual products from the site and you can add them into your cart.  

powells

Thumbs down – Magnet Street

On the other side of the coin we find MagnetStreet.com.  Did you know they brought in over 11 million in revenue last year though this site?  Not only did I not know that, I NEVER would have guessed it.  How could I guess it when they don’t actually sell a thing on their home page.  They have pictures of items that I can click elsewhere to buy but I am a minimum of three clicks away from actually getting to a product page for any product.  Perhaps if I gave MagnetStreet equal time, they would say that they need those clicks to get hone in on the customer needs but are there really no items general enough to level higher up?  I don’t buy it (and I think many site visitors won’t either which leads to bounce.)

magnetstreetcom

Rule #2 – Don’t overwhelm my eyes

The home page of a website is the equivalent to the part of a brick and mortar store just after I have walked through the door from the outside.  My eyes are adjusting from the sun and I am figuring out where to focus my eyes.  Ease me in.  Give me a focal point and a logical layout with a representative sprinkling of your products and give me a logical way to navigate your store.  But, don’t overwhelm me with imagery that will make me inhale deeply and want to hit the back button.

Thumbs up – Ace Hardware

I arrive at the site, my eyes adjust and focus and when I can see clearly, I see a site that I can visually navigate and find my way.  Nothing overwhelms my eye so I can focus on my task at hand.  ace-com

Thumbs down – Mission Living

It pains me a bit to use Mission Living as my thumbs down example because I am a customer and love their stuff but seriously, the front page is a disaster.  The target market is customers who will pay more for custom made furniture because of our love of simple beautifully finished aesthetic.  Yet, when I go to their homepage, I am accosted by the overwhelming madness of a front page with tons of design elements vying for my attention.  There is almost no white space on the page.  Instead, the entire thing is dense and graphical, including an enormous promotional spot that for good (or bad really) measure has a very color dense picture behind it.  To go back to my brick and mortar analogy, I have made it in from outside, my eyes have adjusted and I feel like I am still in very bright sun.

missionliving-com

Rule #3 – Leave your self some promotional space for sales and other messaging

Want to have a sale?  Want to promote a specific category of products this week?  Want to bring attention to some new inventory you just got in?  Well then you need promotional space on your home page.

Thumbs up – Carters.com

See the promotional header on the homepage?  That is a prominent, well placed promotional slot.  As of this writing it is for a super duper clearnance.  I am betting that some of you reading this will read it after that promotion is over and if you click through to the site you will see something else there.

carters-com

Thumb’s Down – HomeFurniture2go.com

See any way to run a promotion?  I don’t.  See anyplace they could wish you a Merry Christmas?  Me either. Dry, dry, dry.

homefurniture2go-com

Rule #4 – Make search prominent

Caveat to rule four don’t place email collection tool in a way that it might get confused with search

Google has changed the way we find products to buy.  If we know exactly what we are looking for, we aren’t going to navigate throgh a multi layer taxonimy to find it.  We are going to search.  Help your customer by prominently featuring search. This where I want to not just remind you but scream really loudly so that you never forget… PEOPLE DON’T READ WEBSITES!!!! People scan websites, they don’t read them so you need to make things not just visible but obvious. Shout the search function on your page! The caveat to this is if you want to collect email addresses as well, that is great but keep that input box far away from the search box because in scanning the screen those two boxes are very easy to confuse.

Thumbs up – PartsSelect.com

I like how the front page of Partsselect.com really features search. There is NO way you are going to miss where to search. The minor downside is that since they have search in the header it is duplicated on the page but I can live with that.

partsselectcom

Thumbs down part 1 – Tiffany.com

Want to search Tiffany.com for a specific bracelet?  Go find the search box.  Found it yet?  The reason you aren’t seeing it is that there is no search entry box. If you click “search” in the header the box appears but it isn’t there when you scan the page.  So, as you are looking for that search function you get no visual assistance.

tiffany-com

Thumbs down part 2 – Skis.com

Need to search?  Easy enough to find it.  But, as soon as you enter the information if you aren’t paying close attention you might realize that you are looking for ski wax in the email collection tool.  skis-com

Rule # 5 – Create your environment 

Your website template is your environment. When your customer arrives,  ideally you want them slip into the environment and feel a part of your brand.  You can’t always reach the ideal but at minimum, you want to create an visual experience that is conducive to the purchase of the products in your store and not a template that could be selling any product in the world.

Thumbs up – Bootbarn.com

Wow do I love this home page as an example for this rule.  I don’t love cowboy boots but if I did, this is where I would shop.  As soon as I set virtual foot on this site I feel totally in the mood of the site.  The visuals in the promotions, the background, the colors, everything leads me to think about buying cowboy boots.

bootbarn

Thumbs down – rugs-direct.com

What is being sold here?  Rugs, yes.  I do see them, but you know what?  If I removed the product pictures and left just the template you would have no idea what was sold here or anything about the brand.  I could sell electronics or shoes or gummy bears from this same template.  Come on people, show us some personality!

rugs-direct

What next?

You and I know that isn’t all?  What about social?  What about navigation?  What about imagery?  Stay tuned my friends, we will get there all in good times.  Up next (early next week) navigation.

What rules would you add for the ecommerce home page?  What back to basics items do you want me to be sure to cover in this series?  Let me know in comments.