Redesigning Your eCommerce Site?

 

New year 2013, new look, new horizons? If redesigning your site is on your roadmap this year to boost conversion and generate more sales, consider these examples from my latest review of Top 100 sites (top, because Internet Retailer, nominated them as such, as they seem to stand out in shoppers’ experience).

Yet, 100 is too many and chances are high that most might not apply to your site. Lucky you, as I selected 20 from that list and from my own recent online shopping as the nominees in the Golden Globes of eCommerce Design 2013, (if there were such an event), as the examples that can inspire your own team.

1) Best cart and checkout experiences 

Simple, sleek and easy checkout experience, goes to Bonobos.com and Speck.com. Both, carry minimal steps to complete a buy (3-step or 1-page), use auto-complete functionality and please shoppers with the clean UI.

  •    – with Bonobos, note the consistency in useful links and messaging throughout the checkout flow. Top features “Need help? Get a real person with a phone number”, while bottom – “feedback” only.  (They do the same in global navigation across home, search, product and cart pages with a free shipping message, account & help links, feedback and social (on/off)). Note, how it focuses us on 1 step a time, cleverly using tabs to display minimum info, while also showing the progress that indirectly motivates us to complete the process of checking out. 
cart page bonobos.com

cart page bonobos.com

 

 

 

 

 

 

  •  – with Speck, notice the integration of cart and checkout as the one page experience. I loved the way how, while I put my shipping info, the billing section autofills itself. I also enjoyed the non-intrusive suggestion box to create an account and an invitation to share the purchase joy on Facebook and other sites, or even make a video out of it. 
  • More importantly, when I return to the experience to buy again, all info is saved (besides the credit cart, of course) and there is even a secondary call to action button to reorder the same product again and again.
screenshot cart speck.com

speck.com cart and checkout

 

 

 

 

 

 

 

2) Best product pages 

When we are shopping for an item, product page content, functionality and design help us make the decision to buy or keep searching 50% of the time, if we think from the ballpark traffic volume for any given site. As a key page on a site, its goal is really to showcase well the product and yet not to overwhelm the potential buyer with all the qualities it has. Though, attribution to conversion by feature might vary for each site and only AB testing and site analytics can tell you the truth, yet, its key elements remain the same: well-positioned add-to-cart area, common sense recommendations with an element of surprise if needed, ratings and reviews that speak for themselves and images or videos that visually make a point.

- TigerDirect.com made its add to cart module follow the user as he scrolls down the page. So, at every point, when you are ready you know what to do.

floating add to cart on tigerdirect.com product page

floating add to cart on tigerdirect.com product page

 

 

 

 

 

 

- Rei.com has a clever design of find in store button, which likely drives equal if not higher number of orders as its electronic neighbor, add-to-cart.

clever design of find in store call to action button

clever design of find in store call to action button

 

 

 

 

 

 

 

- Underarmour.com brings shoppers attention to key page elements with a use of yellow marker? Why not! As long as it does the job.

yellow marked key messages on product page underarmour.com

yellow marked key messages on product page underarmour.com

 

 

 

 

 

 

 

 

- Firebox.com strikes us with creativity and humor in recommendations modules.  Who can resist a laugh while seeing – “WTF” message for unique products suggested or “You gonna love these“, or “James Bond would be proud of..“.It is much easier to be that creative and spunky if you are a niche site, but it would be a challenge if you are a mass merchant with dozens of categories. Yet, you still can go creative with a voice in those messages and see to what your shoppers respond most. What language charms your customers most?

creative, humorous recommendations messages firebox.com

creative, humorous recommendations messages firebox.com

 

 

 

 

 

 

- Casa.com makes its recommendations go an extra mile and become part of the add-to-cart experience, you can add the suggested items right there with the main item – going beautifully into a cart. Way to increase AOS via smart design.

add to cart imbed of recommended items casa.com

add to cart imbed of recommended items casa.com

 

 

 

 

 

 

 

 

- Amazon.com, Chacos.com, Modcloth.com use customer images well to add to the product page experience and boost its SEO. While the first two capture those within their own image area, the third embeds customer images in reviews. Better yet, the aforementioned Firebox folks also respond to customer reviews with comments, which makes you see they care about each distinct experience (way to differentiate a small site, could be not feasible for a mega site though).

email your photo prompt, chaco.com

email your photo prompt, chaco.com

 

 

 

 

 

 

customer image imbed in reviews, modcloth.com

customer image imbed in reviews, modcloth.com

 

 

 

 

 

 

 

 

respond to reviews inline, firebox.com

respond to reviews inline, firebox.com

 

 

 

 

 

 

 

 

 3) Best search pages

When search page is one of the top contributors to orders, and if backed up with a good back-end algorithm, you might want to make it hard to miss. How about making it floating and sticky? No matter how far you scroll, and especially if you have persistent scroll on, make search follow the searcher.

- Shoplet.com approaches this right from the home page. No messing around!

 

persistent, floating search, home page, shoplet.com

persistent, floating search, home page, shoplet.com

 

 

 

 

 

 

 

- Americanbridal.com combines the same strategy with promo messages, and boasts to have increased AOS by 24% within a year from $85 to $105.

persistent floating search bar with promo, americanbridal.com

persistent floating search bar with promo, americanbridal.com

 

 

 

 

 

 

 

 

- Macys.com integrates social into search experience with a floating sidebar. I am still deciding and if need a girlfriends’ feedback, there is a fast way to do so.

floating social shopping bar, macys.com

floating social shopping bar, macys.com

 

 

 

 

 

 

 

- Brookbrothers.com is smart to capture preferences discovered by shoppers via search with a “remember this” button. That is a much more scalable approach to collecting customer intelligence for personalization vs. relying on item pages interaction only to weigh in.

"remember this" - button on search, brookbrothers.com

“remember this” – button on search, brookbrothers.com

 

 

 

 

 

 

- Fab.com shines with signaling number of items left in stock in search results already vs. item page as we are used to, to prompt making a choice.

"x" items left icon on search, fab.com

“x” items left icon on search, fab.com

 

 

 

 

 

 

 

4) Best home pages

There is no place like home page that makes it or breaks for new business impressions or re-delighting return visitors. This is the place that gives each of us (hopefully with good targeting), what we want and becomes the reason why we come back…ideally!

- Cuttingedgeknives.co.uk steals this nomination by simply telling a new shopper what it is all about with vivid imagery, and yet ready to be explored as a potential buy if you like, right there without directing to a product page. You can hoover over the main POV and see item details for each peace in the spotlight.

item info on hoover, home page, cuttingknives.com

item info on hoover, home page, cuttingknives.com

 

 

 

 

 

 

- Casa.com welcomes home, no pun intended, with an inspirational discovery and promo within an interactive POV.

inspiring, interactive discovery POV, home page, casa.com

inspiring, interactive discovery POV, home page, casa.com

 

 

 

 

 

 

- CVS.com wows with clean tabbed display of key information, playing up the rule of 4 things at a time. It does so well that clearly there is no reason for a left navigation – a “design element” from the past.

no left nav, tabs of 4, home page, cvs.com

no left nav, tabs of 4, home page, cvs.com

 

 

 

 

 

 

 

- Google play makes it tidy with icon segmented personalization modules, delivering similar peace and clarity when we shop in color coded retail stores for clothes – nothing is overwhelming then!

icon segmented home page, google play

icon segmented home page, google play

 

 

 

 

 

 

 

- Booksamillion.com achieves similar compactness within a home page slider, using tabs.

tabs in home page slider POV, booksamillion.com

tabs in home page slider POV, booksamillion.com

 

 

 

 

 

 

All in all, these are the sites that peaked my interest in page experience design. Hope you get inspired too and wow more shoppers on the way to buy.

View all screenshots and experiences in larger size and as one page.