Successful product page checklist

How to sell more by hacking your product landing page.

Bart Zimny
Thinking with VORM
6 min readMay 19, 2017

--

Originally published at vorm.io by Bart Zimny

The first issue we encounter when creating new brands is strictly connected with our presence online. We feel the urgent need to let the world know about our existence and promote our products among clients.

Many people begin with creating their own product page first which can be tricky considering the fact that sometimes it happens without further strategy and attention to products. This may lead to redesigning the page completely because as the time passes we start to realize that it doesn’t fit the purpose anymore and it’s not selling. There’s nothing wrong with constant iteration, changes and testing your hypothesis but you don’t want to loose your first and most important chance to win your client.

Strategy first

Make your brand and product strategy consistent and unique. An effective brand strategy gives you a major edge in increasingly competitive markets. It tells them what they can expect from you and your products. It differentiates your offering from your competitors. Your brand is derived from who you are, who you want to be and how do you want to be seen.

What do you want to communicate and achieve?
How the image of your brand should look like?

You have to know where you’re going before you can get there. Every strategy begins with an inherent goal in mind, so take a moment and define it clearly. Identify your key message, establish core value for your brand.
There are many combinations and it all depends on how you want to be perceived by your clients and who are you targeting.

Is your brand a magician, a rebel or a lover? Build your brand on an archetype and stick to it for the whole time to prevent a personality disorder. Right combination of visual language, photos, colors or verbal message will help you to tell your story and call up an appropriate association with the value in your audience. It affects the way of perception by the environment.

#1 Catch it!

Catch your clients’ attention immediately when they come across your page. You have only few seconds to make them interested. Make what’s above the screen an attractive and engaging picture. Do some magic! You may use things like videos, 3D objects, HTML5 canvas, three.js or make a use of accelerometer that is build in mobile device with DeviceMotionEvents or similar. However don’t go to far with long loading content and keep the experience smooth.

Stripe radar adds great interaction as the first point whatn your landing on they page (https://stripe.com/radar)
Jetty uses simple movements on the site to keep the visitor explore the page. Check it yourself (https://www.jetty.com)

#2 Show it!

Showing your product in an appropriate way is crucial. It has to be introduced really well so that the client immediately knows what it is and also what its purpose is. The photo of the product has to be direct and adequate so that the reader could understand the idea quickly. It has to be an astonishing picture to make your customer get in love with the product and liberate a desire in him.

Obviously Apple is showing their hardware in the most distinguished way (https://www.apple.com/mac)
Previous product page by Oculus that was like the guy on the picture — wow!
Lapka products are astonishing! – Lapka Bam (https://mylapka.com/bam)

#3 Name it!

Make it clear for the visitor what the product is. Remember that you have only few seconds to attract their attention so don’t make them think (unless it’s your strategy).
A short description of your product and its functions is also advisable. Don’t forget about good typography especially for the headings.

Google ARA – you can definitely know whats that product about with this clean copy (https://atap.google.com/ara/)

#4 Do it!

Direct your visitors to do what you’d like them to perform. Make your call-to-action button visible for the reader. The button should pop-up from the rest of the composition so make it in a contrast color and use that color in the CTA only! If it’s a landing page you may forget about the navigation and any links that will let your visitor go out prom your page. You can’t afford to struggle on which CTA to focus on — Buy now or leave your email?No, you’re not allowed!
You may make your CTA sticky and make it follow the readers while scrolling — sorry but you have to.

eDrop serves great call to action – edrop.io
Nonone shoud be confused with where to click visitng Webflow (https://webflow.com/feature/interactions-v2)

#5 Prove it!

Make our product trustworthy, prove that it works and that is effective. Add testimonials or publication links. Provide study outcome or data that proves your product is better than the others.

Oculus ready PC’s — data confirms that their spend a lot of time do give you the best possibl experience (https://www.oculus.com/oculus-ready-pcs/)
Navdy raises their credibility with ease (http://navdy.com)

#6 Explain it!

Yahay! You visitor scrolled down — It’s time to read more details about what you’re trying to sell. Explain the idea of the product briefly. Inform your clients how it works and what benefits it can provide to the user. Add specifications, comparisons, bullet key values. Today’s consumer wants to feel informed about what you have to offer. The less time they spend hunting for information about the product and company, the better.
Don’t forget to serve it in an engaging way, animate, add illustrations or picture the feature — we don’t want it to be boring.

Lovely smart sex toy it a totaly new product on the market and it explains it’s values in a great way (http://ourlovely.com)
Google Pixel explains it’s advantages (https://madeby.google.com/intl/en_in/phone)

#7 Test it!

Prepare for some A/B tests, there are plenty of tools to prepare tests with ease like Optimizely, Kissmetrics or Unamo. Prepare variations for copy, naming, headings, CTA size, colors and placement, section orders and pricing.

#8 Spread it!!

Encourage people to share your page. Add social media buttons in order to make the sharing process easier. It will be easy and intuitive for the reader and it will definitely help you boost the popularity of the product.

Pay attention to the top of the page. Wen you’re at the bottom of Webflow Interactions page it gently asks you to share (https://webflow.com/feature/interactions-v2)

#9 Share it!

Finally — get some initial trafiic, publish it within every accessible place that you know your customer might be in. Do manual outreach to people that might be your potential customers. Ask for feedback from both experienced entrepreneurs, advisors, marketing specialist, designers and people that are not that familiar with technology. Ask your friends who are influencers and early adopters for help to share it. Go to Product Hunt, Betalist etc, spread the world!
It’s very important to install cookies pixels from Facebook, Adwords or Twitter to gather “browsers” for future remarketing or generating lookalikes. At the end try paid advertising with properly targeted groups on Facebook or Doubleclick.

There are many online sources that show how to design your page for conversion, that show also bad practices and ugly design. In product pages, especially physical we have to find a perfect ballance between pushing people to buy and building trust and awareness.

Got it? Good luck then!

Ping me on Tweeter @BZimny or leave a comment if you need any help

--

--

Bart Zimny
Thinking with VORM

Experience Design Director @digitalmckinsey | Former CEO at @VORM_lab | Building experiences in a blurring field of physical and digital world.