The battle for consumers’ attention is getting more and more intense. Companies are desperate to keep users on their websites, and it’s no surprise, since 55% of people tend to spend less than 15 seconds on average on a page they visit. Brands that sell their products or services online have to balance their product pages just right to make them dynamic and interesting yet not too overwhelming.

SaaS businesses are no different in this sense. But given that they’re offering specific services, there are some specific design rules they should stick to when building a product page. Let’s see what this means in more detail.

Make room for informative copy

First of all, you need to think about the product description. Where will it fit and how long should it be? The issue here is that you need to be informative, but too much info can overwhelm the users, prevent them from finding out what they actually want to know, and ultimately chase them away.

The only way to overcome this problem is to carefully categorize all this information, based on relevance. Namely, the most important features of a product or service should be mentioned above the fold. The copy you write here doesn’t have to incite instant conversions, because for now, the point is simply to grab users’ attention.

Below the fold, you’ll give all the additional info that could be of interest to the buyer or that would help you elaborate further on your service’s qualities. Use the opportunity to clarify your USP and explain why you’re different from your competition. Utilize titles to help people navigate through your copy and find out exactly what they want to know in no time.

Use screenshots

Now, if this article was about just any common product page, we’d advise you to employ several well-optimized high-quality images of the product and put them front and center. Obviously, you can’t take photos of software, but what SaaS companies can do is go for screenshots.

These screenshots can’t tell as much about software as an image can tell about a product, but you need to show your prospects what they can expect. In product pages, photos are usually above the fold, but that’s because the focus is often on the physical appearance of the product. But with SaaS, the focus is on its functionality and specific features, so it’s perfectly fine not to prioritize images.

Take Forms on Fire, for example. On one of their product pages, you can see that it’s a great tactic to display your screen several times just to give a quick preview of the software’s interface. However, the focus is unsurprisingly on other elements, such as features, price, discounts, social proof, and the demonstration video.

modeltheme-product-design-pages
Source: formsonfire.com

Utilize social proof

When it comes to product pages of absolutely any kind, social proof is vital. Namely, 91 percent of people read online reviews, while 84 percent believe them as much as they’d believe a personal recommendation. As a matter of fact, people tend to trust consumer reviews 12 times more than the product description created by the retailer.

If your product page doesn’t have any reviews or ratings, there’s a high chance consumers will leave it very quickly without even thinking of converting. You’ll have to put at least something above the fold, like a star-rating or some other simple-scale evaluation feature. You can also use the number of downloads or number of clients you’re servicing.

Moreover, the software is not a $2 T-shirt, and for some companies that use services from SaaS companies, it’s a big, long-term investment. Naturally, they’ll need more social proof. If possible, insert some testimonials by notable people in different industries that you’ve been working with. Make sure it’s below the fold so that it doesn’t stand in the way, but that whoever starts indecisively scrolling around the page can read about some authentic experiences from your customers.

Make CTA buttons clear and visible

Now we come to what’s probably the key part of the page – a call to action. If there’s any dilemma whether other design elements should be visible or not, there’s no such dilemma when it comes to CTA buttons. You need just a single CTA, or if there are multiple actions a user can perform, then you’ll need just one for each action. Too many buttons can also confuse potential customers or even make them suspicious.

You may think that this never happens and that every user will see the CTA button even if you don’t make it stand out. But there are numerous case studies suggesting that the position, color, and even the text written in the CTA can considerably influence your conversion rates. You have to make it visible, clear, and try to be very specific about which action will be triggered when the user presses the button.

Obviously, a CTA that will encourage people to buy your service is a must, but in the case of SaaS, you should think about some others as well. People usually want to see your software in action before spending any cash. CTA buttons that read things like “get a demo” or “take a free trial” should be as visible as possible. People who buy software often consider the lack of a trial period a deal-breaker, so make it clear that you offer one.

Rafflecopter, software that helps you manage giveaways, did this whole thing just right. The CTA is above the fold, visible yet not suspiciously flashy. It also specifies, in very few words, that you can try it for free and that there’s no credit card required, which can make all the difference between a future conversion and a missed chance.

modeltheme-product2-design-pages

Source: rafflecopter.com

Don’t hide your prices

Very similar rules can be applied to how and where you’ll display the price. Pricing should also take a prominent place above the fold and be easily distinguishable from its surrounding.

Simply, if you look like you’re trying to hide the price, people will just give up, regardless whether you do it because you’re expensive or because you’re careless. Price is a huge factor in purchasing decisions, and people don’t want to waste their time on your product page getting familiar with something they might not be able to afford.

Of course, there’s no harm in highlighting your lowest prices or discounts that you offer. That’s what Kissmetrics did, emphasizing the cost of their lowest-priced plan and putting it above the fold, adding just a sentence-long explanation about what they do. Anyone who thinks they can afford at least the cheapest plan can simply scroll down and find a lot of additional info that can help them make further decisions.

modeltheme-product3-design-pages

Source: kissmetrics.io

Final word: Stay consistent

The last message to remember is to stay consistent. This is important for practical reasons but also for strengthening your branding efforts.

Make sure that your colors and fonts remain constant and recognizable throughout the page, and compatible with the design of your website and other channels you use. This is a great way to round off everything you’ve done on your product page and make it more visually appealing. Consistency in the design symbolizes reliability, stability, and trustworthiness, and you should definitely encourage people to associate these qualities with your brand.

Leave a comment