Any business that provides a tired product or service needs to present this well for their customers. Pricing tables are far from a simple outline of what each product tier offers, but a marketing tool to make customers choose the “right” package that makes you the most money.
In this roundup, we take a look at 15 pricing table designs that all look gorgeous and drill down to what the main features of the tables are before finishing up with a conclusion on the current popular trends in pricing tables and what you should consider doing when in charge of designing such a table.
You can use this post in two ways, either as a source of inspiration for your project, or to learn what techniques are out there or why not combine the two reasons?
Over at Big Cartel, they have a pricing table that cleanly lays out what is included in each package with one feature per line. The table has a gradient from blue to green, indicating growth in the plans to the right. The use of black for the free plan and the subtly faded feature indicate that it is not as good as the paid plans, which Big Cartel wants to highlight to the customer.
Crazyegg have a reversed table, going from the most expensive plan to the cheapest in the normal left to right reading order. They are highlighting one of their plans by making its box slightly larger than the other, causing the eye to fall on it right away. With a slight outer glow, it draws attention to the featured plan while not taking over the design. Each feature has its own line, giving a clear comparison of each plan.
Dropbox has a different approach. With a vertical table they highlight the three different plans available. Instead of putting emphasis on the different features, they highlight the plan name which indicate the space difference for each of the different plans. This makes for a very clean pricing table.
To highlight the different web hosting solutions offered by Eleven2, they have decided on a table that shows the main features of each type of solution in a row that makes it easy to compare the three. By adding tags to the top of certain solutions, they manage to draw attention to it as something special.
Doing the classic approach with least expensive to most expensive is Getquantify who choose to highlight their recommended plan with a lighter background and green corners. It doesn’t make it stand out quite as much as the enlarged examples however offers a very kind approach to upselling.
Launchlist Pro by default has two of their plans subdued and highlights their recommended one to you. When hovering over any other plan that one gets highlighted. When you draw the cursor away, it goes back to highlighting the featured plan. Doing it this way is another subtle way of selling a special product to the customer while still being effective.
At LightCMS they have chosen not to highlight a specific plan but instead present them each with a color from the spectrum/rainbow. By doing this, they naturally make the reader want to progress to the right and learn about the more advanced plans, focusing more on what they offer than their price per month.
Because of the nature of email list provider MailChimp, they have chosen to go with a basic table that clearly lays out the different tiers and how much they cost. Contrary to many other services, MailChimp focus on their free plan as a way to get new customers using their service hoping that their needs will grow beyond what the free plan offers.
onehub choses, like many others, to present their plans in the reverse order, starting with the most expensive one. To attract interest and focus the customer’s eye, they have chosen to put a light blue background on their featured plan which works well with their overall design.
PressJack makes use of two techniques here. First of all, the two non-featured plans are slightly subdued. Secondly, the main plan is not just fully opaque but also highlighted in a much lighter color, drawing your attention immediately to it.
Shopify offers customers a standard pricing table with easily compared features along with a nicely colored green to blue gradient. They also make use of the plan highlight by subtly adding a drop-shadow to each side of the featured plan, making it rise above the rest in a surprisingly effective way.
Squarespace has chosen to simply add a little banner at the top of their “Most Popular” plan to indicate that this is the one they want you to go with. To highlight the savings for multi-year contracts, they use a set of buttons above the table that interactively change the pricing and savings when you activate the view. Simple, clean and effective!
Webpop goes all in with their pricing table. Not only do they subdue the non-featured plans but the highlight their recommended plan with a banner, color and size. Perhaps it is on the more obtrusive side, but it is one way of designing your pricing table and it does indeed work.
Zendesk, as a final example, has a very elegant display of their plans, using both size and a clever drop-shadow to highlight their most expensive and recommended package, making the rest seem smaller in comparison. By using a splash of color and more text, it makes it seem like the plus package offers much more than the other.
There are many ways of successfully designing a pricing table. The most important factor is however how the customer perceives the tables. When designing these tables, try these different techniques to see which best suits the particular website in its overall design. Don’t be afraid to ask around and do a little survey on what potential customers feel about the different presentations. The last thing you need is a table that invokes irritation with customers.