Trends in Pricing Page Design and Layout
Published October 28th, 2009 in DesignPricing pages are very common for sites of web apps, web hosting and other types of services. These pages are critical to the success of the company because they will have a significant influence on the visitors who are trying to make a buying decision. Pricing pages typically give the necessary details regarding the various plans and options, and they encourage visitors to take action.
In this post we’ll look at a number of trends in pricing page design, along with several examples for each.
Emphasis on One Option:
Most of the pricing pages that we are looking at in this post include some sort of table or chart that shows the various options that are available for purchase. Obviously, this is helpful for buyers to be able to compare their options and determine which is the best choice for them. However, sometimes having too many possible choices can actually make things more difficult. Some pricing pages are using an emphasis on one option to help it stand out to visitors. In some cases it is listed as the most popular or best value, and in other cases it is simply emphasized in some way.
Aside from attempting to make the decision easier for visitors, emphasis also gives the designer the ability to control which of the options will get the most attention from visitors. In some cases it is used on the most expensive option, but in many cases it is not. Let’s look at some examples.
Crazy Egg emphasizes their basic plan (the lowest-priced option) by using a green background color compared the the gray background of the other plans, plus the column background is also a little bit larger.
Highrise offers five different plans that users can choose from, but the Plus plan is marked as the most popular and is emphasized by a larger sized box, a slightly different background color, and a drop shadow that causes it to appear as if it is on top of the other options.
Media Temple uses a simple ribbon that says “best value” to its (dv) RAGE server.
TypePad has four different plans to choose from, but the Pro plan is emphasized. In addition to just making this plan stand out visually, they also have a discount available for the Pro plan to give it further emphasis.
FormSpring uses color and size to help the Professional plan to stand out. Also, they have listed it as their most popular plan.
Pulse uses a colored background and a green border to emphasize their standard plan.
Onehub emphasizes their Team plan by using a subtle change in background color and button color. Additionally, it is starred and labeled as the most popular plan.
Volusion uses a “most popular” sticker, change in background color, and a higher tab to allow the Gold package to stand out.
Multiple Colors for Various Options
Color can be used very effectively to make things stand out, and it can also be used to distinguish various items/options. Some pricing pages use different colors for each plan to help separate them visually and to give some added visual appeal to the page.
Wufoo offers five different plans to choose from, and on the pricing page each option features a different color.
Shopify uses some subtle color changes on the various plans to help them stand out from one another. The Business plan is also emphasized by labeling it as the most popular.
The pricing page for LightCMS uses a different color for each of the six plans that they have to choose from.
Freckle offers four different plans. Each one has a unique color on the pricing page.
Emphasis on Sign Up Link
Some pricing pages use a sign up link or button that stands out from the rest of the page in some way. Of course, this is done with the intent of capturing the attention of visitors and encouraging them to take action and sign up for something. Some companies use this method to encourage signups for a free plan or trial just get to people to try it out, while others use the emphasis to encourage signups for their paid plans. Here are some examples.
The Resumator uses a large sign up button below the name of each plan that is available.
FreshBooks uses a green arrow and a large button that says “Get Started with a FREE Account!” the button is located at the bottom of the table that displays the prices and features.
Cobblestone uses a large banner graphic that is displayed above the plans and pricing to encourage signups. The enticement is provided by offering the opportunity to lock in to low prices during the beta launch.
Free Account Options, or Free Trial
A number of companies have chosen to offer limited free accounts from their pricing page to encourage customers to give the service a try. This also makes it possible for customers who only have a need for very basic features and limited quantities to use without the need to pay. Here we will see some examples of pricing pages that promote free accounts.
MailChimp has a free plan in addition to their five paid plans.
Campaign Monitor’s pricing page is different than most that are shown here, but they do offer a free plan on the page and they use buttons to encourage visitors to sign up for the free account.
Six Central offers a choice of two plans, including a free one.
Polldaddy offers three different types of accounts, including a free one.
Backboard doesn’t offer a permanently free account, but two of their plans come with a 14-day free trial, and this is emphasized on the pricing page.
Feature Listing
Most of the pricing pages that you have seen throughout this post have some sort of feature listing. In some cases the pricing page may only list basic features, but these pages are examples of though that use extensive lists of features and details for the various options or plans.
Expression Engine has a detailed table on its pricing page that shows the differences between each plan.
Invoice Machine has four different plans and a list of features for each.
Big Cartel shows the difference between each plan through a table that compares the features of each.
WiredTree lists the details of its various web hosting plans on the pricing page.
Proof HQ has eight different plans to choose from and they use a large table to list the features and details of each plan for comparison.
For more design inspiration please see:
26 Responses to “Trends in Pricing Page Design and Layout”
Excellent timing again! We’re in the middle of building our pricing tables at present for our new site. Thanks
Odd how MediaTemple’s ‘best value’ plan is actually not. It is double the price of the Base, with double the space and RAM, but only 50% more traffic allowance. The Base is in fact the best value.
A great collection – all inspiration welcome.
Although MediaTemple confuses the actual info it is probably the cleanest and easiest to follow in my opin.
thanks for this great post.
Great list. Bookmarked.
Thanks for this great post
Great list. Bookmarked.
Shopify prices are delicious!
Too many choices may lead the customer to look elsewhere. I would not offer more than 3 options.
Love this!
I especially like the lack of critique. Rather than say “I like this better” and “I don’t like this”, you give a general commentary on pricing pages, and give enough examples to let us make up our own minds.
After all, why tell your point of view if you can show the reader theirs?
~Graham
Bamm. That’s a lofs of info in just one post. Thank you for all these screen shots.
Pricing pages are perhaps one of the most understated visual elements of design. This is ironic as they are one of the central spaces from which revenue is generated. I personally love Expression Engine’s pricing scheme. It’s clear, conscise and easy to read.
Awesome post.
Didn’t mention dreamhost.com.
I have been using them since 2004 for various projects with virtually no problems. They have a great selection of one click installs (wordpress, joomla, zencart) and seem to be improving all the time.
Funny, we’ve been thinking about setting a up a pricing page for clients but our work is very custom and we charge more than the above do. We’re worth the $ because we do more than just a site, we build out a marketing plan first and then a site based on it but it’s hard to compete when potential client see out 5,000 – $10,000 rage and they see one of these that only charge $699. What often happens is the buy the $699 site and in a year come back to use and have us build a new site for them. I’m curious to see if others have that experience.
great thanks
first one is the best
It’s funny how we sometimes overlook the site design of other industries, or page layouts…these are awesome inspiration, lovely color schemes..
@Melody : really i have never seen so many good designs for Pricing Pages … really awesome.
Now this is *very* interesting …. thanks for sharing this. I was particularly interested to see how the designers guide the visitor towards a ‘preferred’ option/pricing.
thanks …
Trackbacks