May 3, 2017
The Anatomy of The 'Perfect' eCommerce Site Design [Infographic]
If you are in the business of selling tangible products, you’ve probably already joined the eCommerce bandwagon.
According to eMarketer, eCommerce sales will reach nearly $2.5 trillion by 2018. Bricks and mortar store owners are increasingly joining the digital race to boost their earnings.
And why shouldn’t they?
The internet is a shopper’s paradise. From the comfort of the home and with one click, a consumer can purchase almost anything they desire, without the hassle of fighting traffic, finding parking, braving the crowds and coping with adverse weather.
So where does that place you?
In an increasingly overcrowded eCommerce world against your fellow online vendors.
To beat the curve and join the ranks of the high-flying eCommerce stores, you need to provide consumers with a well-organized and efficient online shopping experience.
The notion of a perfect eCommerce site is a myth, but you can create your own version of perfect by constantly running A/B tests and always thinking about your customers and their needs.
Great eCommerce sites have several elements in common. We break these down by looking in depth at your:
- Home Page
- Category Page
- Product Page
- Checkout Page
eCommerce Home Page Best Practices
The following elements are integral to a high converting home page:
Best practice tip #1: An ever-present search bar
A search bar is an incredibly important part of any eCommerce website. Make sure that when the consumer scrolls down to look at the bottom of the page, the search bar squeezes into the navigation bar and scrolls down with them. Visitors shouldn’t need to scroll back up the page just to search for something new.
Best practice tip #2: Value proposition front and center
Your homepage needs to have a strong hook in place to excite consumers and encourage them to shop. Add oomph to your value proposition by stating the benefits of your products in a concise way. State your USP and reflect your brand personality via this. Make sure your value proposition is clear and visible.
Best practice tip #3: Sales products tab/promotions tab
Keep existing customers and those new to your website updated with your latest promotions. You can display a tab at the top of the page with details about your latest discounts and offers. It’s also a great place to display incentives for first-time shoppers.
Best practice tip #4: A footer where customers can find info about your company
Add all your business details in the footer of your eCommerce website. Add a brief description of your company, email address or a toll-free number they can reach you on, your location, different product categories, a blog (if you have one), your social media accounts and so on.
eCommerce Category Page Best Practices
Category pages need to have the following elements to reap lucrative rewards:
Best practice tip #5: Clearly displayed products in rows
According to Barbara E. Kahn, professor of marketing and director of the Jay. H. Baker Retailing Center,
“The notion is you will take one product when goods are stacked vertically and more than one when they are stacked horizontally. Retailers have figured this out.”
This shows that products stacked horizontally in rows will sell better compared to products displayed in columns.
Best practice tip #6: Easy navigation
Having a clear navigation plan assists in usability and allows users to hop on to their desired category with ease.
Best practice tip #7: Feature banner to highlight promotions or categories
Feature banner is a vital part of a category page. It improves user experience in a number of ways – showing them that they’re on the right page, nudging them towards the next step they need to take to complete their online shopping process, and tempting them with constant promotions.
Best practice tip #8: Dedicate a section to Best Sellers and New Arrivals
New Arrivals help brand supporters to make new purchases as they keep coming back for more. Best Sellers is equally effective as it encourages new customers to make their first purchase based on your popular products.
eCommerce Product Page Best Practices
High converting product pages won’t do their job without the following elements:
Best practice tip #9: Customer Ratings and Reviews
According to Moz, 67% of consumers are influenced by online reviews. Displaying all kinds of reviews, good and bad (yes, the negative ones, too) encourage consumers to trust your brand and purchase from you. Honest reviews are always a strong basis for trust.
Best practice tip #10: Compelling product copy
Product copy is an essential part of the eCommerce world. Why? Because it needs to sell the product. It needs to speak to the consumer. Be descriptive, paint pictures, and instead of stating features, explain the benefits of the product.
Best practice tip #11: Huge, vibrant product images
Visuals trump text. A grainy, pixilated image with dull colors will paint a negative picture of your brand and not appeal to your consumer. On the other hand, a large, vibrant picture where every single detail is clearly visible will appeal more to your customers. Moreover, try to display as many angles and viewpoints of the product as possible.
“American Muscle not only has a great collection of photos for almost every product from every angle, on and off the car, but also allows customers to upload their own pictures. These customer shots are often better than the corporate shots and include angles that customers really want to see.”
Best practice tip #12: Big, bold, contrast-in-color add to cart buttons
Place CTAs in close proximity to the product. Label the CTA button Add to Cart, Buy Now, etc. Make sure they’re large and easily visible.
Up-sells, cross-sells, related products
You can boost your conversions and increase your average cart value by up-selling and cross-selling related products. Show consumers products that would complement their purchase or ones that are similar to what they’ve bought. According to a Forrester research, up-sells and cross-sells are responsible for an average of 10-30% of eCommerce revenues.
eCommerce Checkout Page Best Practices
The following elements give consumers that final push to complete a sale on the checkout page:
Best practice tip #13: Visual progress indicator
Online checkout forms can often dissuade customers from completing the shopping process. So close, yet so far. But why? Because filling out all of the painstaking details can be the most boring and manual task known to the digital world! So how do you make this painful task a little easier for your customer? Showing them their form-filling progress through a visual progress indicator lets them see the light at the end of the tunnel. It doesn’t do the job for them but at least psychologically its helping get them through it.
Best practice tip #14: Offer different payment options
Offer customers the luxury of choosing their payment options such as PayPal, Stripe, Mastercard, etc.
Best practice tip #14: Include order summary
Show your customers their order summary on the checkout page, so that they know what they’re purchasing. It keeps them from constantly wondering if they clicked on the right product, what the price was, did they choose the right color, etc. You can include the product picture, product attributes and its price.
Best practice tip #15: Easy to navigate customer service
No return policy is a sure-fire way to scare your customers. To avoid this, add support elements to your checkout page. This can include a chat feature, clear shipping and return policies, a toll-free number for them to call, etc.
Best practice tip #16: Secure checkout badges
Use a header that says ‘100% secure shopping’, or add security badges at the footer to put your customers’ lingering security questions at rest. With eCommerce business booming at such a rapid pace, it’s important to provide customers with a secure online shopping environment. Adding this graphic on the checkout page will eliminate the chances of customers backing out at the last minute due to security concerns.
Want to see the whole infographic? Feel free to share (embed code is at the bottom)
Share this Image On Your Site
This article originally appeared on Coredna blog.