It is quite often seen that online products and services are offered as a number of plans to give potential customers options to choose from. In many cases it is about letting starters in at a very low cost while still having on opportunity for selling up at a later stage. While effective prizing tables are critical to an online business they are a challenge to get right for designers and usability experts. It is important to keep them simple and easy to understand, but at the same time the business need to differentiate between features and prices of different products and services. This article will give you an overview of some really great looking and highly effective pricing and comparison tables and best practice for designing your own. I hope this will be great inspiration for designers and business owners working on creating the optimal page for selling multiple plans. Keep in mind that these pages often – if not always should work as landing pages for your product. This means that, besides the pricing table, several other aspects must be taking into account – like highlighting key customers, market reviews guarantees offered etc.

Advertisement

Make it simple for visitors to make a decision

The sign-up page has one main purpose – call to action and convert a visitor into a sale. To do this it must help visitor to choose the right plan them. While it is tempting to list all feature to make your product look awesome it may not be the right thing to do. Lengthy and complex tables can be really hard to scan and may confuse. Most people can only absorb  limited amount of information in a product scan situation and if the page is too loaded key features may be overseen. Choosing few key features that convert well to sale is the best strategy. One of the best ways to figure out what works is to use A/B Testing of several different sign-up page designs. A good and free product for this is Google Website Optimizer. You may save the details and create a page for each plan where visitors interested in a specific plan can learn more. Let’s take a look at some examples.

MemberWing – a wordpress plugin vendor has one of the most heavily packed sign up pages I have been able to find (cut it off to make it fit here). The amount of features is impressive but it is really hard to get an overview. You may be new to this type of product and there is a significant a risk you will be overwhelmed. It is good that the prices and product names are placed both at the top and the bottom, but when you are in the middle you can’t see them.

Formstack have a pricing table with a great design that fits well into the site. It is really short highlighting only six features of each product. Instead of adding all features to the table they are listed on a separate page. The line below the table also list key functional features that all plans include which is a good way to keep the table short. Highlighting the most popular plan also makes the table look more dynamic and helps visitors instantly find the plan most people prefer. There are also two guaranties on the page – get started right now and get money back if not satisfied. The large and red sign up button is designed for high conversion and is seen quite often, but it is an important element for making the pricing table convert well. Another thing to notice is the table layout. In this case the table columns have no space between them. This makes it easier to compare the individual features fast and it takes up minimal space on the page.

SquareSpace use a pricing table where the plans are not well separated. It is generally a good idea to have a line between each plan or use different colors. They use the same technique as Formstack having a horizontal area with features included in all plans, however it is squeezed in before the table ends and the features belonging to the plans is somehow disconnected. The list of features below the Business and Community plan also gets a bit long. To pick a plan visitors have to click the icons or the price. This is not intuitive and from a usability / conversion point of view a big fat button with a fresh color would really make a difference.

crazyegg is another example of a simple and easy to read prizing table. Pay attention to the way each plan is colored and separated from the others using a white border. Another great effect is the gradient background used on each element. It is a good way to make them stand out while making it obvious that they are part of the plan. This is an excellent table and you also see the get started fast and money back guaranties on this page.

wufoo use colors to make the plans different. Each plan have its own color and further there is a slight change in the tone of the background changed on every second plan.

notable

Pricing plans should communicate differences, not similarities

Clearly a pricing plan is used to give user a fast overview of what the differences between the individual plans are. So including elements having the same value for all plans in the table is not a good idea unless it can still be a short and concise listing. Listing features included in all plans makes it a feature listing and not a highly converting pricing table. If it is important to communicate the features it may be an option to have them on one line as we saw with Formstack.

Shopify – is an example of a really good looking pricing table with nice colors and clear separation of the plans in the design. However you may have seen that the rows Set up fee, Bandwidth, Custom Domains and SSL Checkout are identical for all plans. Doing this also gives the impression that all features have been listed and it may not be the case. The Set up fee is repeated above and below the table and could have been left out.

Basecamp have a pricing table with limited focus on similarities and the plan overview is much simpler to scan. Enhanced security is clearly a key statement for all plans and have been added even though it is the same. One of the great design elements of this table is the way the differenced have been highlighted. This helps the visitor scan the different options faster. Basecamp also included brands of key customers and a review just below the table.

Make the price stand out

Since it is a pricing table and price is the first most visitors will look for it is not a good idea to put it at the bottom of your table below the fold. The price should always be at the top and highlighted with use of font size and/or color. It is also a good idea to sort pricing plans by price, from highest to lowest or vice versa.

HostGator.com use a “pricing table” where the plans are difficult to compare because they have been designed as widgets and not like a table. Hostgator also use a dropdown for showing price and it is not best practice al all. However they also use it to make it look like the price is lower than it is and it may be the reason for doing it this way. In fact potential customers may click the order button believing the price is fx. $7.95/month but it isn’t unless you pay up front for two or three years. This kind of approach may work in the hosting industry but it is NOT recommended in general. Inconsistent and hidden messages can be one of the easiest ways to push customers away.

Wishlist Member also placed the price at the bottom of the pricing table. It is not a long complex list so it isn’t a huge problem in itself. Using the price on the call to action button on the other hand may not be the best option as it will not be obvious to some visitors that it is a button.

podcastpeople have made it very simple to find the price for each plan, but as a designer you may want to be careful not going too far in flashing the prices as in this example.

litmus also have the price at the top and have used a stronger type for the amount compared to the period. This approach is clean and simple and will work.

Use illustrations and icons carefully

As you know “Images say more than a thousands words”. In pricing tables this is also true to some extent. Intelligent use can make it even easier for visitors to compare plans and icons also help us to recognize and remember better. Icons can be used both for the plan itself and for each feature. It is still important though to keep the design simple and clean.

nybbletech have taken this to the extreme and you can clearly see that designers have to be careful – too much will make the pricing table seam over filled and comparing plans is not easy at all. Also pay attention to the space between the two plans. For comparing the two options available it is not an advantage and the text needs to be repeated in each column.

Ballpark also use icons (or simply symbols), but in a much more thrifty way and only on the items. This way the differenced stand out.

In the pricing table at livestream.com you will find an excellent design. They use illustrations to distinguish each plan and it is clear what is free and paid. This pricing table does not have too many features and is easy to scan. The premium features is listed at the left in an elegant way and well picked icons is used to support the type of feature. A few other highlights on this table is 1) the mouse over feature you will find when hovering over the blue triangle with the text “GB?”. 2) the title on the rows (channel, streaming etc.). This makes the form slimmer and still easy to read. The price is at the bottom and it is a bit strange.

zendesk use the size of a plant to illustrate the type of account. The idea is good, but the pricing table itself is a bit different. It seams like signing up for free is the only option at first but I guess it is intentional and part of the funnel strategy.

Don’t overdesign the pricing table – do it smart

Clean and simple design is easy and nice to look at. Many pricing tables tend to have a bit more spice than actually needed. Basically the designers added too much stuff trying to make it look as attractive as possible.

speaklight use small icons that symbolize each feature. Just as redundant text it is not necessarily good for the table to have the same icons repeated over and over again.

goodbarry has a great and very clean pricing table design. In stead of repeating all features that are included on all plans they are simply listed at the right.  I really like the way the designer use font size to support the type of plan. The larger the plan the larger the font is. It is great that price, call to action button and product name can be found both at the top and in the bottom.

browsermob.com is a good example of a over designed/engineered pricing table. It looks seriously professional and expensive, but the link between step one and two is not obvious. While having too much features listed can be a problem having too few certainly also makes it hard to convert visitors into customers.

More examples

Inspiration from looking at other designers work is as always important and time saving when it comes to design. When designing pricing tables you can also benefit a lot from investigating the current trends and from learning good ideas others have figured out.

One of the major trends currently is “focus on one specific product”. Many new and redesigned pricing tables use this principle by highlighting one of the plans. Another trend is huge red or green call to action buttons. Generally trends like this may give you an idea of what is converting sales and what isn’t. If you don’t have time or budget for a lot of A/B testing you can always try to to what the majority of player do in the niche you are in. Careful though – If you’re selling t-shirts it is not likely that trends in the hosting space works for you – if you know what I mean.

cobblestone

getbackboard

the Resumator

bigcartel

mailchimp

bidsketch

volusion

beanstalkapp

onehub

ewedding

getzcope

lessaccounting

proofhq

Zoho

softlayer

tickspot

flasheff

iweb

Brightbox

Resources

• Showcase and Tips: How to Create Effective Landing Page Designs @tripwire magazine
• 20 Excellent Web Site Front Pages Designed for High Conversion! @tripwire magazine
• WP Remix – WordPress theme with build in template for creating prizing tables. See our review of the premium wp remix WordPress theme here.