A product page is the part of a website dedicated to selling a specific product or service. As opposed to other web pages such as homepages (which are largely informational) a product page is made to both inform and persuade—meaning it will ideally lead to the customer clicking the “Add to Cart” button. This is also what makes product page design a challenge, considering a beautiful design does not always translate to a high converting design.
Aesthetic choices must be even more strategic than usual to get the product off the screen and into the hands of customers. To make this easier, we’ve put together this ultimate guide to product page design.
How to design a product page
—
The goals of a product page
—
In basic terms, a product page is made to result in a purchase. But towards that overarching goal, there are several things a product page must accomplish.
- It should explain what is for sale. A product page must show the visitor what a product looks like, how it functions, and how much it costs.
- It should establish trust. A first time purchase is a leap of faith, especially when the product is online, so the product page must anticipate and assuage the visitor’s doubts.
- It should create an experience. A product page will use compelling media and copy to make something digital feel real to the customer.
- It should be intuitive. A product page must accomplish all of the above goals without bombarding the user with information.
The product page’s goals and the buyer’s goals
The product page’s goals should, in effect, align with the buyer’s goals. The customer is on this page because they are trying to satisfy a need.
Assuming the product is the solution, it is the job of the product page to persuade the visitor that this is true. If the product is not, this should also be made immediately clear.
All of this, of course, entails understanding your buyer’s needs. You must first understand what audience the product is marketed towards as well as the types of products and web pages they are used to interacting with.
Broad demographics, surveys, interviews, and psychographic profiles are all standard techniques for target audience research. Designers must then translate their knowledge of the buyer to psychology principles within the design.
The content of a product page
—
The basic content of a product page is structured around “the fold”, or the point at which the screen cuts off the rest of the page.
Because the user has to scroll to see what is below the fold—in other words, they have to make an active choice to continue browsing—the initial “above the fold” section is where the most important information is kept. So let’s start there:
- Header: This contains the brand logo and navigation menu options. This is fairly standard on most web pages, so does not have to be particularly large. Many brands opt for a minimized version of navigation even on desktop, such as a hamburger icon.
- Product description: This contains the product name, price, a value proposition, and sometimes a review snapshot (such as a star rating). Essentially, this identifies the product and makes a succinct pitch for why the visitor should buy it.
- Product images and media: This contains the main product images, usually in a carousel for the visitor to cycle through various angles. This would also include viewing options, such as different colors or models.
- Call-To-Action(CTA) button: This is the button that leads to the purchase page. Included near the CTA are purchasing options such as quantity or sizing.
The remaining content items we’ll list don’t necessarily have to go below the fold but are less immediately essential as the above.
- Supporting information: This would include more detailed how-it-works information about the product, such as weight and dimensions, FAQs, and even breakdowns of the specific parts of a product.
- Peer endorsement: This includes testimonials, reviews, and lists of any notable brands or people who have used the product in the past.
- Supporting graphics: These are non-essential imagery that assist with scrolling, such as illustrations/animations that help the page feel more interactive and alive. They are typically tied to the general branding of the site.
- Recommended products: This displays a list of other products that the visitor can consider. If the visitor is ultimately not interested in this product, recommended products can give them an opportunity to continue browsing other product pages rather than simply leaving the site.
How different types of products affect product page content
The content of a product page can vary depending on the nature of product/service. The most common difference occurs between physical and digital products (or visible and nonvisible).
Physical products have an inherent disadvantage in the digital space, and the goal of their page content is to substitute the brick-and-mortar store. They might accomplish this by putting more resources into media, detailed product specifications or highlighting shipping/return policies.
At the same time, physical products like candles or wine that rely on nonvisual senses, tend to mimic digital products in their page strategy—namely an emphasis on persuasive descriptions. But because they rely on personal taste, a trend in this arena has been to use onboarding quizzes ahead of the product page.
These ask the visitor (fun but strategic) questions about their preferences to create a sense that the product page they eventually see has already been curated for them.
Digital products or services may not be able to display images because the product cannot be photographed. A service can also frequently be novel or unfamiliar, requiring more time spent establishing who the brand is and what they are offering. For this reason, pricing is often saved for last. A price listed without a full understanding of the offer might scare the visitor away.
Physical products, on the other hand, can afford to be more straightforward in this regard—a t-shirt is a t-shirt, and either you think it looks good enough to buy or you don’t.
Product page design best practices
—
Now that we’ve gone over the basics of how a product page works, we’ll walk through some design tips and take a look at some examples.
1. Use the right product page design software
The design process will generally begin with a brief or a list of the necessary features. Most designers will then transition to pen-and-paper sketches to generate ideas for how the elements will fit together. This is referred to as a wireframe—a simplified, skeletal representation of the page structure. Once you’ve narrowed these down, you must move onto software.
Prototyping apps like Sketch and Figma create more sophisticated mockups, giving you a more accurate representation of how the page will look. InvisionApp, meanwhile, creates interactive prototypes, which speeds up the testing process.
The benefit of prototyping apps is that they allow the designer to focus solely on user experience early on. They also tend to lead to less original designs. While this can often be preferable—the goal is a seamless shopping experience—if you want to make more creative designs, textures or animations, you’ll need software like Photoshop and After Effects.
Check out our complete guide to web design software >>
2. Use a template-based layout approach
Considering an e-commerce site will have multiple products (if not hundreds), tailoring a product page to each individual item is not feasible. Most designers aim for template layouts, making adding new product pages as easy as copying and pasting content. One approach is to use a single template for all product pages or else slightly different templates for different product categories.
Template-based design requires planning: marketers and copywriters will have to commit to a consistent number of images, feature lists, Q&As, testimonials etc. for every product. At the same time, product page templates don’t always have to be 100% identical. For example, if the color will vary between products, the color scheme of the product page can be varied to match.
This design repurposes the same layout but with a different background image and color scheme for each product. Design by Francesco Zagami via Dribbble
Many product pages these days have fairly standard layouts even across different companies. For example, e-commerce sites tend to display images on the left side with the product description, customization options, and CTA on the right. Below this comes a list of specifications and benefits, followed by the FAQs and reviews/testimonials.
The strength of a ubiquitous layout like this is its familiarity: most visitors will intuitively know where to find the information they’re looking for. Its straightforwardness is especially ideal for buyer/seller platforms (like Ebay) where the brand will have no control over the product images and copy.
But there are ways to keep this layout from being dull. In the Monstera design pictured here, the general positioning of the product page elements is standard, but the scale of the image and solid colored background are both unexpected.
3. Design with the rest of the site in mind
Of course, product pages are not designed in isolation: they have to integrate with the rest of the website. Consistency like this is important not only for branding, but because a discordant product page can seem subconsciously less trustworthy to the prospective purchaser.
Constraining product pages to the existing branding can also present a challenge for designers. Let’s say a branding team has decided for some unrelated reason to use black-and-white filters for all images—now the product page will be off-brand if it emphasizes an item’s colors. This is why e-commerce businesses who prioritize online shopping should start the web design process with the product page design.
At the same time, allowing the brand personality to shine through the product page can also lead to creative liberties—the “hoodie” design pictured here gives a clear sense of the brand’s attitude. But it’s also never too late to consider a complete site redesign if it helps to optimize the product page.
Similarly, the checkout page is often an extremely simplified version of the product page, displaying the key product image in miniature, the price, and the quantity with options for making changes.
Considering almost 70% of shopping carts are abandoned, checkout time is an ideal opportunity to display benefits listed on the product page such as shipping times and low fees. Overlaying the checkout page on top of the product page will also make it easier for the user to click out to go back, rather than potentially leave the website.
4. Selectively prioritize information
Product pages must balance informing the prospective buyer without overwhelming them with information. This means the designer must make decisions about what the user has to see and when.
Part of this has to do with what content is placed in relation to the fold. But the specific design techniques (such as size, color, and font style) that established priority are summed up in the principles of visual hierarchy.
What information is prioritized can depend on what you are selling. For aesthetic products like apparel, furniture, artwork etc, the product image is going to be the main selling point. For services or products that lack a visual element, the description explaining the product will take priority.
You can always count on the CTA to be high priority in any context, but that doesn’t mean you have to go overboard with a loud color or an oversized button. One of the main techniques for designing CTAs is creating contrast against the other page elements.
Finally, eye tracking via a tool like Crazy Egg can help you to identify more scientifically what parts of the page draw your user’s attention (especially helpful when their attention is going where you don’t want it to).
An important technique for prioritizing information is to condense or collapse secondary content. This is especially common in FAQ sections, where a list of questions will be displayed and the user will have to press a button (often a plus or triangle icon) to see the answer.
Similarly, carousels can be used to display a selective sample of content (such as images or customer reviews) within a narrow, horizontal section, allowing the user to swipe through for more.
These approaches not only keep the site from feeling too cluttered, they invite interaction—keeping the visitor engaged as opposed to passively reading.
5. Tell a story with images
Images are inevitably the most eye-catching part of a product page design for the simple reason that they are faster to scan than text. It’s probably no surprise that online shoppers these days expect to see an average of 6 images and 3 videos on product pages, according to research by Salsify.
At the same time, images on product pages must be more than attention-grabbing: they have to make a digital product feel real. This means that the images should create an experience of the product, telling a story without words.
How images do this can depend on the product. For physical products, dimensions are often important, and this involves more than displaying the measurements. With furniture, for example, an image that shows the product in a fully furnished room not only gives the customer decorating ideas, they can compare it to nearby objects for a better sense of scale.
Apparel brands will commonly use models to showcase the fit, but they can also go the extra mile to show models in specific settings, hinting at a potential future that could accompany the purchase. In situations where ingredients (or mechanical parts) are the main selling point, these can be showcased in artful ways, as in the animated grains of the Bennett Tea design pictured here.
Design by tubik via Dribbble
For products or services without a visual component, designers have to be more creative, using images that evoke the experience of using the product.
Additionally, using icons or simplistic illustrations to accompany a how-it-works section can easily summarize the steps of the process for visual learners. For this approach, take inspiration from infographic designs to get an idea of how to filter complex data through images.
6. Don’t underestimate user-generated content
Although it can be your first instinct to manage every element on the page, making room for user-generated content is worth the chaos it might invite. Typically, this means allowing users to submit their own public reviews, questions, and photos of the product.
This can seem like a designer’s nightmare: images will almost certainly be poor quality and the occasional angry review is inevitable.
On the other hand, users trust other users far more than they trust the curated images and testimonials that a brand gives. Trust like this can make or break a purchase. This is why user-generated content is typically saved for the bottom of the page, when the visitor has presumably gone through all the official information and is deliberating on their final decision.
When it comes down to it, average positive reviews will outweigh negative outliers in most consumers’ minds. Additionally, these spaces can be an opportunity for brands to respond to questions and negative comments, showcasing their personalized care and customer service.
Conversely, neglecting to include content like this can be perceived as a lack of confidence or as though the seller has something to hide. In order to make the sale, authenticity can be more important than a perfect-looking product page design.
7. Test, analyze, and iterate
We can give you advice on getting a great design, but we can’t tell you whether your final product page will be a success. But we know who can: your audience. In other words, the success of your product page depends on whether analytic tools like Glew or Google Analytics’ Enhanced Ecommerce show that people are buying.
Some key metrics to pay attention to are traffic and their sources, session data and of course conversion rates. The tricky part of this process is getting to the root of any problems, since it is not always going to be the design that is at fault.
A high bounce rate or lack of interaction (including scrolling) may indicate that the page is uninteresting at a glance.
Meanwhile, a high cart abandonment rate could mean the checkout process is too cumbersome (or that there are unexpected costs). When visitors do not move to the cart phase at all after a long session, this may point to unpersuasive copy. And if a page is getting low traffic, you might want to revisit your SEO strategy.
Lastly, you’ll want to pay attention to the number and content of negative reviews (both on your site and review aggregates like TrustPilot) as this can indicate a problem with the delivery or the product itself.
Assuming you do decide the design is the source of the problem, you have to have the courage to make changes—even if it’s a design that took a lot of effort and looks great to you. A/B testing is a great way to quickly test alternate versions of a design and decide based on data which will lead to higher performance.
A great product page design needs a great designer
—
The design of a product page is part science, part style and all business. At the end of the day, a great product page is designed to elevate a product out of the computer screen and into the customer’s everyday reality. We hope this guide has given you a place to start on how to accomplish this. But when you’re ready for a product page that closes the deal, make sure you’re working with a talented designer.