Product page designs can make or break conversion rates. Big players, such as Amazon and Walmart, use a formula to ensure each page has images, descriptive text and calls to action (CTA) to drive buyers through the sales funnel. Outside of the basic data each page needs, there are a number of things e-commerce brands can do to improve customer experience (CX) and see an increase in revenue.
The best way to figure out how to create stellar product page designs is by studying what successful companies do. Here are six favorite examples and why they work.
1. Grab Their Attention
Consumers see numerous ads each day. Standing out from the noise of marketing means companies must figure out how to grab attention. The headline or product title is often the first thing users see. A descriptive heading pulls them in and answers the question of whether the item is right for their needs.
Source: https://bellroy.com/products/slim-sleeve-wallet
Bellroy sells slim wallets with lots of storage. They use pointed headlines, such as “Slim Sleeve,” “Hide & Seek” and “Flip Case.” The user knows what the product is when they click on the landing page link.
People also have no question about the product’s category from these descriptive terms. The keywords shoppers are most likely to use can serve as an excellent way to refine headings.
Spend time on the call to action (CTA) and make sure the wording engages the user. Use action words and keep the language short.
2. Use Clear Images
A crucial part of product page designs is showcasing the product via photos. For e-commerce stores, the user has no way to experience the item if they don’t do so through visuals. They aren’t in a physical store where they can touch, smell and hold the product in their hands. Photos are one of the ways they can understand the finer details of an item’s design.
When researchers asked people what website features they value, 91% said visuals attracted them. The images must tell a story and showcase inventory from all angles. Consider what the consumer most wants to know before making a purchase. Showing color might require a close-up of the surface. Size needs a comparison to a familiar object. Answer the questions users have before they ask them.
Source: https://www.towersealants.com/products
Tower Sealants shows how much images add to a product description. Each of their product packaging designs comes in a different color to make it easily recognizable. Customers who’ve ordered the item in the past can easily identify it.
Note the similar placement for images in each product box. The user knows where to look for the image and glances to the right each time as they scan down the product page’s design. Showing some consistency helps show a company is reliable.
3. Create a Hierarchy
The best designs embrace a visual hierarchy. The impact is subtle but still draws the user in and makes pages predictable. Create a visual hierarchy with a color palette, text size and style. For example, you might bold the title and make it larger than the body text.
Source: https://www.seattlechocolate.com/collections/best-sellers/products/sip-sip-hooray-truffle-bar
Seattle Chocolate Company uses bold and larger text for the product page title. They also bold the purchase options to make them stand out. Another thing they do to set a few features apart is use bold colors, such as pink for the reviews and green for the “Add to Cart” CTA.
4. Utilize the Power of Video
A video can say more about a product than static images. Add some music and text overlay and users become more likely to watch to the end and turn from browsers into buyers.
The 2023 Application of Video Marketing Statistics Report showed 91% of marketers use video content. Keep up with competitors by showcasing popular items and giving users an immersive experience.
Source: https://vflatworld.com
V-Flat World shows their photo backdrop boards in various settings and includes a video to explain how they work and how to set them up. Embedding the videos gives users an opportunity to see the product from different perspectives. Users can choose to view them or not, depending on where they are in the buyer’s journey and the push they need to know if the item is right for their needs.
5. Evoke Emotions With Color
Most product page designs use colors that pop to grab attention. However, the psychology of colors indicates some hues might bring forth emotions in the viewer.
For example, most people like the color blue. Red evokes passion and excitement. Black can be seen as elegant or serious.
Add product page design colors to your style guide so each item has a similar look. You may need to do some split testing to see which shades work best for your target audience.
Source: https://www.kettleandfire.com
Kettle & Fire uses three colors repeatedly throughout their site–a soft, earthy yellow, white and bright red. By using the red as more of an accent color, the design pulls the user in and encourages them to take action.
Note how the red is used in the discount offer selection box and the CTA. Because the rest of the page is neutral, the CTA pops and grabs attention. The color generates excitement and pushes the user to add the item to their cart.
Study Successful Product Page Designs to Learn
Which products sell best on the brand’s site? A clue to improving current descriptions is to repeat successes and replace failures. Apply the things learned from studying the website examples above and find the right combination of elements to drive conversions.
Eleanor Hecks is editor-in-chief at Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.
