Click me

The Anatomy of a Perfect eCommerce Store

THE ANATOMY of a Perfect eCommerce Store Categories, Products & Checkouts Getting the core conversion points of an eCommerce store right can significantly boost revenues and helps to turn shoppers into buyers. With the average eCommerce conversion rate being just 1.4%, marketers must ask themselves whether their categories, product pages and checkout are right or whether design and structure changes could see a poor conversion rate improved, especially if benchmark stats fall below the average. The perfect eCommerce store should combine: Functionality » Usability » Design » Trust & Security What then, do the perfect categories, product pages and checkouts look like? The Perfect Category Page To move shoppers along the buying cycle towards product pages via subcategories. PURPOSE Consumers spend 80% of time on a page viewing content above the fold and 69% of time viewing the left-hand side. RETAILER LOGO SEARCH BAR MINI CART MAIN CAT MAIN CAT MAIN CAT MAIN CAT MAIN CAT MAIN CAT SERVICE BAR CATEGORY TITLE HOME » MAIN CATEGORY FEATURE BANNER SUB CATEGORY SUB CATEGORY SUB CATEGORY SUB CATEGORY FEATURED FEATURED FEATURED 6. PRODUCTS PRODUCTS PRODUCTS Customer Category Title Feature Banner Left Hand Service Bar Navigation WHAT » Navigation tree of main categories and subcategories. WHAT » Sits below main navigation and reinforces core WHAT » A clear title element in the top left WHAT » Simple, high quality feature image which represents the corner. customer service points category. WHY » Offer a simple and effective category (delivery / support etc). WHY » Provides WHY » Helps to build emotional attachment validation to a WHY » Reinforces key messages, builds trust and credibility. consumer that they are on the right category. navigation in the optimal screen space. to product ranges. 5 Copy Subcategory Section Featured Products WHAT » Visual subcategory tiles to aid navigation towards the product pages. WHAT » Concise, easy to read copy to introduce a category. WHAT » Introduce a small number of 'best selling' products at the category level. WHY » Helps with WHY » Using subcategories offers easy categorisation alongside a visual navigation. WHY » Many SEO as well as offers consumers are further validation to interested in products purchased by others. consumers. Goesigunps Neil Patel » QuickSprout Bryan Adams » Ph. Creative / Getting Goosebumps >> "Always remember that people are buying your product without actually seeing it in person. The more thorough you can be (without being overwhelming) on details the better chance you have of a conversion." "The no.I priority is to understand your audience sufficiently to enable you to design specific user journey's for each persona. If you can optimise the user experience and make it as personalised as possible, you'll get the best returns." The Perfect Product Page To focus attention on a specific product and encourage a purchase decision. The product page must help motivate buyers through answering the simple question of 'what's in it for me?" (WIIFM?). Here, a brand must display the right messages in the right form to answer this question. PURPOSE RETAILER LOGO SEARCH BAR MINI CART MAIN CAT MAIN CAT MAIN CAT MAIN CAT MAIN CAT MAIN CAT HOME » MAIN CATEGORY » SUB CATEGORY PRODUCT TITLE (2 £00.00 RRP SKU *** REVIEWS 8 (7) FREE DELIVERY 9. MAIN PRODUCT IMAGES DROP DOWN DROP DOWN (3) 10 QUANTITY 0 ADD TO CART 4 (MIN STOCK 12 13 14 Section One Product validation experience. Top left of page. (2 Bread Crumbs Product Title Main Product Social Share Buttons Images WHAT » A necessary usability element to aid navigation back to subcategory and category level. WHAT » Clear, large product title at the top left of the product page, above the main image. WHAT » High quality, large main product image with complimentary images to showcase the product. WHAT Social share buttons close to product images, away from the buying area. WHY » Studies show WHY » Up to 20% of customers engage after purchase to express their affinity for a brand or product. WHY » With a general that consumers eyes WHY » A picture says a move from left to right from the top left, thus placing here for easy validation. thousand words. best practice to remove distractions, including a left hand menu, bread Consumers no longer want to browse a website, they want to experience it. crumbs assist with usability. Section Two Core product details & buying area. Top right of page. 6. Product SKU Short Product Customer Reviews Pricing Description WHAT » RRP, sale price WHAT » Star ratings WHAT » The simple display of the SKU close to the top of the page. WHAT » Concise product messaging answering 'what's in it for me?" questions. with a link to view full and savings. Use percentage savings where possible. product reviews below. WHY » An estimated 61% read reviews and WHY » Assists WHY» Studies have shown the power of percentage savings as a motivation to purchase. WHY » Aids the decision making process and allows a quick consumers in the research / purchase 63% are more likely to process. purchase after reading overview to be one. digested. 10 12 Product Variables Product Delivery Information Add To Cart Button Availability WHAT » A brief, bold statement about delivery e.g. FREE deliver on WHAT » Drop down or box selections for sizes, colours and other WHAT » A simple availability message e.g. "In stock & ready to ship'. WHAT » Large, obviously clickable 'add to cart' button in a contrasting colour to your site. orders over £50. variables on the product. WHY» Helps to WHY » Helps to build confidence to proceed WHY » Keep product variations as a single variable product for clutter-free categories. WHY » Helps to draw the eye to the main desired action; adding reduce cart abandonment by displaying delivery costs at an early stage. further down the buying cycle. to cart. Section Three Section Four Details in-depth product information. Left hand side, below section one. Cross-sell and up-sell other products. Right hand side, below section two. 13 14 Product Information Cross & Up-Sells WHAT » Detailed product description, reviews, returns policy, delivery information and sizing details. WHAT » Offer cross and up-sells below the main 'buying area' on the page. WHY » Offer consumers in-depth details on a product whilst keeping this below core information and calls to action at an early stage. WHY » Displaying cross-sells and up-sells can assist in the main product purchase or increase order values. John Rampton » #3 in Entrepreneur Magazine's Top 50 Online Influencers' Matthew Barby » HubSpot "The most important aspect is user experience. You can generate thousands of visitors but if they're not receiving a positive user experience then your conversion rates are going to be very low." "Your checkout process needs to be clean, simple and very easy to navigate. Make sure you have trust symbols as those help the process." The Perfect Checkout To capture payment and shipping details quickly and efficiently. 68% of all ecommerce shoppers abandon their shopping cart. PURPOSE Login/Registration Registration, Login AND Guest Checkout SIGN IN SIGN UP CHECKOUT AS GUEST WHAT » Offer both a client login (with registration) and guest checkout to give consumers options. EMAIL EMAIL EMAIL WHY » Not all PASSWORD PASSWORD shoppers want to sign up for an account... so don't make them if this PASSWORD CONFIRM is their preference! SIGN IN SIGN UP CONTINUE The Cart (2) 4. SHOPPING CART ORDER QTY ITEM TOTAL SUMMARY PRODUCTTITLE £00.00 £00.00 SKU EDIT REMOVE SUBTOTAL E00.00 DELIVERY £00.00 PRODUCTTITLE £00.00 £00.00 TOTAL £00.00 SKU EDIT REMOVE CHECKOUT 3. 4. (5 Cart Review Product Order Proceed To Thumbnails Summary Checkout Button WHAT » Large 'proceed to checkout' button in a WHAT » Allow shoppers to review their cart (and make changes) before proceeding to WHAT » Include a WHAT » Summarise thumbnail image of each product at the cart the order subtotal, taxes, delivery and total prices. contrasting colour to the rest of the page. stage. the checkout. WHY » Offering an easy visualisation makes it easy for consumers to review their carts. WHY » By eliminating any 'surprise costs' at the final stage, cart drop-offs are likely to WHY » Making the primary call to action stand out helps to encourage clicks to the checkout. WHY » Consumers often make last-minute changes and offering an easy cart review (alongside quantity and item removal options) helps to improve purchase completion. decrease. The Checkout 6. Delivery Options A 8. PAYMENT WHAT » Give multiple delivery options alongside estimated delivery timeframes with the cheapest as default. SHIPPING OPTIONS O SAME DAY O NEXT DAY £00.00 6. £00,00 O STANDARD DELIVERY FREE CARD NUMBER SHIPPING ADDRESS WHY » Offering clear options helps to reinforce that the CARDHOLDER ADDRESS LINE shopper has multiple EXPIRES ADDRESS LINE 2 choices. SUBTOTAL 00.00 TOWN DELIVERY £00.00 POSTCODE ТОTAL £00.00 10 ORDER NOW 8. 6. 10 Simple Address Fields Payment Options & Logos Security Cues Complete Order Button WHAT » Keep shipping WHAT » Offer more WHAT » :Use high-visibility SSL certificates to provide clear security cues, increasing visitors' trust and encouraging sales. WHAT » Large 'complete order' in a contrasting colour to the rest of the page. address fields concise and than one payment use a'same as shipping option and clearly display the logos of providers and accepted button so details often don't need to be entered WHY » Reduce drop-offs by making the final step in the process clearly visible. twice. cards. WHY » Adopting the KISS (keep it simple, stupid) principle keeps the checkout simple and quick to complete. WHY » Familiar WHY » 53% of payment methods strengthen trust, and displaying more than one payment option consumers recognise that the padlock symbol, achieved using an SSL, means greater safety. Just 3% of consumers increases conversion surveyed would give their credit card details if one of those options fails. to sites without the padlock symbol. The Confirmation ORDER CONFIRMATION ORDER NUMBER #123456789 (D CONTACT US YOUR ORDER DETAILS PRODUCTTITLE £00.00 PRODUCT TITLE £00.00 12 £00.00 GUEST SIGN UP 13 SIGN UP PRINT CONTACT 12 13 Order Number Contact Details Guest Sign Up WHAT » Give those who used the guest WHAT » Clearly display WHAT » Display a number of contact the order number at the top of the page. options in case a customer has questions. checkout the opportunity to sign up WHY » A simple to an account. WHY » Doing this showcases you're happy to resolve any issues or order errors quickly. confirmation of an order number reassures that WHY » Many are happier to create an the order has been received. account once an initial purchase has been made. Al Mackin » Formisimo Pete Campbell » Kaizen Search "Focus on the conversion potential of your checkout process; getting it right can significantly reduce your cost per acquisition (and increase your sales). The checkout process has more input (key presses, mouse movement) and a significantly higher cognitive load than the rest of an "Not enough ecommerce stores are leveraging the power of user-generated content. Beyond simple reviews, leading ecommerce stores now offer user-generated Q&A sections, product photos and videos allowing your customers to get a true, balanced opinion on the value of the product to them." ecommerce site." Sources Brought to you by... NUBLUE Build It. Host It. Love It.

The Anatomy of a Perfect eCommerce Store

shared by brockbankjames on Apr 29
With the average conversion rate for an eCommerce store just 1.4%, it’s no surprise that marketers are continually looking for ways to see those of their own and their clients exceed this. NuBlue h...


Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy


Click the code to copy
Customize size