The Anatomy of a Perfect Product Page

Optimising for Conversion and User Experience

E-commerce success hinges entirely on effective product pages. It is User Interface (UI) design and User Experience (UX) principles that shape the customer's journey through an online store. When executed well, product pages guide customers through their decision-making process effortlessly. They balance aesthetics with functionality, employing design psychology to enhance usability, improve customer satisfaction, and boost conversion rates. This article examines the key components of high-performing product pages, outlining their roles in the online sales process and how they combine to drive increased sales.

Product Images

Visual representation is paramount in modern e-commerce. And creating a stunning first impression is critical. It is extremely important to display multiple high-quality images that showcase the product from every angle, ensuring the initial ‘hero’ image is large and impactful. Make these images clickable for full-size viewing, preferably using ‘Lightbox’ functionality. This approach is particularly beneficial for mobile users, where traditional zoom widgets or features can be problematic.

Include images of all available variants, and where applicable, provide a product video or assembly guide. Size guides or other relevant diagrams can also be invaluable. Every image should have alt text for accessibility that accurately describes the image content.

Product Title

The product title, encapsulated in an <h1> tag, should be meticulously crafted. To quote the great David Ogilvy, the ‘father of advertising’, “When you have written your headline, you have spent eighty cents out of your dollar” - suggesting that a good headline is worth 80% of the entire advertisement's value. Position keywords near the beginning for Search Engine Optimisation (SEO) while including all pertinent product information such as colour, size, or primary use case. For example in the case of office chairs we should consider what the most important factors are for shoppers looking for office chairs. Some quick research revelas that common factors that shoppers consider when buying an office chair include:

1. Ergonomics

2. Comfort

3. Adjustability (height, armrests, lumbar support)

4. Material (leather, mesh, fabric)

5. Price range

6. Brand

7. Style or design

8. Weight capacity

9. Durability

Given these priorities, an effective product title might be: "Ergonomic Office Chair - Adjustable Lumbar Support, Black Leather"

This title starts with the primary keyword "Office Chair" preceded by a key feature "Ergonomic". It highlights the adjustable lumbar support, which is a significant comfort and health feature and specifies the material, which is important for both aesthetics and durability.

This title prioritises the keywords most likely to be used by searchers and immediately communicates key features that potential buyers consider important.

Brand

If you sell products from various brands, the product's brand is typically positioned directly beneath the product title. This placement serves several crucial purposes:

• Immediate Recognition: For customers loyal to or familiar with the brand, this instant recognition can expedite the decision-making process.

• Trust Building: Well-known brands can lend credibility to the product, potentially increasing customer confidence.

• Search Optimisation: Including the brand name near the product title can improve search engine visibility for brand-specific queries.

• Differentiation: In cases where similar products are available, the brand can be a key differentiating factor.

• Navigation Aid: It helps customers who are browsing multiple products to quickly identify items from preferred brands.

Ensure the brand name is present but doesn't overshadow the product title. If it is a well-known and respected brand, consider using the brand's logo for visual reinforcement and reassurance.

Star Ratings

Implement a third-party verified review system that displays review stars, the product’s overall star rating, and the number of reviews immediately under the product title. Ensure there is a link to the full reviews section for those wishing to inspect all the reviews in detail. This action indicates a strong intent to buy and should not be squandered by making it difficult for the shopper to find.

Product Variants

Present variant options clearly, utilising buttons, thumbnails, or swatches for easy selection. Ensure out-of-stock variants are visually distinct, either greyed out or with a strikethrough, to prevent customer frustration. If different variants have different prices, the displayed price should change when the variant is selected. In turn, the primary image should also change to the appropriate variant image.

Price

Display the price prominently with the appropriate currency indicator. For discounted items, show both the original and reduced price with the original price having a strikethrough. Include a discount tag indicating the amount or percentage reduced. This transparency helps the customer comprehend the value they are gaining. If you force shoppers to do any form of mental maths they are more likely to make incorrect assumptions or simply walk away.

Language and Currency Options

For businesses operating internationally, provide options for switching both language and currency. This functionality should be prominently but unobtrusively displayed, typically in the header, or floating in one of the corners of the screen. If you have a minority of international visitors, placing the option in the footer may suffice. Allowing customers to view product information and prices in their preferred language and currency removes potential barriers to purchase and creates a more personalised shopping experience.

Availability and Shipping Information

Clearly communicate the product's stock status and expected dispatch date. Implement dynamic shipping information that updates based on the business’ current time, day of the week, and public holidays. Most businesses have a ‘cut off time’ where orders received after this time are dispatched on the following working day. e.g. If orders received before 3pm on a work day are dispatched the same day:

• Before 3pm on a weekday the indicator might read : "Ships Today (48Hr Tracked)"

• At 2:30pm on a weekday the indicator might read “Order within 30 minutes for delivery Tomorrow”

• After 3pm on a Friday it might display: "Ships Monday (Next Day Delivery)"

• After 3pm on a Friday when Monday is a public holiday: "Ships on Tues 3rd Jan (Fully Tracked)"

This dynamic approach provides customers with accurate, real-time dispatch information. By acknowledging shipping concerns through clear, reassuring messages, it demonstrates a professional approach to order fulfilment. This strategy instills customer confidence and in turn improves conversion rates.

Call To Action Button ('Add to Cart/Basket', 'Buy Now', ‘Subscribe’ ‘Order Now’)

When designing your primary call-to-action (CTA) button, prioritise effectiveness over outdated guidelines. Modern e-commerce design has moved past traditional assumptions about button colours or 'above the fold' placement.

Key considerations for CTA buttons:

• Visual contrast: Ensure the button stands out from its surroundings.

• Optimal size: Make it easily clickable across all devices.

• Clear text: Use concise, action-oriented language.

• Strategic placement: Position your CTA where users expect to find it, typically after critical product information but before detailed descriptions and auxiliary content. This approach serves two key purposes:

  • Meets user expectations: Place the CTA where shoppers are accustomed to seeing it across online stores, usually below key product details (price, options, availability) but above extended descriptions.

  • Facilitates decision-making: This placement allows users to easily return to the CTA once they've gathered enough information to make a purchase decision.

  • Balances visibility and information: It ensures the CTA is visible without overwhelming users before they've seen essential product details.

    Consider a consistent CTA location across your product pages to build user familiarity. For longer pages, a subtle sticky CTA that follows scrolling can provide a constant purchase option without disrupting the browsing experience.

    Remember, while this placement is generally effective, always test with your specific audience to ensure it meets their browsing and purchasing behaviours.

The most effective approach combines these principles with data-driven decision making. Use analytics and A/B testing to refine your CTA design and placement for your specific audience and product type. This method yields better results than following generalised rules (myths) about colour or position.

Social Sharing Functionality

Implement easy-to-use social sharing capabilities on your product pages to harness the power of personal recommendations. Research consistently shows that consumers are significantly more likely to make purchases based on endorsements from friends and family than through traditional marketing channels. By enabling effortless sharing, you're tapping into a potent form of social proof and word-of-mouth marketing.

Key considerations for effective social sharing:

• Visibility: Make sharing buttons prominent but not intrusive.

• Platform diversity: Offer a range of social media sharing options without making assumptions about your customers' preferences. Regularly analyse which platforms are being used most frequently by your customers and adjust your offerings accordingly. This approach ensures you're not limiting your reach based on preconceived notions about your target demographic.

• Content quality: Ensure shared content includes high-quality imagery and concise, appealing product descriptions.

Remember, each share potentially reaches a network of individuals who trust the sharer, extending your product's reach to a pre-qualified audience. This peer-to-peer promotion often carries more weight than branded marketing messages, potentially leading to higher conversion rates and customer acquisition at a lower cost.

Product Description

Craft a description that balances engaging narrative with crucial specifications. Structure it as follows:

1. Opening paragraph: Write a concise, compelling introduction that immediately highlights the product's primary function and unique selling point (USP). e.g. 'The ErgoFlex Office Chair combines cutting-edge ergonomics with sleek design, offering superb comfort for long work hours. Its adjustable lumbar support system adapts to your spine's natural curve, reducing back strain and improving posture.'

2. Key features and benefits: Present these in easily scannable bullet points, linking each feature to a tangible benefit: e.g.

   • Adjustable armrests: Reduce shoulder and neck tension

   • Breathable mesh back: Keeps you cool during extended use

   • 5-point base with smooth casters: Ensures stability and easy movement

3. Technical specifications: Include precise details for informed decision-making: e.g “Dimensions: 68cm (W) x 70cm (D) x 118-128cm (H), Weight capacity: 150kg, Materials: Aluminium frame, high-density foam seat, mesh back”

4. Ideal use case: Briefly describe who would benefit most from this product: e.g. “Perfect for professionals spending 8+ hours at their desk, or anyone seeking to improve their workspace ergonomics.”

This structure guides potential buyers through a logical progression, from initial interest to understanding how the product meets their specific needs.

Technical Specifications

Present technical details in a clear, easily scannable format. Group related specifications under subheadings, allowing for a more narrative flow while still maintaining clarity. Consider using a table for highly technical products where direct comparisons are valuable. Use alternating row colours to improve readability. For products with numerous specifications, consider making the table sortable or filterable to enhance user experience. Remember, a well-structured specification table not only improves usability for customers but also tends to be more easily interpreted by search engines, aiding in SEO efforts.

Size Information

Provide comprehensive sizing details, including both metric and imperial measurements. Again, a table format is best for usability and SEO. A clear size chart that correlates measurements to product sizes not only helps customers make informed decisions but also potentially reduces returns due to sizing issues.

Include a ‘How to Measure Guide’ with clear instructions on how customers should take their own measurements and accompany written instructions with diagrams or images showing correct measurement techniques. It may also be useful to include guidance on choosing sizes based on preferred fit (e.g., for clothing: slim, regular, loose).

By providing comprehensive sizing information and measurement guidance, you help customers make informed decisions, potentially reducing returns and improving satisfaction. Customers remember these little details and are more likely to become repeat purchasers. - a behaviour that you should also be rewarding with discounts and exclusive offers - but that’s a whole different article!

Usage and Assembly Instructions

Offer a mix of instruction formats to cater to different learning styles:

1. Video guides for visual learners

2. Step-by-step images for those who prefer static visuals

3. Downloadable PDF manuals for comprehensive information

Anticipate and address common questions about usage and assembly proactively.

Materials and Care Guidance

Provide clear, specific guidance on cleaning and maintenance, along with advice on how to extend the product's lifespan. If this is essential and/or critical information it should be highlighted and possibly included at the bottom of the product description. This is especially true if it affects the warranty or addresses safety.

Frequently Asked Questions (FAQs)

Include a dedicated FAQ section or tab on your product page. This feature serves multiple important purposes:

1. Addressing Common Concerns: Anticipate and answer typical customer queries, reducing barriers to purchase.

2. Reducing Customer Service Load: By providing answers to common questions, you can decrease the volume of direct customer enquiries.

3. Improving SEO: FAQs often match the natural language queries customers use in search engines, potentially improving your page's search visibility.

4. Building Trust: Comprehensive FAQs demonstrate product expertise and customer-centric thinking.

Remember to review and update your FAQs regularly based on customer feedback and common enquiries to your support team.

Shipping Policy

Outline your shipping terms and conditions, including delivery timeframes for different regions and any options for expedited shipping.

Returns and Refunds Policy

Clearly explain your returns process and refund terms. This section is crucial as both a customer service feature and a key trust indicator:

• Trust Indicator: A well-detailed returns policy is a hallmark of legitimate businesses. Conversely, vague, hard-to-find, or non-existent return policies are often associated with scam sites or untrustworthy sellers. By providing comprehensive information, you differentiate yourself from potential scam operations in the eyes of experienced online shoppers and search engines.

• Transparency: Provide a comprehensive, easy-to-understand policy. This openness builds trust and demonstrates your commitment to customer satisfaction.

• Contact Details: Clearly display customer service contact information, including phone numbers and email addresses. This is the primary trust indicator.

• Process Explanation: Outline the step-by-step returns process, including any conditions or timeframes.

• Refund Terms: Clearly state how and when refunds are processed.

• Legal Compliance: Ensure your policy complies with local consumer protection laws.

A transparent, customer-friendly policy can significantly increase buyer confidence and potentially boost conversion rates. It reassures customers that they're dealing with a reputable business, which is particularly important in today's online shopping environment.

Trusted Third-party Verified Customer Reviews

Implement a robust, third-party verified-customer review system for your products using a reputable service such as Judge.me, Trustpilot, or Feefo. These platforms are not only trusted by customers but also by search engines like Google, which can display your product's star ratings directly in search results, potentially improving click-through rates.

After a customer receives their product, the system sends them an email invitation to leave a review through the chosen third-party platform. In this invitation, actively encourage the submission of pictures alongside their written feedback.

On the product page, display the overall score and trust badges from your chosen review platform prominently. Present each review with the customer's name, general location, review date, star rating, and full review text, including any customer-submitted images. Arrange this information in an easy-to-read format directly on the product page that does not require the viewer to click every review to read it.

Provide sorting options for users to view reviews based on criteria such as most recent or highest rated.

This approach offers multiple benefits:

1. It ensures all reviews come from verified customers, eliminating fraudulent feedback.

2. It builds trust with potential customers through authentic, unbiased reviews.

3. It enhances your visibility and credibility in search engine results as they only display the review star ratings from reputable review systems.

4. It provides valuable, genuine feedback to aid in purchase decisions.

By leveraging trusted third-party review systems, you not only improve customer confidence but also potentially boost your product's visibility in search engine results, driving more traffic to your product pages.

Related Products Sections

Implement two key features to enhance cross-selling opportunities and improve user navigation:

'People Also Bought' Section:

This feature, popularised by Amazon, has become a standard expectation for online shoppers. It displays products that are frequently purchased together with the item being viewed. This section has been proven to drive incremental sales effectively. By showcasing products that genuinely complement or enhance the main item, you're providing a service to the customer while potentially increasing your average order value.

'You Recently Viewed' Section:

This feature aids in navigation by allowing customers to easily return to products they've previously considered without having to search for them again. It's particularly useful for customers who are comparing multiple items before making a decision.

Both of these sections should be prominently displayed, typically below the main product information but above the footer. Use clear, visually appealing layouts with product images, titles, and prices. Ensure that clicking on these items takes the user directly to the respective product pages.

The 'People Also Bought' section, in particular, has been proven to drive incremental sales effectively. By showcasing products that genuinely complement or enhance the main item, you're providing a service to the customer while potentially increasing your average order value.

Remember to use data analytics to refine these recommendations over time, ensuring they remain relevant and useful to your customers.

Footer Elements

The page footer is a crucial area where shoppers expect to find store-specific information. A well-designed footer should include:

• Company Information: Display your physical address, registration numbers, and any industry affiliations to establish legitimacy.

• Customer Support: Provide multiple contact options (phone, email, chat) along with operating hours.

• Policy Hub: Create a well-organised section for all policies, including shipping, returns, privacy, and terms of service.

• Trust Indicators: Display security badges, payment icons, and any relevant certifications.

• Quick Links: Include a sitemap-style list of key pages for easy navigation.

• Newsletter Signup: Offer an incentive such as access to exclusive offers to encourage email subscriptions.

Conclusion

Creating an effective product page is an ongoing process. Regularly review and refine your page elements, conduct A/B testing, and analyse key metrics to ensure your product pages continue to meet both user needs and business objectives.