The Ultimate Guide to Product Page Design in 2023

The product page is the most important page on your eCommerce site. It is the place where your customer makes their final decision and asks themselves: should I buy this product? The UX of your product page dictates their answer to this question.

Every single interaction with your customer counts. However, given that the stakes are so high, this is especially true on your product page. As Baymard Institute eloquently puts it, this page is “the centrepiece of the user’s eCommerce experience”.

Using some examples from industry leaders and building on current eCommerce UX trends, this blog will describe how to create the perfect product page. Traffic, conversions and sales will follow.

The Most Important Considerations for Product Page UX

Your product page needs to provide a consistent user journey, facilitate a seamless payment process, and supply the customer with answers to every and any concern they may have. In order to do so, here are the most important aspects of your product page you need to consider:

Product Description & Layout

A product description needs to succinctly explain what the product is and, above all, how it can add value or solve a potential problem for the customer. You must, therefore, identify the unique benefits of your product and foreground them.

The most important elements of your product page need to appear above the fold (i.e. be visible without scrolling). Alongside any customisation options, the “add to checkout” button, stock/availability information, and the price, these product benefits should be high up on the page. They signal to your customer that you clearly understand their needs and desires.

Product benefits are the “hook” to grab a customer’s attention. If they need more in-depth information – such as the material and dimensions of the product – they can simply scroll down to find them.

Trafiki Tip: Content should be formatted in a way that is easily digestible throughout the product page. This includes easy-to-read fonts, bullet points, and graphics.

Meller Example

Many eCommerce sites now choose to display product benefits via iconography and small snippets of text, as MELLER does with their sunglasses range. This is a visually compelling and concise way to communicate the value of the product to a customer.

In this instance, MELLER chooses to focus on its product’s polarised lenses. This is a very thoughtful move:

• When a person buys cheap sunglasses or any other product, their sole concern is basic functionality and aesthetics.
• However, when a person chooses to invest more money in a product (e.g. £40 MELLER glasses), they look for features that verify their quality and justify the price.
• Highlighting the various benefits of polarised lenses characterises the product as both unique and high-quality.

Your product page could be further enhanced by animated UX microinteractions. These little animations will subtly transform mundane interactions into satisfying ones that may subconsciously influence someone’s decision to make a purchase.

The Mobile Product Page

Due to the reduced screen size, how you format information on a product page is even more important when it comes to m-commerce. Especially since over 70% of all retail e-commerce globally was estimated to have come via mobile in 2021.

A smaller screen size equals more scrolling. Therefore, you must think carefully about what information the customer needs to have access to most urgently. 

MELLER has an adapted section that only appears on the mobile version of the page. They use iconography once again but this time with only two-word descriptions. Clearly, these truncated descriptions were specially designed with a small screen in mind.

Also note that the “add to cart” button stays in the same place on the bottom of the screen, regardless of scrolling. This is the button that matters most to both you and the consumer.

This product page is a great example of how to adapt content for better mobile UX.

Product Images

The centrepiece of your product page is the product image. It goes without saying, then, that it must be a showstopper. Any image you use needs to be:

• High-quality i.e. high-resolution.
• Sized appropriately for the page (large).
• An accurate representation of the product.
• On a white or light background, either with soft or no shadows at all.

Added features such as the ability to zoom and 360° photography can also be very nice touches, but they are not essential. 360° photography works best with products that are multi-dimensional, particularly ones that are expensive e.g. a necklace with unique, fine detail on all sides or a high-tech camera.

Image Gallery

Your feature image should be supplemented with other images that customers can scroll through for more visual information about the product. The more images you show, the more detail you provide.

Shots taken from all relevant angles will help the customer get a true representation of the product. Similarly, if you sell a product that comes in a variety of different colours, each product variation should be pictured. Given that 22% of shoppers return products because they look different in real life compared to the photos, such considerations are crucial.

Use Lifestyle Shots

Lifestyle photography is an authentic way to connect with your audience. These shots help generate emotional responses as they focus on the type of customer who buys the product being sold, not the product itself.

A study by Motista revealed that customers who have an emotional connection with a brand have a 306% higher customer lifetime value (CLV).

Establishing this connection is the hard part, but once you do, customers will reward you with their loyalty.

Going One Step Further: Videos

When it comes to generating an emotional response and telling a story around your product, nothing works better than a video. According to Neil Patel, customers are 64-85% more likely to purchase after watching a video.

If you are interested in creating a video for eCommerce, we recommend checking out BigCommerce’s blog on the industry’s best examples of product videos.

Personalisation

The phrase “eCommerce personalisation” is a rather trendy term being used a lot nowadays, but it is certainly not one without value and meaning.

Creating a personalised customer experience is one of the key principles of eCommerce UX. This is because, once again, it is key to building an emotional connection with your consumers. It will help you capture their attention for an initial purchase and ensure that they come back.

Here are two examples of eCommerce personalisation:

Wishlists

The ability to “favourite”, add an item to a “wishlist”, or “save for later” gives the customer autonomy. It gives them the freedom to return to complete a purchase at a more convenient time.

Most importantly, it is a much-needed feature in a world where customer journeys span across mobile and desktop.

Related Product Sections

Another way you can go about personalising your buyer’s journey is through related product sections. This can be framed as “People also like…”, “Customers also viewed” etc.

Equally, if you are selling a power drill that requires batteries, a related product section should include batteries. When you cross-sell products in a way that is helpful to the customer, you will be rewarded with sales.

Asos Example

Asos is a great example of an eCommerce site that has built cross-selling into the UX of its product pages. As any related product section should be, it is unobtrusive and located below the important product information.

Trafiki Tip: Customers will not respond well if they feel as if you are pushing for extra sales. For instance, they click “add to cart” and another suggested product pops up and takes up their whole screen.

Rather than just “similar products”, Asos has creatively named this section “Buy the Look”. They are not just pairing similar items, but items that complement one other. It is a feature utterly tailored to the customer.

Similarly, the “recently viewed” section offers a gentle nudge to the customer to re-look at things that have previously caught their eye. Asos has perfectly harnessed the related products section as a way to provide value to the customer journey whilst increasing the likelihood of sales.

Product Reviews

Social proof is essential to establishing consumer trust. 87% of consumers place as much trust in a product review as they would word-to-mouth. This trust translates into conversions. Online product reviews yield an average sales uplift of 18%.

Whilst review sections are now a common occurrence on product pages, most eCommerce sites are not doing them right.

Remember, your product page is all about communicating valuable information to the customer via easy-to-skim visuals. Star ratings are a very effective and commonly adopted way of doing this.

These ratings can be used as anchor links that auto-scroll down to a more comprehensive review section when clicked on or displayed on an expandable tab lower down the page.

Argos Example

Argos uses an expandable/collapsible tab with a striking visual breakdown of their ratings. A unique touch is the use of a secondary rating system according to various product metrics. In this instance, the customers can rate their sofa on quality, comfort, and design.

This is a great addition to the review section as it subtly encourages even more user engagement.

They also have a sort function that allows you to browse reviews using “Newest”, “Oldest”, “Most Helpful”, “Highest Rating”, and “Lowest Rating” search filters.

Customers will appreciate such features that have evidently been designed for their own convenience.

Amazon Example

Building a community in your product section is the best way to build consumer trust. Through a “Customer questions & answers section”, Amazon does exactly that. It is also more effective than a traditional FAQ section as it allows customers to directly interact with one and another.

Social media has dramatically altered how we perceive opinions and recommendations. In other words, they no longer have to come from close friends or family for us to take notice.

Community sections that facilitate customer interactions are tapping into this new collective psychology – fuelled by social media – in which the opinions of strangers matter.

Trafiki Tip: Negative reviews also have a purpose. They are crucial for establishing the authenticity of your review section and your product!

eCommerce UX Audit

Different industries may have different nuances and requirements, but the same UX principles can be applied across the entire eCommerce world. This blog gives our readers a sneak peek at the methodology behind an eCommerce UX audit, but is by no means exhaustive.

We are partners with Mouseflow and, in turn, use this industry-leading website analytics tool to conduct our user research. This research stage – which allows us to study real-life user behaviour – is crucial to improving the website UX of our clients. Click here to download this software (with a FREE 14-day trial!) and start learning about your audience today.

The product page is only one aspect of your eCommerce site that you need to pay close attention to when it comes to UX. There are countless other stages in the buyer’s journey. We have also written blogs on:

• Shopping cart UX: if you want to find out how to reduce your cart abandonment rate and ensure your customers proceed to checkout.
• Checkout UX: if you want to find out how to get customers to hit that all-important “Place Order” button.

Trafiki is a London eCommerce marketing agency that specialises in providing UX audits for businesses looking to grow. We offer a UX audit service that is detailed, comprehensive, and utterly tailored to your brand. Moreover, it is a service specially designed for eCommerce sites.

We will help you to create a website that not only looks great but is optimised for conversions. Click here to get in contact with us today.