Menu

Effective Online Store Product Pages Examples

10 minutes

ECommerce product page design: nuts and bolts

Usually, running an eCommerce website takes immense time and effort. And the online retail business is well worth doing as global eCommerce sales are expected to skyrocket up to $4.5 trillion in 2021. Great news! So why should you bother, anyway? While some web store owners prefer using ready-made product page design templates, like the themes and templates for Magento 2 eCommerce platforms, the others try their hands at creating new ones.

In many cases, eCommerce websites may fall short of high conversion rates due to a lack of robust UI/UX design. The last time around, nine indicators showing you have poor CX design were in the limelight. This time, we will focus on the factors primarily affecting the performance of your online store pages that offer various physical and digital merchandise to customers.

This said, let’s first check the best product page design 2018 trends, if not requirements for boosting conversion rates. Later on down the line, we’ll pick several websites to check whether they conform to product page design best practices.

Main product page design principles to follow

Image optimization
Imagery is by far the most crucial factor for high converting product pages. So before going any further, make sure you put every single piece of the visual content you have on your website product pages in order, be it images, photos or videos. Think twice about the right size, shape, lighting and coloring of these graphic elements.

Please, do not forget to consider the quality of your pictures as well. Guess you can wow your prospective customers with low-res images? Not a chance. It is the professionally made and picked photos (the unique ones would be even better) that make the difference between the leaders in eCommerce and the rest of the underperforming online shops with the lousy design.

Mobile optimization
When someone says that content is king, I would add that responsive web design is also a king. Or, at least, a queen. All kidding aside, responsive product pages look way far more user-friendly to customers and can attract lots of new leads to your online store rather than pages with no optimization at all.

It is an open secret that mobile eCommerce, or simply put, mCommerce is gaining more and more traction among online shoppers. Google is confident that 74% of visitors will return to your website if it is properly adapted for mobile devices. With this in mind, try to make your product pages look smooth across various Android and iOS gadgets.

Product info
Comprehensive information about the scope of products displayed on your eCommerce store is what all the customers are looking for. Basically, it resembles the labels attached to items in brick-and-mortar shops, where visitors can easily see the details about the price of a product, its tech specs, color variations, size, discount rate, shipping terms and whatnot.

The same goes to online product pages, this time being even tougher for UI designers to put all the necessary info on a product due to some space restrictions. Make sure all essential details are explicitly shown for every SKU on the website to help customers get along with your products.

Optimized usability
UI/UX design is more than needed to turn your eCommerce store into a source driving high lead conversion. What do we imply by saying that online shop requires usability optimization? It means your website is not user-friendly and needs improvements.

First and foremost, think over the factors that can improve the overall shopping experience. Ensure you reconsider the way how customers view the shopping cart, create a wish list for clients to put aside some items they are about to purchase later, enable quicker signing up, logging in and ordering processes, etc.
All in all, optimizing the usability of product pages is making a shopping journey for your customers faster, more pleasant and intuitive.

Social proof
Pages displaying your products must have some sort of feedback from the previous buyers so that the current website visitors can estimate how good they are. The best fit here is to show positive as well as negative reviews describing the item’s durability, the terms of use and maintenance, and other user’s hands-on experience. You can also let your customers vote for the things they like with a five-star rating scale.

Moreover, include the details assuring the buyers of the product quality, fixed price, timely delivery, and a money-back guarantee. Demonstrating some proofs of public recognition like certificates, badges and others can also be useful. In other words, you have to make the customers believe and trust you and your brand.

Personalization touch
A customer-centric approach has become a mainstay for eCommerce in recent years. People like being treated on an individual basis, meaning that they are eager to see some kind of exclusive discounts, special offers and other goodies while visiting your product pages.

Encourage customers’ loyalty by showing your appreciation and giving away some personalized bonuses or free samples, which in turn, can greatly enhance the conversion rates of your product pages. Either way, tell the shoppers how welcome they are and they will definitely return for more purchases.

5 effective product page examples

Now, let’s check some of the popular web stores to see if their design solutions help gain more conversion.

1) A store, offering kitchen utensils and other home appliances to its clients. In my opinion, this is one of the best examples of how UI/UX design solutions should be applied to product pages. The item presented on this page is a wall lamp. Just think what you, as a prospective customer, need to know before buying this thing for your home or office? Can you find any core details that this page is missing? Definitely not. The overall product design concept is quite minimalistic, albeit very effective in terms of attracting more eyeballs to the page. It has got hi-res images and provides all the necessary details on the product. I’d say this page is our editor’s choice that combines most actionable design trends of 2018.

2) Nike. Since we are talking about the conversion potential of certain product pages, not a website in general, we chose a men’s series of sportswear from this iconic manufacturer. The first thing that strikes your eyes is a comprehensive size table, giving customers much insight into the product line. A set of carefully selected photos add value to customer experience. For those, who require more details, there is some respective information on the topic hidden under the cut in drop-down menus. No wonder why Nike is so popular among young and older generations, and enjoy high conversion rates with such eye-catching page design.

3)  Perfumery products by Dior as presented on one of the eCommerce stores. Dealing with subtle fragrances is not that simple for UX designers to meet evolving women’s needs. This product page exemplifies how robust design can greatly attract and engage the audience. First, the page enables a breadcrumb navigation, making it easier to find and switch between various items.
You are free to choose the size of a flask you want, order one or more units at a time, see the exact price and estimated delivery date. Then you can add the product you like to the shopping cart and keep on buying or move directly to the order form.

Great responsive design for enhancing mobile user experience is the last but not the least feature that results in converting more visitors to this page.

4) A car rental company. Providing services rather than tangible products can be way more difficult in terms of boosting customer conversion rates. What information should be on the list? What features and design-driven elements can engage your audience?

This product page seems to have enough data for customers to pick a decent car on the rental service in their exact whereabouts. Besides the geolocation feature, which by far is the most essential one in this case, the page provides many details as for a car’s transmission type, air conditioning, price per day and more. The CTA button is surely designed with a clear understanding of UX principles – it is bright and in its right place, enabling customers to freely reserve the car they like.

However, the images require solid optimization, since they are too simplified, if not primitive and do not convey a realistic appearance.

5) A medical equipment store, that sells adjustable multifunctional chairs. The product page is well organized and allows website visitors to look through a set of pictures, enjoy a social proof badge and check its warranty and manufacturer. A number of dropdown menus help customize the specifications according to its color, seat tilt, foot ring and height.
The weak point of the UI/UX design solution is somewhat unusual. Unlike lots of web stores that lack necessary details, this page provides overly exhaustive product info. It looks a bit confusing for newcomers to the web store to order a particular chair while factoring out the irrelevant variants. On the contrary, the images are quite small and faint giving no insights into the variety of models displayed on the website.

At the end of the day, it is never too late to get your web store optimized with actionable UI/UX design solutions in order not to lag behind your competitors and boost conversion rates. Contact us should you need deeper insights on the topic.

Originally published November 14 2018, updated November 14 2018

Liked this? Try these…

3 Jan 2018

Best 2018 Wireframe and Mockup Tools for Your Website

Implementing wireframes and mockups on early stages of the design process have gained much popularity in recent years.
It does prove its efficiency since wireframing allows you to test every single idea beforehand.

design updates - one of the best way to refresh your ecommerce business
27 Jun 2018

5 Key Design Elements To Refine Your eCommerce Store

Never seize the opportunity to improve the visual side of your eCommerce project with good-looking design components, that will provide the users with better experience and engagement. Our team prepared few recommendations for your next website’s design update – try them and get the competitive advantage over your competitors! 🙂

11 Jul 2018

How to Choose an Actionable and Cost-Friendly UX Design Digital Agency

If you really take care of your project, you know that the user-centered design is an essential part of its success. Nowadays the design market is overcrowded with semi-qualified companies, who can’t guarantee the rich rewards, asking for the high fee. Let’s try to highlight the most important points you need to pay attention to, looking for the appropriate ux design agency.