Advertisement

Pricing and signup page is the key factor to your sales. Pricing pages normally give details on various packages/options and the differences within them. They are there to make visitors clear about the product. Therefore, the design of the pricing page is very important.

Modern sites for web applications, web services and web hosting providers tend to decorate their pricing and signup pages attractive as possible. Tables are being used to compare and shows the various options available. Table is good for comparison purpose and it helps potential customers to make better decision.

Different approaches are being implemented on pricing page. Here, we are going to look into some of the creative approaches for pricing page and product comparison table designs. Also, we will be discussing about tips and advices for designing a creative pricing page. Let’s start with the tips & advices. After all, we will proceed to the showcase.

1. Comparison Tables With Detailed Feature

If you are offering multiple options for your product, and there are significant differences within each package, it is advisable to have a table and clearly list down the detailed features and differences within them.

The table should helps users spot the differences and help them to make decision.

Example: Expression Engine

Expression Engine

Expression Engine has three different type of packages: Core(free), Personal and Commercial. The pricing table clearly explains the modules included, and also term of use for each option.

2. Uses Of Icons/Images To Represent Different Options

An image speaks a thousand of words. Images are easy to remember and understandable. Make sure the images that you use are related and clearly represent the options. Also, the images should follow the conventional, don’t be too creative on choosing the images.

Example: Squarespace

Squarespace

There are 5 different options available to choose from. Each of them is represented by an image. The “Advanced” option is represented by a “settings” icon while “Community” option is represented by icon with multiple persons. They are understandable, even though just look at the images/icons.

3. Uses Of Column Height To Represent The Price

You could also use the column height to significantly tell potential customers the differences in prices. The lower column will have cheaper price and less features, while the highest column will have most features with the most expansive price.

Example: 2large2email

2large2email

They have 4 different options: Free, Basic, Business and Premium, with each of them having different prices and features.

4. Different Colors For Different Options

It is good if you have multiple colors for different options or columns. The more expansive option will have darker color while cheaper option will have lighter color.

Example: CrazyEgg

CrazyEgg

Crazy Egg effectively use gray color as the background color, with darker for more expansive option. They also emphasize the “standard” plan with the use of green as the background. Probably this option is the most popular choice.

5. Make The Emphasize Option Stand Out

If you offer multiple options for your service, and want to let users know which the most popular package is, you should make it standing out on top of other options. You could add border, increase the column size or use different color to emphasize it.

Example: Big Commerce

Big Commerce

Big Comerce has 5 different packages and they are recommending the “Gold” package to their potential customers. The uses of red border and higher column effectively send this message to the potential customers.

6. Offer A Plan Recommender

Sometimes, users are unable to make decision. A plan recommender can helps user to choose. Although the plan recommender wizard is hard to code and involve a lot of algorithm, but I am sure you can easily beat your competitors with this helpful feature.

Example: Digi Internet
Digi Internet

Digi is one of the Malaysia Telco and the competition within telcos in Malaysia is huge. They offer different packages for broadband and mobile internet plans. The Digi’s plan recommender wizard help potential customers to choose within various packages.

Showcase

Clutterpad

Clutterpad

site5

site5

eNom

eNom

FormAssembly

FormAssembly

Clicky

Clicky

Mollom

Mollom

ClickTale

ClickTale

SlideRocket

SlideRocket

Soocial

Soocial

SlideDeck

SlideDeck

Codebase

Codebase

WebNotes

WebNotes

Donut Chat

Donut Chat

Lighthouse

Lighthouse

Timetonote

Timetonote

Rypple

Rypple

Coaches Central

Coaches Central

SPBAS

SPBAS

Clockspot

Clockspot

DropSend

DropSend

Auctiva

Auctiva

SurveyMonkey

SurveyMonkey

Huddle

Huddle

WorkingPoint

WorkingPoint

Kareo

Kareo

CacheFly

CacheFly

Scout

Scout

Setster

Setster

Usabilla

Usabilla

Zencoder

Zencoder

EquiPass Road Service

EquiPass Road Service