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.
Don’t forget to Subscribe to Email Newsletter, Follow us on Twitter and Like us on Facebook – for recent updates.
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
Expression Engine has three different types of packages: Core(free), Personal and Commercial. The pricing table clearly explains the modules included, and also terms of use for each option.
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.
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 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.
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 the cheaper option will have a lighter color.
Example: CrazyEgg
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.
7. Clutterpad
8. site5
9. eNom
10. FormAssembly
11. Clicky
12. Mollom
13. ClickTale
14. SlideRocket
15. Soocial
16. SlideDeck
17. Codebase
18. WebNotes
19. Donut Chat
20. Lighthouse
21. Timetonote
22. Rypple
23. Coaches Central
24. SPBAS
25. Clockspot
26. DropSend
27. Auctiva
28. SurveyMonkey
29. Huddle
30. WorkingPoint
31. Kareo
32. CacheFly
33. Scout
34. Setster
35. Usabilla
36. Zencoder
37. EquiPass Road Service
