GatsbyJS announces the 2021 Gatsby Agency of the Year: Read Announcement


A Guide to Designing a SaaS Pricing Page that Converts

High-growth SaaS organizations in 2021 offer a multitude of products and services at different prices. Once teams establish a SaaS pricing model, SaaS companies need to present this pricing model elaborately. Website visitors can find a SaaS companies pricing model on what is known as the SaaS pricing page.

Nov 26th, 20219 minutes

Eric Izazaga

Marketing Coordinator

A Guide to Designing a SaaS Pricing Page that Converts - Blog Post

Before companies can create a SaaS pricing page, they need to establish their pricing model. After the pricing model is determined, teams can design a page that drives website traffic and converts.

What is a SaaS pricing model?

The SaaS pricing model is a type of subscription customers pay to use a company’s products or services. Every SaaS company’s pricing model is different, with some offering premium packages and others breaking up their pricing into tiers - the latter is most common.

A SaaS company’s pricing model is always on its website. It’s typical for a company to dedicate an entire website page to break down its pricing tiers. And with pricing models continuously changing, having a pricing page that can be updated whenever is valuable for customers and the business.

What is a SaaS pricing page?

The SaaS pricing page houses all the information prospects and customers need to make guided decisions on what products and services they will purchase, plus the costs they expect to pay.

The easy part of the pricing page is building the SaaS pricing model. Companies know their product or service better than anyone else, therefore creating a flat rate or tiered pricing model is up to their discretion.

The challenge is extracting every ounce of information required to understand a SaaS pricing model and displaying it on a website page for people to understand. To tackle this challenge, SaaS teams must design a pricing page that answers every pricing question imaginable.

Another challenge is implementing user experience best practices to design a beautiful landing page that is eye-catching, credible, and actionable.

Key Elements of a SaaS Pricing Page

What makes a great SaaS pricing page? Here are key elements that get customers to act!

An eye-catching design layout

A SaaS pricing page isn’t like any other regular website page. It is a landing page designed to convert website visitors.

The goal of the page design is to attract customers with the main headline, revealing copy, and an actionable call to action button. With this in mind, design experts must put this all together to create a beautiful pricing page experience.

All the pricing options

Once the design layout of the pricing page is complete, the next stage is to take the SaaS pricing model and decide how this information will be nested into a pricing model component.

We mentioned earlier that it’s typical for SaaS companies to offer different pricing tiers. If this is the case, then designing a column component for each pricing tier is good practice.

Website visitors can assess each pricing tier and identify the type/name of the subscription, compare the price of each subscription, and determine the length of the subscription at the bare minimum.

In addition, each column should have a call to action button, as well as an option to learn more. The most common tiers are the free trial, a premium option, and an enterprise subscription, being the most expensive and with the most features.

Social proof from customers

Social proof provides website visitors with the credibility they so desperately need. Visitors don’t need to visit a third-party reviews website like G2 or Glassdoor to confirm the validity of the SaaS product or service.

Instead, the testimonials are in front of their eyes. It’s typical for a testimonial wall or carousel to appear on the pricing page. However, adding testimonials depends on the needs and intentions of the SaaS organization.

What is the SaaS pricing table?

A SaaS pricing table is a container for all the pricing information potential buyers need to understand the differences of each pricing option. The table strategically communicates all the pricing information for every product and service that a SaaS company offers.

The pricing table includes the types of subscriptions or pricing tiers, every single feature, the price of each plan, and any other important information worth disclosing to the customer. For a SaaS pricing table design to be effective, pricing information must be clear and should give customers the ability to compare plans without leaving the pricing page.

The most important component of a pricing page is the SaaS pricing table design. This table appears on every SaaS company’s website and is the single most source of truth for first-time buyers and existing customers interested in upgrading their current plan.

What are the components of the SaaS pricing table design?

All SaaS pricing tables must contain key design components that no designer should forget to add. Without the following design components, website visitors will be less likely to make a purchase.

List your pricing plan options

SaaS buyers want to see all pricing plans on the pricing page. SaaS companies should list each pricing plan option with the correct price for each.

SaaS buyers will look at the price before anything else. Design teams should call out the price of each plan without interfering with the pricing table design.

It’s common practice to start with the inexpensive pricing plan and work up to the most expensive plan. Because everyone is accustomed to reading left to right, the design of your SaaS pricing table should follow said structure.

Add the features available at each price point

After adding all pricing plans, SaaS teams must list the core features for each.

Typically, the SaaS pricing table contains the core features in list format for each pricing tier. SaaS buyers can quickly skim through the list of features for each option available. SaaS companies also add a component to the pricing table design that allows buyers to compare all pricing plans. 

The features are listed vertically in a column/row format, with the plans displayed in a row. Companies use an ‘X’ or checkmark to mark every feature for each pricing plan. The enterprise or most expensive pricing tier will have the most checkmarks since it comes with all the features.

Highlight the SaaS plan everyone buys

Although SaaS companies wish for buyers to purchase the most expensive plan, sometimes there isn’t a need for every feature. SaaS companies should have a recommended pricing tier that is either the most popular or offers the most value.

The recommended pricing tier should be the most popular offering - this is the pricing plan that has given you and your customers the most success since purchasing.

The pricing plan that SaaS companies choose to highlight shouldn’t be the most expensive. Instead, teams should consider highlighting the middle-tier option that offers the majority of the product or service features at a reasonable price.

Add benefits for each pricing plan

Examples of additional benefits include a money-back guarantee after X amount of days, a secure payment system, or a free trial before the start of the subscription.

Sometimes buyers would like to test out the product or service before committing to a long-term subscription. A money-back guarantee also goes a long way. These benefits show buyers that they won’t be married to the product after purchase if it doesn’t work out for them.

If this is the case, the SaaS company should take it as an opportunity to learn why the buyer decided against the product and improve the areas that need improvement so that future buyers don’t run into the same problems.

Add an FAQ section

Having a section for frequently asked questions (FAQ) shouldn’t be optional. If your SaaS product or service has been on the market for some time now, then you should have a list of the most common questions that sales or marketing people have received.

Having this information embedded in your SaaS pricing table gives potential buyers more clarity around the product or service and the pricing tiers.

The FAQ section is also an opportunity to help buyers learn more about specific areas of the product or service using blog content, downloadable assets, or any other marketing materials dedicated to answering any questions in detail.

SaaS Pricing Page Challenges

Working with all the pricing information for each pricing tier makes designing the user interface of a SaaS pricing page challenging. Three design challenges are common when building a SaaS pricing page.

1. Working with dense pricing information

SaaS organizations should refrain from removing any important pricing information from the final SaaS pricing table design. That’s why web designers are required to find strategic ways to unfold the pricing information to buyers in a memorable, consistent, and concise manner.

Having dense pricing information for each pricing tier means that a simple SaaS pricing table like the one displayed above will not suffice. Although working with dense pricing information is challenging, there is plenty of solutions SaaS organizations can consider. 

Having a drop-down module that displays additional information for a pricing tier is one solution. But teams should consider that it requires the user to click a call to action button to expand details.

Consider displaying all pricing information by creating a table listing every feature for each plan and using checkmarks to indicate if it is included. This features table can appear below the original pricing table.

2. Designing a great user experience for mobile

Working with dense pricing information is challenging when designing for multiple devices, especially mobile. The SaaS pricing page should appear on mobile identically to how it’s displayed on the desktop.

Working with all the nested information and fitting it onto a 16:9 screen ratio is the main challenge. But by using responsive design principles, teams can design a beautiful mobile user experience for their SaaS pricing page.

On mobile, not all the pricing information is displayed at first glance like it is on desktop. The screen size of mobile devices forces web designers to get creative and find ways to convince buyers to interact with call-to-action buttons to learn more about each pricing tier.

One way to approach the mobile design is to nest information for each pricing plan. SaaS teams must add a button below the final details for all pricing plans to encourage buyers to learn more about each tier. If the buyer interacts with the button, then a drop-down with more pricing information should appear.

Designing a SaaS pricing page for mobile requires web designers to create multiple variants. In this case, having mobile designs for the normal state, expanded state, and nested information is the best practice to lay out how mobile users will interact with the UI.

SaaS organizations want all information on the pricing page to ensure buyers are well informed on any device when considering a purchase. Following the best user experience practices will ensure SaaS teams are hitting on all marks.

3. Finding a SaaS creative team to execute

Creative teams that recommend SaaS organizations cut down on the pricing information should not be trusted. SaaS companies should instead find a creative team that can work with all SaaS pricing models to display all pricing plans neatly.

The best creative teams understand that a pricing page is a high-traffic website page for all SaaS organizations. These creative teams present multiple variations of a SaaS pricing table, create multiple variants of each pricing module design, and they follow responsive design best practices.

Webstacks’ creative team has designed many SaaS pricing pages for industry leaders. Learn more about our work by visiting our services page.

SaaS Pricing Page Examples

So far, you’ve learned the importance of a SaaS pricing page and the essential design components required to communicate the benefits of all pricing plans.

Now, let’s dive into some of the best SaaS pricing pages that we’ve had the pleasure of designing.

Optimizing Calendly’s Pricing Page for Mobile

Calendly is a scheduling platform that many SaaS companies turn to for their scheduling needs.

Like all SaaS companies, Calendly offers multiple pricing plans: basic, essentials, professional, teams, and enterprise. They offer buyers the option of billing monthly or annually. Calendly also breaks down its pricing tiers into categories, with different features listed under each category.

Calendly’s new layout for their pricing page houses all pricing information using a custom SaaS table and drop-down tables for each category available. 

Calendly’s high-traffic page needed a touch of responsive design. Calendly’s new layout for their pricing page on desktop houses all pricing information using a custom SaaS table and drop-down tables for each category available. The main challenge was working with Calendly’s nested pricing information and optimizing it for mobile.

We found the best approach was to minimize the effort needed by collapsing the panels by default on mobile. This allows someone to quickly understand all of Calendly's features and lets them decide which category to view first.

The Calendly team wished to test multiple variants. We created three different pricing page designs to test the performance of each. Calendly’s pricing page is nothing short of what a SaaS pricing page should accomplish.

See Everything You Get with UpKeep

Another SaaS pricing page that we recently launched was for UpKeep - an Asset Operations Management solution that gives operations teams the tools and information to run operations smoothly.

Like Calendly, UpKeep is a SaaS company offering customers different pricing tiers. Our team designed a custom SaaS table including all of UpKeep’s pricing tiers. Each column, or pricing component, has the dollar value plus core features included with each plan.

If the website visitor wishes to learn more about each pricing tier, they can use the table with all of UpKeep’s features to compare plans all on a single page. As the buyer scrolls through the table, the four pricing tiers hover above the fold so users can get a demo or make a purchase - talk about a great user experience!

UpKeep also offers additional features known as “add-ons.” These “add-ons” are products that buyers can add to their purchases. We included a section specifically for the “add-ons” so buyers can see the various features for each of the three “add-ons” offered.

The “add-ons” section includes the option for visitors to get a free demo. Because pricing pages are landing pages meant to drive conversions, having multiple calls to action buttons increases the opportunity to capture new leads. UpKeep’s pricing page does a great job of giving the buyer all the information they need to make a purchase.

Working with Privy’s Cost Calculator

The past SaaS pricing page that we’re showcasing is for the #1 sales application on Shopify App Store - Privy Marketing.

Like the pricing pages for Calendly and UpKeep, Privy’s also includes a pricing module that displays their three pricing tiers. Because Privy’s plans were not as dense as the previous examples, they added each core feature within each SaaS pricing tier.

It’s safe to say that Privy’s pricing page design was different. Privy wished to keep their cost calculator tool as the main component of their pricing page. Their cost calculation tool allows marketing buyers to calculate expenses by entering their number of email and SMS contacts.

After a buyer enters the number of total contacts, Privy recommends a pricing plan on the page. We made sure to call out the calculation tool for each of Privy’s pricing tiers. The final touch was a FAQ section to give visitors more confidence when selecting a plan.

Privy’s pricing page keeps website visitors engaged with one action they are prompted to take: to use the cost calculator. Keeping the cost calculator at the center of the SaaS pricing page design ensures that visitors will be more likely to interact with the tool.

Final Thoughts on SaaS Pricing Page Design

Every SaaS company must treat the pricing page like they would any other core website page.

Website visitors need all the information to make a well-informed buying decision while experiencing a painless user experience. The design of the pricing page is just as important as the pricing information.

If you’re interested in learning more about Webstacks’ creative services, visit our creative page and explore what we offer.


Webstacks Product Teams

Webstacks provides world-class product teams to help high-growth technology companies streamline their web operations, boost revenue, and substentially elevate the their web presence.

Get started