Product pages can make or break a sale for a consumer. The key to the best design is to not leave any unanswered questions in the mind of the consumer, as over 20% of people who aren’t able to convert into sales walk away because of “uncertainty”. According to research conducted by NN Group, these consumers find competitors that have stronger UX and design features.
But, what makes the perfect product page? It is the page design or the description? It’s a mix of everything and it starts with the message!
So, what message are you trying to relay to your customers?
Is your brand a dominant leader in high quality, or are you trying to project a “savings-first” mentality in your customers. If you want your website to have the best product page design possible, then you need to focus on the appropriate design philosophy that is synchronous with the brand.
The best product page designs follow some core principles so that the customers can have a positive experience with the overall journey.
Here are some of the essential components that go into creating the best product page design.
How to Have the Best Product Page Design on Your Store
UX: The user journey and experience
The UX (User Experience) of the website needs to be synchronous with the customer’s objective - shopping.
If the customer wants access to the phone number of the website, it should be prominently displayed at the top. If the customer wants to know whether your website accepts different currencies and payment options, it should be listed clearly on the product page.
If the customer is from Latin America, then is there an option to translate the page into other languages? This is one of the many product page best practices that experts might consider while considering UX.
The website’s UX also needs to have the right call-to-action buttons. If a customer wants to gain more information, but the button is too small to see, they may go to an alternative site for a better deal.
Amazon focuses a lot of its efforts in creating the best product page design so that its customers convert quicker. With a prominent RHS button that’s bright yellow, it’s a constant reminder to customers to go ahead and pick up the product. What Amazon also does differently, is that has multiple smaller text links on the bottom RHS for easy access to a myriad of selections. This allows the UX to be decluttered yet accessible for all users.
UI: Why design matters in a product page
The website should look pleasing to the eye, as it has the right colours and schemes to appease any first- time visitor. Similar to how when people visit your store in real life, your website should create a great first impression. One of the key elements of product page best practices is ensuring that all the elements are aesthetically present.
The UI (User interface) of the website should have the right design aesthetic so that people don’t mistrust it, and truly believe that it’s the best product page designed for them.
Customer trust is the most important factor to garner from your customers. When choosing between going too flashy and aiming for trust – trust would win that battle 9 times out of 10. When your logo, your navigational panel, your above-the-fold content and your design elements flow well with each other, trust naturally arises.
Content: You can’t convert without great copy
What’s the overall content of the product page? Does it have all the right information that customers need? Is there information about shipping? Have you provided language information for international customers?
The content of your website matters as much as your design and aesthetics.
Not only do you have to follow SEO guidelines and best practices, you also need to have some catchy content that’s simple and well written. The best ecommerce product detail pages are the ones that have relevant information needed to make the purchase.
The content should also translate to international audiences and be ready to consume in various languages. When you have a website that’s viewed from across the world, you need to offer content that’s scalable and relatable to your audience.
The copy, the titles, the description, even the text on the CTA are important factors when it comes to converting visitors into customers. Security lapses are multifold, with so many data breaches happening every month, which means that your web copy should ensure that customers feel safe about transacting on your site.
Now that we know the best practices to follow when building a product page, let’s look at some great examples of excellent product page designs.
5 Product Page Design Examples you Should Follow
Dollar Shave Club
Overarching message: They know that their product is easy and simple to manage, and they don’t want to waste your time by “trying to sell you something”. Dollar Shave club has some of the best product page designs online right now.
Their minimalist UI: Their UI is outstanding, with shades of minimalism and strong colour choices. The orange and grey combination works well for the brand as it differentiates itself from the bold blue and black colour schemes of some of the big brands.
Simplistic UX: Because you’ve already seen the commercials and you know what the brand is all about, their CTA is a simple orange button that users can click to quickly get started. It’s a small investment and the website does a great job converting users instantly
Simple and sleek copy: Dollar Shave Club is unique, in that it has a strong focus on brand when emphasizing its copy. The copy is witty and engaging to the core male demographic.
Overarching message: Nixon has a great overarching message of “complete customization”. The user instantly understands what they’re getting and has an immediate connection with the watch brand on the product page.
Strategic use of white spaces: They’re trying to create a sense that you’ve “arrived” with the white spaces around the product. By leaving behind a lot of the pixel space, they only want you to focus on the watch itself.
You can edit, customize and play around with the product page making it more engaging than any other watch brand. This gamification of the UX allows users to spend more time on the site and eventually convert into customers.
Feature based copy: Watch enthusiasts love features, and that’s exactly what Nixon has offered in their web copy. They talk about the 48mm polycarbonate case, their patent pending MicLock™, and the watch’s 316L surgical grade stainless steel. These add to the mystery around the watch and make you feel like you’re getting a bargain for all these features.
A beautiful brand experience: Customers of lush pay more for quality and organic ingredients, and the fact that its handmade adds an extra appeal to the product. It’s the best product page design for its unique set of customers.
Colours, patterns and aesthetics: Since the product is called “Flower’s Barrow”, the page goes well with the background imagery, the handwritten-Helvetica font, and the colour scheme selected for the product.
Enhanced and extended: It’s a got a unique architecture to the page, with the CTA being bolder than the rest of the page. There’s also an option to opt for subscriptions which is quietly kept on the bottom left.
Non-sales focused copy: The CTA text isn’t buy now, or click to purchase – it’s add to cart. Nowhere on the page do you find deals and discounts, and the product description describes the page elegantly and with charm. The whole experience flows well for the visitors.
A website focused on deals: A sharp contrast from “lush”, Latin America’s most popular ecommerce marketplace, Mercado Livre, has a unique design that’s focused on getting customers what they want.
Conversion focused design: The bright yellow contrasted with the white background is to energize people into feeling excited about the deals being offered. While most of the real estate being given to the product image, the website wants to ensure that the product’s aesthetics appeal to the consumer first.
Trust indicators: Another perfect example of trust factors in ecommerce, the website has options of local language selection, different payment options, and upfront information about shipping.
Product oriented copy: By subtly showcasing the discount on the RHS, the copy makes the user feel like they’ve arrived at the best deal with the best price. It has one of the best ecommerce product detail pages online right now, as the strategy is to convert the user as quickly as possible and let them continue shopping for more deals.
JM & Sons
An experience based website: From the moment that the user comes onto the website, they may get turned off if the CTAs are too pushy or sale-centric. Instead JM & Sons, want you to focus on the quality of the product and its design appeal.
Subtle and Delightful: There are multiple product images portrayed in one slider, and the CTA is the same colour as the background with just a border. They’ve designed the best product page design suitable for their customer niche, and they’re subtly influencing the customer to purchase the wall coat rack by aiming to appeal to the aesthetic side of the consumers.
Trust indicators: The name itself has legacy in it, with a distraction free-layout that is unique from the clutter-filled messes on major brand sites.
Niche product copy: The copy is meant to give you a glimpse of what the product is all about, highlighting the handmade component of the product journey.