Designing a good product page is the easiest task in the world if we realize that everybody is also a user and a customer (unless you are Ebenezer Scrooge and the vision of a shop window gives you the chills).
We all have complaints when navigating sites or catalogs and making purchases in marketplaces and online stores. Why is then so difficult to create a truly compelling product page that has high conversion rates?
Designers and marketing teams are bombarded all the time with new rules, advice and tools that guarantee the definite solution. But you don’t need a complicate explanation to get to the point, Sherlock, and you will be surprised to find how little is needed to create awesome product pages that meet users’ expectations.
Let’s see those 6 commandments for product page design!
Simplicity
It does not matter if your product pages are aimed to millennials, tech-savy users or elder people on the darkest side of the digital world — less is always better.
The design of a product page must take into account what kind of product is being presented, which determines a special touch adapted to each industry. An editorial style for fashion products or a lot of animations for electronic devices such as cameras or tv screens are some of the current trends, but companies and brands constantly look for new ways of catching the client’s eye.
But, as a general rule, a product page design should make things easy for users, who want to identify instantly what they are looking for: the price, a big product image, additional costs, the stock available, and buy or add to cart button.
And don’t forget that a product page must be responsive in each device and type of screen. Therefore, pages for mobile sites or apps must be designed with different rules that respond to the user experience while they see and touch a screen, with easy-to-distinguish elements that are easy to interact with.
As to specific design recommendations, always go for neutral or white backgrounds, and uniform and eye-catching colors that are only applied in key visual zones.
→ Read more: The best web design tips for e-commerce
Uniformity
Every product page must follow the same pattern: that is not boring, in fact is what users expect and, think about it, a great relief when it comes to upload hundreds of products to any online platform.
"Design is much more effective when teams can get the needed data and assets from a single depository like a PIM software system."
Furthermore, visual transitions must be maintained between different sections, the homepage and product pages, ads, mailings, newsletters and any product landing page where the user lands: the same aesthetics and resources in terms of colors, fonts and style of images used. And, of course, never forget to include and highlight your brand logo in each product page.
Product information and other visual elements should be homogeneous among different pages of a website and several channels — that’s why the synchronization and automation of content management is essential in e-commerce design. The process is much more effective when teams can get the needed data and assets from a single depository that is constantly checked, updated and shared across the company, like a PIM software system (Product Information Management), and even sent to design departments that can develop any website or catalog with no restrictions and no need of worrying about the accuracy of product information.
→ Muggles don't understand magic, but you can with this PIM guide for beginners!
Catching copy
A product is not just the combination of some trending keywords in its niche, numbers and technical data. An astonishing copy can make a product or catalog stand out from their competition and getting better conversions and more traffic and loyal customers, as the product pages are giving better information to them.
This rule applies to any text that appears in a product page: title, description, bullets, technical specifications, additional resources and interactions with clients, like texts that are shown in pop up windows, the final paying process, frequent questions or chatbots.
The language used in a product page should call to action or stir up curiosity in users, better if formulated with positive words.
Lots of (high quality) visuals
A website or online catalog should also apply the uniformity rule in their visuals, with natural transitions between thumbnail galleries of search results and the individual product pages.
Image galleries in product pages must have high quality pics, zoom and rotation options, and standardized photographs that show the same format and brand aesthetic. A really attractive trend consists on integrating the main product image of a page with the background, as if the product was floating in the page.
Don’t be shy and include animations, visual comparisons and inspiring banners if you feel your products need that extra push or are better shown with videos or demonstrations, like makeup products, cars or jewelry.
→ If the secret recipe for the perfect product page exists, we have it here
CTAs on point
There is no need to overwhelm anyone with pop-ups more sparkling than a Pokemon fight. Your “Add to Cart” button is the simplest and the most important CTA in a product page: make sure it is well placed on it and near essential information, like shipment options and delivery times.
Eye-catching colors should be placed in strategic areas of the page and applied on the design of buttons, as they are the first thing users are going to see at first glance on small screens like smartphones, which usually attract the most traffic but have the worst sales conversions.
Proper hierarchy
A zero distractions commandment: product information must be as easy to find and read as following the steps to search anything within the page, checking the cart or beginning the payment process.
The most important content elements for users should always be placed at the top of the page: the product title, one main product image, the price, the ‘Buy’ button, shipping costs and delivery times.
It is also preferable to separate the general description from pure technical data, which is more suitable for charts or lists with bullet points. But each industry needs to highlight different information according to their products: for example, it is essential to include size charts for clothes in fashion product pages, assembly instructions for pieces of furniture or video tutorials for cosmetics.
Don’t forget to add at the bottom of a product page the reviews section (you can also show a simple star rating next to the product title), and secondary buttons like share in social media platforms, add to wishlist or send via e-mail.
→ Another trick: automate your catalogs with this guide and save money and time
Pro tip: Go seasonal
Take advantage of any occasion to give a boost of uniqueness to your product pages. That way your loyal customers won’t be bored while navigating your site for the umpteenth time, and new clients will be attracted to the latest trends shown in your online catalog.
Christmas, Halloween, Easter, Summer Holidays, Back to School, Mother’s and Father’s Day… The sky is the limit (although you should limit your festivities to the ones that your clients really celebrate). Any occasion is a great opportunity to readapt your design, show that you pay attention to current trends, and make constant updates that encourage users to regularly check your catalog and look for novelties, which gives you the opportunity to create special newsletters or include promotions that encourage visits and purchases.
Final thoughts
Content and design should always go hand in hand in any e-commerce product page or product landing page. The type of information highlighted and the resources used may vary according to your product niche, but the foundational pieces should never be overlooked.
And remember that design never gets its beauty rest: be innovative and not be afraid of boldness or the latest technical complements. That is the best attitude if you want to keep your product pages updated and convince an increasingly demanding audience.
