A few tips on designing a product page


The first thing to realize is that a product page is a step in an acquisition or a content discovery process. So the context of customer journey is crucial. But today let’s talk about the page segments and approach towards site structure and communications implied by the CJs.

Where do you come from?

So the user is arriving at our product page. But what is the origin of that visit? It might tell you a lot about what info user got earlier on the product and their motivations, for instance:

  1. A click-through landing page – a user probably knows product basic specifics and price options:
    1. I want to buy a product – let’s make CTA visible without the necessity of scrolling (Yes, I know, everybody scrolls, but if user is convinced to buy that item, why bother them with an extra activity)
    2. I want to compare with other products within the same range of price/class
  2. Mailing – a user is acquainted usually only with very limited info on the product
    1. I want to get more info
    2. I got reminded about the product I already know and I want to buy it
  3. SERPs
    1. I am searching for a specific product and I want to know all about it
    2. I am comparing prices and services between vendors

As you can see the product page is included in many Customer Journeys and it should fit to every of them. It can be done in two ways:

  1. A page is dynamically constructed based on the scenario that a user is in
  2. A page has a more or less static layout and we try to prepare a balanced version

The best is the first approach but we are usually limited with the technology, time and budget. For the sake of the discussion we will introduce such an approach that we will divide the page into segments and each segment can be expanded or collapsed, visible or hidden based on the user journey, but we will present the richest version. Let’s focus on the basics.

The structure

We can go in two ways:

  1. User Centered Design (UCD)
    Here we are concentrating mainly on user needs
  2. Conversion Centered Design (CCD)
    The acquisition completion is our main goal

Let’s have something in between. Both business and user goals will be crucial for us. Normally, we would go for classical CCD structure called AIDA. Image segments one below the other with such contents:

  1. Attraction
    Visual presentation or a video
  2. Interest
    A brief description connected with lifestyle (imagine how much you could gain if you have a good user profiling from Business Intelligence systems, all of the claims and visuals could be fit to the user segments and personas)
  3. Desire
    Additional services, bonuses, time-limited offers
  4. Action
    Final offers + CTA


It’s quite ok, but we need to modify it a little bit.

  1. Attracion: The first segment would be good for a Landing Page when user is not acquainted with the product but here we should place a CTA and a price.
  2. Interest: The secound segment is tricky, because there is a room for more than just a brief description. Where should we include technical specification or legal regulations?
  3. Action: what about users who are not convinced and are simply the explorers? Let’s have some other products here as well. Or let’s direct them to the other item instantly. Here is a great example of such a technique: NaTemat.pl . In the header we have a small progress bar that indicates how long is the distance we have till the end of the article:NaTemat.pl
    When the user scrolls till the end of the article, the URL is changed and the user arrives in another one. I think it would work great with the products page as well.

The language

We know how we want to build a site, now we need to know what and how we want to present the product.

  • Why? How? What?
    It’s great that your device is waterproof, has tons of memory and never breaks down, but it’s not the reason I want to buy it. It’s not what the product does, it why it is done that way? Have a few minutes and watch this video. It is a real eye-opener.

  • Why so serious?
    Don’t get to serious. A little joke never killed nobody. Try to make a connection with your audience.
  • Extra info
    Never get rid of extra info such as detailed technical specs. Include them in your site but hide them in expandable segments. It makes you transparent to the user.


Facts are good to, but the emotions build the story. Include them in your communications, for instance:

  1. Greed: If you buy it now, you’ll get rewarded
  2. Fear: If you don’t buy it now, you might get into trouble (It sound a little like mafia, but think how Insurance commercials are constructed? :) )
  3. Altruism: Buy know and help children/animals/refugees
  4. Jealousy: If you don’t buy it now, your neighbor might
  5. Pride: If you buy it now, you’ll do very smart
  6. Shame: Buy now, it’s the only smart move

Of course don’t try all of them at once and remember that they vary over time. Here is my favorite example:

“Years ago there were Airline Trip Insurance machines in airports offering life insurance for your airline trip at a cost of 25¢ for each $7,500 of coverage. Companies sold a lot of insurance this way, as the public ventured into the unfamiliar world of air travel. Many were afraid of flying and gladly purchased the insurance. In economic terms, this is a high price for just a few hours of term insurance; yet economics failed to stop fearful passengers. However, by the 1970s and 1980s people no longer bought flight insurance. The economics stayed the same, so why did sales dwindle to almost nothing?

Behavioral Economics explains this change in purchase behavior. It recognizes that emotions play an important part in the decision to buy the insurance; and that, over time, emotions change. When air travel insurance was popular, not only were people afraid that the airplane might crash, but they also worried what would happen if they did not buy the coverage. The insurance gave them peace of mind. As people’s fear of flying diminished, they no longer had a strong emotional reason to buy the insurance. The economic value of the insurance did not change, but the emotional component of the decision no longer existed.

Source: Limra.com

The reviews

No matter how good you are at building claims and visuals, it’s good to have other people supporting your statements. Make a use of social proof phenomena described in by Cialdini many years ago. How? Include user reviews segments in your page. According to this article63% of customers are more likely to make a purchase from a site which has user reviews.

Sales Uplift from Reviews

Source: Econsultancy.com


There are the crucial things to remember:

  1. A customer journey context
  2. A communication based on user segmentation
  3. A site structure
  4. A good balance between facts and emotions

About the author

By Luke