eCommerce Web Design Best Product Page Design Principles

Ireland’s eCommerce Overview:

With over 2.1 million online domestic shoppers in Ireland last year, compared with 2.2 million that purchased online from an overseas supplier. Its safe to say there’s a lot Irish retailers can do to attract more traffic to their online stores. With projected growth in Irish eCommerce usage to reach 3.2 million by 2021, there are firm indicators that the emergence of the digital economy in Ireland has forced many retailers to rethink their eCommerce strategy.

For those already trading online there is the stark reality that overseas competition is winning the hearts and minds of the Irish online shopper. But why does so much get purchased online by Irish shoppers from overseas suppliers? Is it their product page experiences? Price points and offers? Logistics and shipping rates? Or a combination of all?

With Irish eCommerce consumer spend set to reach €10.1 Billion by 2020, Irish online retailers need to identify and resolve all threats from overseas competitors in order to capture the insurgence of Irish online buyer behaviour.

In this article we look at eCommerce web design, specifically, the most important page on your website. As its the final conversion point along the customer journey it’s vitally important to get right from the initial design to the final go-live version.

How to design a Product Page that will convert visitors into customers!!

Follow these 8 design approach principles:

1. 1. 1. Check out your biggest competitors eCommerce stores
      2. Define the end user/buyer persona
      3. Design for ‘mobile first’ user experience
      4. Add compelling content – employ Above-The-Fold best practices
      5. Show related products that were browsed or searched – Below The Fold
      6. Plan the layout of your eCommerce store 
      7. Image Quality & Video  – optimised for web use 
      8. Utilise User-Generated content – customer reviews / social media engagement

#1. Check out your biggest competitors eCommerce stores.

Its nothing new to deep dive into your competitors store to get a sense of what they deliver in terms of an online shopping experience.

Follow the steps below to gain more insight on how your competitors market to their customers online.

• Homepage: All commercial websites will have some sort of homepage strategy. This strategy is built into the design architecture of the site and aligned to its marketing objectives, directing visitors ‘with ease’ to high value product pages. Most online operators will group these product ranges ‘above-the-fold’ on their homepages. This marketing strategy is nothing new to  ‘brick and mortar’ retailers who use creative displays and event zones to cross sell product ranges.

When analysing your competitors homepage. Ask yourself these questions.

• • Is their homepage simple and clean in layout or cluttered and cumbersome?
  • Are their prices competitive? What type of bundle deals do they offer?
  • Can you find the information you are looking for quickly, make comparisons from your own site, are links to key product pages in high visibility?
  • Once you arrived on a relevant product page analyse if the key product information is above-the-fold?
  • What is the payment and check-out process like – efficient or slow?
  • Maybe test fully, buy a low priced item to test the shipping experience and logistic notifications – is it reliable and time accurate?

(All of these elements will provide a comprehensive insight into how your competitors operate online. They can highlight any weaknesses or flaws in their eCommerce processes and display.)

• Meta data on Product Pages: Viewing your competitors on-page SEO strategy will give you a good idea on what keywords they want their products to rank for on search results. The most obvious signs will be visible keywords they use in their page titles, meta descriptions and product page content
• Product Page Layout: Whilst checking the meta data it’s a good idea to review the user experience on your competitor’s product page, get a feel for the shopping experience, where they have certain product page elements, and assess can you do better?
• Search Engine Analysis: A follow on from product page meta data analysis, the purpose here is to analyse where your competitors appear on search results. As is the case, search engines can display results in different ways and to different users. By conducting search engine analysis on the main product keywords that are relative to your store and your competitors you can get a fairly clear picture of what search queries stimulate their product page visibility. It’s also good to review their PPC search and display ads to see the structure and content in their ad copy. Remember engaging with Google Ads has its own rules so best seek the expertise of a qualified Google Ad Certified partner to give you the best advice. 
• Analyse their product reviews and customer feedback: This can be a vital point in conducting competitor analysis. Reviews from customers and industry experts on independent sites can provide critical clues in product quality and service. It can also expose weaknesses in other areas of their eCommerce operation like shipping and logistics, product returns, post sale customer service and technical support.
• Review their Social Media: How do they interact with their customers? What levels of engagement do they receive on their social media? It is also a good point to check how they leverage their social media channels in terms of imagery and video content to promote their products or services. Social media is a very important touch point in the customer journey, its wise not to overlook it! Your competitors might also engage in sponsored social media posts so reviewing their channels will again give you insight into their ad copy and post imagery.
• Check out SEMrush or SpyFu to help you with your competitor analysis, they both provide great analysis on competitor keywords, social media advertising and search ranking against your competitors. Prisync is also very useful for eCommerce analysis and worth a look, it can track competitor price changes and alert you, they offer a freemium account to start with.

#2. Define the end user – Build buyer personas.

Much needed research is required to establish and build buyer personas, they help identify your target audience. Building personas allows you to push personalised content and funnel your marketing activities and messaging to a specific user audience. They also form an integral part of building a targeted product landing page, from a content perspective they define the tone and messaging highlighting a products benefits increasing the likelihood of a purchase. In designing a product page that will reflect the targeted persona profile, there must be thought put into developing scenarios and positive experiences users gain from your product. When done building a comprehensive set of buyer personas, develop a customer journey map to analyse and establish touch points that will lead your prospective customers to your product landing pages.

#3. Design with a Mobile First approach.

Designing your product pages with a mobile first approach is essential as it has become the No 1. device for product searches and will account for 54% of total eCommerce sales by 2021. There are however, many considerations to take in account when designing your mobile product page, if not highlighted in the design cycle they can cause the user to overlook important product page content like product images, product descriptions and other USP’s that drive conversions.

• Breadcrumb navigation has two important uses, one for product page SEO and the other to notify users how they got to your product page

• Have a clear Product Title so your product page meets the users search intent, this avoids high bounce rates on your product pages and allow the customer buyer journey to continue

• Clear Buy Buttons can entice a click and the impulse to purchase, locate below the image gallery and before the product description

• Customer Reviews should be easy to read and easy to leave, like product descriptions they should be placed in a highly visible area (on all device platforms) so they can be read

• Social Media Sharing should be a vital part of your marketing strategy, its free brand advertising, so ensure there is an option to share your product page on all the main social channels and also have ’email to a friend’ and ‘share a link’ options

#4. Desktop Design: Above-the-fold best practices.

Although its imperative to design with a mobile first approach as it’s no doubt the majority of traffic to your eCommerce store will come from mobile platforms. There is still a reluctance from Irish online shoppers to complete the full purchase via mobile, so desktop is still the preferred device.

“52% of Irish online shoppers have concerns about their security when making mobile payments”

(PWC Retail & Consumer Report 2018)

With this in mind developing an intuitive desktop product page experience is just as important to ensure consistency on your eCommerce site, customer journey and also address any concerns that a browser might have about the product they are interested in. As research shows above from the PWC Retail & Consumer Report 2018 the majority of Irish online shoppers don’t have much trust in mobile payments at present. A desktop version allows you to present your product pages in ‘full-width’ with key information above-the-fold and to maximise the potential for conversions.

Key Elements to include above-the-fold:

Page Header:

• Main navigational menu: Easy navigation should be a priority for user experience and also by employing best practices in SEO allowing your site to be easily crawled by search engines
• Sub menu product category: Similar as above providing the user with a clear position on your eCommerce store, but also supporting best practices in SEO
• Company logo: Branding is key for enforcing quality and trust with website visitors. Through your brand logo and visual language you can create a memorable online shopping experience that keeps customers coming back!
• Site Search: Check with your developer or technical eCommerce specialist on how to integrate AI driven site search technology to collect invaluable data on frequent product search queries

Main Product page content (from left to right | top to bottom)

Left hand side:

• Breadcrumb navigation: Highlighting to users how your site is structured. Good for easy navigation and Google loves them! So enough said
• Main Product Image with Zoom functionality: Provides a more detailed view of the product (normally on a mouse over), especially useful if you have highlighted certain aspects in your product page descriptions like engraving on jewellery and stitching or fabric texture on clothing
• Product image variations: different colours and angles, video integration and ‘360-degree’ viewing options
• Social Share Options: This is a simple win for your product page, creating a buzz on social media that drives brand engagement and ultimately brand advocates. Allowing users to share your product page provides your site with a direct channel (for free) to your target market and new potential shoppers – not to be missed

Middle:

• Product Title: Ensure its accurate to confirm searcher intent
• Product Price Point: Clearly visible centre page right or left of the main product image (if on reduction also have original price clearly marked down to highlight value)
• Customer review rating: Building proof and trust in your brands product, customer feedback is vital and always checked by prospecting customers
• Order quantity options: You might want to introduce a maximum or a minimum order quantity depending on your sales strategy
• Product availability: handy tool if your want to control stock availability and convey scarcity
• CTA Button – ADD TO CART: clear and concise ‘encouraging the click through’ common variations – ADD TO CART | BUT NOW! | SHOP NOW!
• Add to Wish List: encouraging the user to setup an account with your eCommerce store, allowing to gain valuable data on account holder product preferences
• Product description: Highlighting the main product USP’s with descriptive test on how it will benefit the user, other useful tips on product care and other product variations

Right hand side:

• Suggested Products: Providing you with an opportunity to up-sell with similar or related products. With no scrolling involved this element can really drive sales and add extra basket value to individual transactions

See the illustration below that highlights key elements to be included above-the-fold on your desktop eCommerce product page. Take into account this is a wireframe layout, these elements would normally be more spaced out on a live webpage and surrounded by white space to ensure a qualitative user experience.

#5. Desktop Design: Below-the-fold best practices.

This section of your product page contains second tier information about your product, it’s still key however, to drive conversions.

• Detailed design specifications especially useful for bulky items like furniture
• Longer product descriptions important information like manufacturer background and credentials
• More comprehensive customer feedback, longer version demo videos or testimonials
• Recommended products, complementary items that are useful with the current product being browsed

#6. Carefully plan the layout and architecture of your eCommerce store.

This can be a painful task but one that will ensure you prioritise product ranges you know will generate the highest revenue. One of the best practices to get your eCommerce site indexed and crawled on search engines is to ensure they’re easy to read and that the ‘click depth’ is no more then three clicks, i.e. three clicks from the main menu on the homepage.

What is click depth? The process to which search engines crawl and index webpages.

Consider you have a general category like ‘Mens’ then a sub category like ‘Mens Trainers’ and you prioritise with ‘Top Sellers’ as a key product landing page, your are already 3 clicks into your site. So if you you want to highlight ‘Top Selling Mens Trainers’ or ‘Top Sellers’ then copy that landing page link and replicate it on the homepage in an area with high visibility, that way its only one click from your homepage. When search engines crawl your website (to index your webpages) they will be able to read links closest to or on your homepage.

It sometimes can be hard to decide where all these links should be positioned on your homepage as you might want to push more than one product range for promotion. You should consider the expertise of an eCommerce specialist to discuss your options and develop a homepage strategy that will guarantee an efficient crawl depth for all your main high value product ranges.

#7. Image Quality & Video – optimised for mobile web use. 

When you walk into or by a high street fashion store you are normally greeted with spot-lighted displays with dramatic visual merchandise, music and bold video projections to entice you in to the store or indeed to explore more about whats on offer. These visual effects add to the in-store atmospherics and also increase the product appeal bringing that WOW! factor and driving a desire to make a purchase.

On your product pages you have to apply the same technique, your product imagery has to be perfect to allow for excellent visual standards but also be able to adapt for other technologies and platforms to work with them. 90% of online shoppers will be affected by the quality of the product imagery and/or video quality so creating compelling images or video should be your NO.1 concern.

Product Page image technologies that you should consider.

1. Pinch to Zoom or Double Tap – This technology is for mobile users, developed as a matter of vital importance in the evolution of mobile commerce. Most eCommerce stores provide zoom as a roll over gesture on their desktops sites.
2. 360 Degree product view – Both mobile and desktop versions offer a great user experience with this technology, especially for expensive goods like watches and jewellery. The upload time is normally quite efficient and the user can control the different view points by finger (on mobile) and mouse / touch pad (on desktop).
3. Product Video – Videos can drive lots of referral traffic to your website product pages from social media channels like YouTube, they’re a great way to sell to your customers, provide more insight into your products features and address any concerns that a potential shopper might have. Make sure to setup a YouTube channel and create video content that you can embed into your stores product pages.

Most eCommerce providers like Shopify and Woocommerce have software plugin technology allowing the above to be integrated into your stores product pages.

#8. User Generated Content – customer reviews on social sites.

Driving brand awareness is your ultimate goal! But how you plan and execute your brand strategy can make or break. As mentioned before, creating a WOW factor about product brand can drive engagement and a desire to purchase. Most companies that leverage digital now use ‘social proofing’ or ‘user generated content’ as a key element in their brands’ development strategy. User generated content can be a powerful tool in developing trust and reassurance with prospecting shoppers, so having this element built into your product page can be a vital conversion tool.

You might integrate this element from your various social media feeds, possibly Instagram and Pinterest. Embed visual posts from your social followers into your product page that provides inspiration and feedback about your product value – whether it be design style ideas or other useful functionalities and features. Some brands have been really successful in developing a buzz about their product ranges, creating social communities, using hashtag groups and encouraging followers to come up with new ideas about their products through social media campaigns. If you’re targeting Millennials, this strategy will be crucial as 64% of them will seek out customer reviews and user generated content before they make a purchase.

Key Takeaways 

As user preferences and buyer behaviour change on a constant basis developing and maintaining constant sales through your eCommerce platform will lie with your product page design. Its the most important page on your website, no matter what your marketing efforts are, it can make or break your online sales if not designed correctly.

Just to recap.

• Conduct a competitor analysis – this will provide some vital information and clues on how to create a competitive advantage
• Identity the end user and buyer personas – will align your marketing strategy and your product category range
• Design with a ‘Mobile First’ approach – to accommodate on the growth in mobile commerce
• Add compelling content – creating an exhilarating shopping experience with engaging content. Desirable product imagery options, demo videos and also useful product information to address browser concerns
• Design your product page – incorporating above and below the fold elements for desktop users, maximising the potential for longer product page browsing periods
• Inspire your shoppers – leverage your social media channels to create a community of brand advocates, integrate this content in to your product page, driving social proof and trust in your brand

eCommerce store product pages are ubiquitous. Successful ones harness all the design elements to drive authenticity and a unique shopping experience. With the use of psychological trigger mechanisms convince your browsers to ‘add to cart’ quickly lowering the chance for shopping cart abandonment.

To learn more about how to drive more conversions from your stores product pages get in touch with  izest Marketing Group and lets work together to design an eCommerce store that will grow your brand online.