Product landing page design: show the product

A product landing page has one thing a service page does not: an object the buyer has to picture. A visitor who cannot picture it assumes the page sells something vague, and leaves. Design choices make this worse without anyone noticing. A background photo of people looking pleased fills the first screen, the product appears as a small icon, and the only way to see it is a video that starts on a logo. On a phone the photo crops the headline, and the icon is too small to read. The owner sees the product every day, so the page looks clear to them.

• The first screen shows the product itself, or its real screen, at a size a phone can read.
• A caption beside the picture says what the product does, in the buyer's words.
• The demo video starts on tap, after a still picture and a line that says what it shows.
• The price, or the level it starts at, is visible near the button, not behind a contact step.
• A demo that needs a sign-in says so beside the play button, before the click.

The first screen should contain a picture of the product in use, at a size a phone can read. A wrong version uses an abstract gradient, a headline and a button, which could describe any software. A right version shows the actual screen, the box or the device, with a caption that names what it does, such as a schedule that lists the day's jobs. Stock photos of people using laptops do not count, because a buyer cannot tell which product they are looking at. Check the first screen with the picture removed. If a stranger cannot name the product from the headline and the button alone, the picture is doing work the headline should do.

A demo video is common on product pages and often the first thing to fail on a phone. Browsers block autoplay with sound by default, which can leave a frame with a play button that a buyer may not press. A video that loads before the headline holds the rest of the page still. A right version starts with a still screenshot and a short line that says what the video shows, then loads the video on tap. If the demo asks for a sign-in, say so next to the play button, because a buyer who finds out after the click has lost the time.

A visitor who wants the cost looks for it on the first screen or near the button. A wrong version hides the price behind a Contact sales button, and the buyer reads that as a price they cannot afford. A right version names the plan and its entry price, or says what the price depends on, such as team size, beside the button. Check that the price in the pricing section matches the one near the first button and the one at the sign-up step.

Pricing page testing

A buyer reads a product page in a rough order: what it is, what it looks like in use, what it costs, what they get after they pay, and how to start. Put those in that order, and check each section against the one above it. A page that jumps from features to a request form skips the question of cost. A page that explains setup before it says what the product does asks for work the buyer has not yet seen value in. Check the order on a phone, where the layout often stacks sections in the order of the code.

A product page changes when the product changes: a new screen, a new demo, a new plan. Each change can move the button below the first screen on a phone, or replace a picture the buyer needed. Run the same first-time buyers through the page after each change, and read where each one stopped. A demo behind a login needs a test account, and a preview copy can be checked before its link is shared.