Do you fully utilize the potential of your SaaS pricing page? You’d be surprised to know how significant - and how often underestimated - is its influence on the conversion rate and, ultimately, the ROI of your business. You’d be even more surprised to discover the capacity of UX design to optimize your pricing strategy and improve the pricing page in a way that unmistakably leads a potential customer to the purchasing decision.
This article highlights the fundamentals of a SaaS pricing page design. But more importantly, it provides you with a big set of concrete and practical UX/UI design techniques tailored exactly for a pricing page and based on best practices of SaaS trendsetters. Every method is supported with examples and step-by-step guidance on the application. If you apply even part of them you will definitely boost the sales of your product. Try it and you will see for yourself!
The UX value of a pricing page is often underestimated due to its apparently clear-cut functional role. It is believed that a customer appears at this place when he or she has already made up their mind about using a product.
So, if they can afford to make a purchase at a set price, the deal goes through. If not, nothing can be done here. As to the product's necessity, quality, and specific value for the personal needs and goals of a user, we think this persuasive job is done earlier, - and by other aspects of the onboarding process.
This is the normal way we can think about the destination of a pricing page. However, the difference between the customer's journey in UX design and a sales funnel in classical marketing consists in its non-linear, multisession nature. This means, no one can know for sure when a particular customer shows up on a pricing page.
Some users concerned with the cost more than with the quality of a product may go there immediately after getting on the landing page. They would like to make sure it complies with their financial comfort zone.
Others may get to the pricing page after weeks, months, or even years of using free trial periods or a freemium plan, being curious about what else they can get with premium plan offers;
And only a part of the users can discover the pricing page as intended by the flow of the onboarding process, establishing some kind of empathic connection with your platform in advance.
So, what's the conclusion from the above ambiguity?
If no rule can account for all contingencies, we can give up and make a pricing page purely informative and functional. No particular hopes are pinned on its conversion potential.
Or, we can go ahead, and design it in a way that integrates the entire customer's journey in a condensed form.
Such a layout would include general background information, value reminders, all-around support, and subtle retention strategies in a single package. Then, wherever and whenever a user gets to this page, it will work in the way it should – leading to a purchasing decision, with a financial receipt as evidence.
This article will explain how to do this, exactly.
Part I. Top 3 SaaS Pricing Page Optimization Tricks
When it comes to discussing the optimization of a pricing page, a reader is usually instructed on specific design solutions and UI/UX practices applicable for this purpose.
However, some fundamental concerns need to be addressed well in advance to start the design/redesign process. If you neglect these issues or do not find relevant answers to them, all the hands-on techniques can come in vain and just waste the resources.
So, put aside your easels and a paint box for a while, and pay attention to the following pillars.
Defining the effective pricing strategy
You have to get a clear idea about the pricing models for your SaaS prior to making a single touch on your pricing page design. This is important because different monetization approaches require completely different UX solutions for making a layout the most appealing and conversion-effective.
For example, if you have both monthly billing and annual options, you can spotlight how much a client would save with a one-year purchase. Or, with a pay-as-you-go paradigm needs to preface your plans with some sort of a demo or a FAQ section, briefly introducing each feature. And so on.
Comprehensive market and user research
Designing a pricing page in a really compelling way means including only those features/services/options that your target users need and want to see the most.
Moreover, it means articulating these issues exactly in the form a user can clearly understand and emotionally endorse.
In addition, you can decide how to build a hierarchy of features, which of them should come first, and what would be most appreciated by different groups varying in their purchasing power.
But you can do nothing of that if you did not investigate sociodemographic profiles and the needs of your user inside and out.
Iterative usability studies
With all due respect to the guiding principles of UX design, when it comes to a particular SaaS project, small details matter.
How long should this page be? Is it necessary to include a FAQ section if a live support option is available? What about the size and colors of a CTA button? What number of features in a preview form is acceptable before it becomes excessive? The number of such context- and context-specific questions is infinite.
Therefore you need to test. Of course, you may learn the theory of SaaS billing best practices, or google the best pricing pages on the Web, but such research will be incomplete and inaccurate. Only your own clients are the best indicators to say what is efficient, and what does not work so well in their particular case.
This is what the Groove sales team did. They progressively increased the conversion rate from 1,11% at the beginning, to 1.17% after the first testing and redesign, and to 4,15% when the next test was applied and all the lessons learned. As to the amazing results of the testing-driven pricing page upgrade by Hubspot, we already discussed it in our prime guide on the UX design for SaaS.
Part II. What makes the best SaaS pricing page design?
Now, when we have discussed the seminal issues underlying the entire process of a pricing page design, it is time to talk about specific surgical methods and techniques of its production.
The number of price offers/plans
Option 1: Don't overload it with too many plans if you can
In the vast majority of credible resources on this topic on the Web, you will find a recommendation to use no more than 3-4 pricing tiers for the sake of marketing effectiveness.
In the already mentioned case study of Groove, reducing the number of offers from 7 to 3 was one of the key changes that increased the conversion rate 4,5 times. The more simple and minimalistic the page is, the easier the sales process is and the fewer friction points a potential client will have at this crucial point of buying decision-making.
It is not hence surprising that some successful SaaS platforms use even fewer plans to deliver.
Option 2: If you cannot cut down, then frame and structure your multiple offerings within smart interactive frameworks
Hubspot is a very insightful example of how this can be done properly.
The length of feature lists
This can often be a painful and frustrating issue in the design process.
On the one hand, you want to inform a potential client about all the features, services, and benefits they will get for their money. Common sense also suggests that the more filled the basket is, the more pleased and satisfied is a person paying its price.
Yet on the other hand, if that list goes beyond some magic length determined by the cognitive capacity and emotional predisposition of a particular client, most of the users will skip reading for sure.
Neglect on this issue jeopardizes your conversion and potentially increases the churn rate.
Option 1: split lists
This is the most common approach to tackling this problem, practiced by many holistic SaaS platforms.
In such a case, the most essential and commercially impactful services and features are briefly enumerated underneath the price for each plan, while the rest of the items are hidden within a special tab. It can be titled as “see all features”, “complete feature list”, etc.
These lists can reach a truly unbelievable length. But the good thing about them is that it is the client who decides whether to read it and how far. Such unconstrained UX makes no negative impact on the conversion rate.
Option 2: “Everything +”
Another smart solution is to write only new features for each next offer. In this way, you avoid any repetition and simply mention that a more advanced plan includes all the opportunities of lower plans by default.
However, such an apparently smart solution has its caveats. For example, in this CRM platform, implementation efficiency is dubious. It made the lists of more advanced offers visually look shorter compared to the basic plan. In such a way, a user can get a subconscious perception that the value of more expensive plans is below the asking price.
Option 3: the most essential everything
If you want to do without a split list and at the same time prevent misperception of the plans’ value by users, the way is just to select the most important features and repeat them all for each case.
In this pricing page example, the team acted exactly that way, by restating the same items for each next plan.
Product designers often resort to such an apparently wasteful replication, because they know how human psychology works. To avoid the perception of scarcity that can forestall further conscious reading, they introduce full lists and hence show that a higher price is paid for a bigger amount of value.
Option 4: “Everything +” in a proper hierarchy
Some platforms demonstrate an even smarter solution when features are selected and organized in a way that avoids duplication and still makes each next list look longer.
Option 5: a spreadsheet
Finally, as an alternative to all the solutions above, you can create a grid with all possible features and services as qualifiers, and then mark their availability in the fields underneath each price offers with ticks and/or crosses. This can be a good choice if you have a complex product that needs all its aspects to be highlighted in detail.
This solution would definitely make the life of your developer team easier because it infinitely simplifies the procedure of plans modification and adding new features thereafter.
Therefore such a representation is not mainstream among the world-famous SaaS platforms.
Presentation of prices
Tip 1: charm prices
Everybody in sales is out to talk about the magic power of ending prices with 9 or 99 as allegedly making an offer look cheaper than it is.
However, more recent studies showed that charm prices are effective only for low-income clients seeking to save every penny, or when customers of enterprise-level services have limited information and no experience with a particular service/product. With a more qualified and conscious active user, that trick won't work. Moreover, high-end buyers give preference to round-pound prices, as subconsciously associated with prestige and high quality.
So, it is no wonder that many projects that are savvy at pricing optimization and know how to deal with UX, e.g. Slack, Hubspot, or Cloudflare, to mention a few, don't bother with those charming figures – and thrive nonetheless.
But, for example, some others like Square or Dropbox apply a more cunning mixed approach. They use 9-ended values only for low-cost subscription plans targeting clients with small purchasing power.
So, you can play with this technique if you like. But before you do, better define the market niche and research your user to receive an intended outcome.
Anyway, no need to care too much about this lifehack because it does not make the weather a lot. There are more important things to consider, such as basic heuristics and the psychological needs of users.
Tip 2: eloquent demonstration of gains
If the pricing strategy allows for any savings depending on loyalty issues, such as the time and duration of the subscription, referral programs, etc, then clearly indicate and visually emphasize them. This will make a potential customer realize the advantage from the first second.
Tip 3: range your subscription packages in the reverse order (from higher to lower)
This technique is based on the so-called anchoring effect. It is a psychological tendency to use the first piece of information as a reference point for perception, comparison, analysis, and eventually decision-making within the entire process.
This means that if the first price is the highest, every new figure in a row will be subconsciously considered as cheap regardless of its objective value on the market. And on the contrary, if you start with freemium or a basic $10 offer, all other plans can be perceived as unjustifiably expensive.
Interestingly enough, if you take the trouble to investigate the best SaaS pricing pages of the market trendsetters (as we did), you will discover that most of them use a standard hierarchy from lowest to highest price.
However, we cannot but mention this technique as its efficiency was evidenced by experiments and scholarly research. That is why, feel free to use it, but keep in mind that this mental game will never be of crucial importance for serious users making the backbone of your future loyal clients' base.
Tip 4: add multiple currencies and/or currency conversion tools to make the process more comfortable for your non-U.S. customers
Although the billing mechanism will convert currencies anyway, a user would feel more safe and confident when they can pay with the currency their card is initialized for. Awareness that no extra conversion fees are charged is encouraging as well.
Tip 5: provide potential customers with an opportunity to calculate and/or customize the plan based on their specific needs and preferences
This can inspire a customer to explore the product and discover its key features and opportunities unwittingly, even without a conscious intention to be enlightened about the issue. By trying to make a customized quote in the most saving and gainful manner, a user can learn more than from all the introductory materials and tips you have placed on the landing page.
An opportunity to be a master of choice in the purchase process also gives a client a sense of freedom and enhances trust in the company. Moreover, for some products with plentiful product information, such a practice is the only way to meet the needs of every customer fully.
Presentation of plans
Tip: spotlight the preferred option
This practice is beneficial by all accounts.
First, it reduces the friction points and time for decision-making for potential buyers tending to rely on the majority view and/or are too busy to spend time to make a deliberate choice.
Second, if the design process was preceded by good research, you can highlight a plan that is most relevant to both your business objectives and your target user’s needs.
Last but not least, the efficiency of visually allocating the recommended plan is evidenced by several credible studies. For example, the research by CXL Institute proved that this technique both reduces the time for making a purchasing decision and increases the overall conversion ratio.
However, this method won’t work if you highlight the most expensive and/or poorly conceived plan. That is why it should go along with proper user research.
Elaborating plan titles
Tip 1: be creative but not too much
Most often, you may come across pretty standardized names for SaaS price offers, such as “starter”, “standard” “pro”, “premium”, “business”, “enterprise”, and so on in that spirit.
On the one hand, it is a good practice in line with the principle of simplicity and intuitive design. No need to invent anything when working cliches are in place and a customer is used to them.
However, if your product allows for it, you can add some life and persuasive power to an interface to make titles a bit more interesting and closely convey the essence of your services.
Tip 2: add action
Any relevant appeals to action are always a good practice throughout the customer’s journey, as they subconsciously instill the resolution of a client to make a purchasing decision. Making titles of your plans in the imperative mood is a smart way to do this subtly and unobtrusively.
Tip 3: microcopy
If you include a brief one-sentence description underneath each title, potential customers can get a clearer idea of which plan would be the best for their personal needs.
In contrast to specific features/services listed beneath the price, such a description is more general and usually refers to the professional and sociodemographic group of a potential user. In other words, it creates an overall image of a customer that is best suited for a plan.
Obviously, this method is effective only if it is based on developing buyer personas and not just created of thin air.
A call-to-action button deserves particular attention because of its symbolic make-or-break role both for the pricing page and the entire customer journey.
By clicking on this element, a customer actually makes a commercially meaningful gesture in recognition of your product.
Tip 1: make it bright and eye-catching
CTA on the pricing page has to be so attractive that a user would unwittingly desire to use it. Just take a look at the two following screenshots and answer honestly, which one makes you more inclined to press the button:
- this bleak and almost invisible pattern,
or these tasty, saturated section-long buttons looking like packs of fresh-squeezed beet juice?
Of course, you may find the unobtrusive and very modest design of CTA buttons in many good SaaS projects. The reasons may be different, from compliance with a brand identity to corporate culture issues.
However, bright and eye-catching will never be redundant on your pricing page. That’s for sure.
Tip 2: make it engaging
Just as with titles of plans, you can either use standard forms “get started” or “sign up”, or devote a bit more of your creative energy to find more captivating formulas.
At the very least, you can add the words “now” and “free”, as time- and cost-saving allusions. This is what the best SaaS platforms often implement in their practice.
Or, you may even experiment with the magic of some non-standard statements expressing the uniqueness of your brand and/or making each of the buttons distinct.
Tip 1: Apply a color scheme pleasant to look at
Aesthetic appeal is always highly desirable for every stage and any piece of UI design. Do you think a pricing page is an exception? On the contrary: the visual pleasantness of this space is as important as for the homepage.
This is not surprising: a customer makes an important decision here. The more emotionally comfortable the environment is, the more likely is a needed outcome.
Therefore, choose a friendly and approachable color palette in line with your brand’s visual guidelines, - and create the beautiful pricing for your product, not just precise and efficient. Depending on your SaaS specifics, it can convey calmness, confidence, fun, energy, and other moods of success.
Tip 2: include emotionally charged elements
Along with enjoyable colors, lovely animated illustrations also work well to set even the most frustrated and bored client in a good mood. A pricing page deals with numbers and formal statements in the first place, so a bit of fun is a very good solution to make it warmer and more humane.
Tip 3: give it enough space to breathe
This is a fundamental of the modern UI design, but it makes sense to remind about it with respect to the successful pricing, for reasons that were already mentioned throughout the article:
- amidst the process of important and financially charging decision making, additional space makes a user feel less constrained and more comfortable;
- with grids, tables, and a big amount of numerical and formal data, sufficient spacing balances the cognitive load and smoothes frictions in visual navigation between elements.
One word: must-have.
The importance of this issue is so critical that it is no exaggeration to say you can divide your expected sales rate by ten times if a user has no instruction and support at the purchase stage.
Along with purely technical issues (when something is just unclear in price offers), this is the point where doubts, fears, and hesitations reach their apogee. Without a helping hand lent immediately, they will do their destructive job.
Tip 1: a live chat
With such an option at hand, a customer can address any questions to a specialist within a few minutes. This includes very specific personal challenges and problems that cannot be found in educational materials. A well-trained and friendly client manager can also make a profound persuasive influence on those users that would never make up their minds without external authority.
Tip 2: FAQ section
Will you go to delve into FAQ if you can chat with a specialist or request a phone call within a minute’s reach?
Still, you need a well-designed FAQ section with high-quality content.
First, it is a source of more in-depth knowledge where a user can go after getting a brief instruction from a support team. A client manager can use this data as well for making more comprehensive advice.
Second, it is a matter of politeness. Well-thought-out questions and answers demonstrate that you respect your target customers, and spend time and energy to understand their possible requests.
Tip 3: microcopy… again
It is also nice to use a piece of microcopy and popup tips right in the main section of a pricing page. This especially matters in the case of customizable plans based on feature differentiation that need special instruction on how to use them.
For example, if you try to visit the pricing page of Amazon Cloud Services, you will not get immediate access to the price offers. Any visitor will first have to read through short instructive pieces of information, and only then proceed to the plans.
Tip 1: value proposition and supplementary taglines
In modern SaaS, a value-based pricing strategy is a must. It is not necessary to restate your key message of value at every turn, but you should highlight some of its aspects and emphasize the key benefits a user will get after purchasing a product.
As in this example, the method can be especially efficient if combined with other strategies such as demonstration of savings and funny illustrations.
Tip 2: testimonials
Yes, it is trendy to include a social proof section on many SaaS pricing pages. Although it looks like the last place that needs such sort of things, designers often replicate this element here to be on the safe side.
It may make an encouraging and soothing effect at the moment of final hesitations or a sudden doubt often coming at the last minute of the decision-making process.
Confident SaaS giants like Adobe, Salesforce, or Atlassian Corporation usually don't use this technique. But it can be helpful for young ambitious projects on the rise to their fame.
These are the main lesson learned from our little adventure among the best SaaS pricing page examples and practices:
- do market/user research and polish your pricing strategy before starting the pricing page design;
- apply the science of human psychology to make your prices and services perceived in line with your business strategy;
- use UX design techniques to ensure that your page visitor feels like a guest at a billionaire’s house - i.e. receiving incomparably more than giving;
- use UI design tools to set a user in a purchasing mood by evoking the thrill of discovery, the inspiration of new opportunities, and the satisfaction of a good bargain;
- most importantly, pull all the parts of the design process together to remove any friction points and make a purchasing experience smooth, quick, and non-exhaustive.
We hope now you are fully convinced that a pricing page has boundless potential for conversion optimization and sales growth. But you have to consider the science of UX/UI design in its entirety, leaving nothing out.
This is the only way, indeed.
Stay in touch, in the next article we will talk about another key driver of your SaaS’ commercial success - SaaS video marketing.