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 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
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
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
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 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 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
site5
eNom
FormAssembly
Clicky
Mollom
ClickTale
SlideRocket
Soocial
SlideDeck
Codebase
WebNotes
Donut Chat
Lighthouse
Timetonote
Rypple
Coaches Central
SPBAS
Clockspot
DropSend
Auctiva
SurveyMonkey
Huddle
WorkingPoint
Kareo
CacheFly
Scout
Setster
Usabilla
Zencoder
EquiPass Road Service
