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 show the various options available. Table is good for comparison purposes and it helps potential customers to make better decisions.
Different approaches are being implemented on the pricing page. Here, we are going to look into some of the creative approaches forpricing page and product comparison table designs. Also, we will be discussing tips and advice for designing a creative pricing page. Let’s start with the tips & advice. 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 help users spot the differences and help them to make decisions.
Example: Expression Engine
2. Uses Of Icons/Images To Represent Different Options
An image speaks a thousand 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.
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 the “Community” option is represented by an 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 a cheaper price and fewer features, while the highest column will have the most features with the most expansive price.
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 the cheaper option will have a lighter color.
Crazy Egg effectively uses 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 stand out on top of other options. You could add a border, increase the column size or use a different color to emphasize it.
Example: Big Commerce
Big Commerce 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 decisions. A plan recommender can helps the user to choose. Although the plan recommender wizard is hard to code and involves a lot of algorithms, 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. Digi’s plan recommender wizard helps potential customers to choose within various packages.
19. Donut Chat
23. Coaches Central