You may or may not have a pricing page or pricing table on your website.
Having one helps people to know where to navigate to when they want to find out more about your offers.
There’s no hard and fast rule that you must share your pricing on your pricing page. Either way, you must have a reason to do so for the good of your company.
When it comes to graphic design services, the traditional sales process starts with prospects requesting a quote, where the pricing is a mystery until the agency knows what the customer wants.
At MeetAnders, our goal is to share the pricing right from the get-go, be as transparent and upfront as possible, so that customers know exactly what budget they have to set aside for design services.
Drift, however, has a pricing page but doesn’t share the pricing. If you click the CTA you’d be brought to their chatbot. Is this one of their strategies? Maybe.
Not everyone must share the price on the pricing page. Jason M. Lemkin of EchoSign (acquired by Adobe, now called Adobe Sign) says on Quora “I love transparent pricing. But I think as you get bigger, you’ll gonna end up with “Call Me”. Or some variant thereof. And you can still be just as customer-centric as you are today.”
This guide is not to persuade you to share pricing but, if you have a pricing page on your website or intend to have one, the design is as important as your pricing strategy, copy and content.
Why optimize your pricing table design?
Neil Patel says in his blog post: “It’s not just your pricing strategy that matters, but also the design of the page.”
The copy and your offers are important, your design seals the deal.
If your website is getting consistent traffic and people are visiting your pricing page, this means there is some interest in your product or service.
Let’s face it, pricing is one of the most important decision factors for all customers.
Optimized pricing page design formula
A well-designed pricing page and pricing table helps with the following:
- Communicates the right message
- Brings across information clearly
- Attracts the ideal audience
- Leads the reader’s eyes to the right place to take action
- Make more sales
- Grow your brand
Drift’s pricing table teardown
This is Drift’s current pricing table:
Drift’s pricing page can be made better by using colour contrasts, rather than keeping the whole table white and background grey.
Having the same colour for all CTAs is fine, but based on marketing psychology, people don’t want to make too much effort figuring things out.
Make them do that and they will say “no” and leave.
The magic of design is, you can create ways to lead people to stay and take action, and you don’t need a big budget for that.
First, let’s break it down into sections and do a teardown of each section.
Here’s the first section:
The title font is great, bold and clear. This is important to draw attention to visitors to read.
There’s some space around the header “Your new revenue engine is waiting for you.”. This helps to give eyes some breathing space to read the next line.
A box helps to make the CTA more obvious, to show this is something they wish to highlight to the readers. But it’s a bit too subtle.
What I’ve done next is to redesign this section to help bring out the message in a visual way. The aim is to help readers know what to expect with only a glimpse of the image.
The image has to represent the message.
How to design pricing page to increase conversions
- Make space
- Add a real-life or working visual
- Add a visual divider
There’s no need for too much, but it has to be just right for the reader’s eyes to take a break from the earlier content before scrolling for more.
Too much space may lead readers to feel tired scrolling too much.
Too little space and your content may be too cramped, causing the readers to feel fatigued and leave the page early.
Create space with discretion, and have someone test your pricing page for you.
The second way to improve this section is to add a graphic, image or screenshot of the real thing that’s relevant to the CTA message.
All the text has been moved to one side and the visual is plastered on the other side.
CTA is clearly placed along where your eyes will naturally fall upon after reading the text.
Next, notice the light grey background that cuts the CTA into half underlying it?
This is a visual divider to lead readers to pay attention to the messages you want them to pick up easily as they scan through the page.
This is effective with the help of colour contrast to separate one section from the other.
The colours you choose will depend on various factors such as:
- Your brand guide – is the colour part of your brand style?
- Colour psychology – this is based on science and research
- Provide colour contrast – a combination that is comfortable for your audience
Here’s the second section:
There’s a lot of text on the table with similar font styles that there’s no clear differentiation of the plans.
If we want potential customers to stay and pick the best plan to start, the only way is to make it easy for them.
With this design, the only way for anyone to know which plan is best for them is to read every text on every plan.
Yes, they have to read the copy anyway, but what if you make it more obvious for them to read what you want them to buy first?
Every website has less than five seconds to capture the reader’s attention.
You can’t let them slip by without them knowing your best product plan.
Lastly, all features in each column of the table look the same across the page.
Something has to be done to bring the reader’s attention to the features.
In order to improve these, I’ve redesigned this second section. See below for more.
How to design pricing page to increase conversions
- Help readers make the best choice by highlighting one of the plans
- Slight difference in colour tone or shade allows a clear break of sub-sections, makes it more pleasing to read
- Bright checkmarks to bring more attention to each feature
Besides copy, the best way to bring the reader’s attention to your most important message, plan, product or CTA is to design the copy such that they won’t miss it.
In Drift’s pricing table example, the original version has all 3 plans placed in the same coloured columns of the same size.
Without any distinct differences among them, nothing will stop me from scrolling away or leaving the page, unless by a stroke of luck my eyes happened to come across words that mean something to me.
That’s because people don’t read your content. They scan it, picking only the content that stand out. Based on Nielsen Norman Group and research in tracking eye movements of people reading online content, people scan through content in an F-shape pattern.
What does this mean? If you do not make a conscious effort to design your pricing page to direct readers to the most relevant and impactful information, they will take the path that requires the least effort and resistance. That would be the top left side of every page.
This also means a lot of your content, though helpful will not be read at all.
In the case of a pricing table, the best way is to pick out one of your best plans and design it to look different from the rest.
Applying this to Drift’s pricing table design, I’ve highlighted the “Advanced” plan in the middle with colours different from the “Premium” and “Enterprise” plans.
This immediately puts itself on a different position that captures reader’s attention easily.
In that column, there are two colour tones, one black and one blue, that’s to indicate they are showing different content. This allows the readers to know they will have to read both to understand the plan better.
Next, the features in the list should have icons to allow each point to stand out. Without the bright checkmarks, all points look like they are in one chunk which leads people to look at them as one big paragraph, dismissing all the good values the plan will bring them.
Drift's new pricing page table
Putting both sections together, this is what you get:
