Design Observation : Framer’s Pricing Plan Page
How Framer uses color science to affect the psychology of visitors to lucrate them to buy paid plans
I am writing this series of posts to showcase the designs I observed. If you have a different opinions or thoughts, share in the comments.
Framer is a web based software which lets you design websites and publish them directly. No need to write code, just design and go live. It supports CMS and small databases, hence making a lot of noise in the industry. It’s direct competitor is Webflow which focuses on heavy websites while Framer focuses on the small, quick to go websites for freelancers, startups, entrepreneurs etc.
Framer’s website is designed in such an eye catching, engaging, lucrative way that one would definitely love to give it a spin. A very interesting page is the pricing plans page. I visited it only to get mesmerised by the design decision.
The plans are sized as per the features and values they offer : the free plan being the smallest in size while the pro one being the biggest. Also the colors on the CTA buttons are also planned very deeply.
The blue one on the free plan is less eye catchy as the white text and blue font tend to merge (a bad contrast ratio, on purpose). If you look closely you’ll find the “launch” CTA button on top right and the “try for free” CTA in the free plan card have actually a different tone of blue. This is because Framer wants to you think of the free plan as a least preferred one compared to the good color saturation of other cards.
The second plan i.e. mini is in aggressive red. Generally in lots of price plans, majority of the users tend to buy the one just above the free one because those plans are designed to remove the basic limitations. So, using red color is a good decision.
The basic and pro plans have a cooler hue but the size of the card and the features mentioned would defintely encourage users to purchase or upgrade to these.
Team plans
If above plans do not fulfill your need then Team plans are there just one scroll ahead. Here you might question that the basic team plan has blue color like in the free one but this one is a paid one. Here again Framer doesn’t want you to go with the basic team plan but with the pro plan because hey, more revenue 🤑.
Plans comparison
Scrolling past the team plans, a feature comparison list appears which shows the free one in black while other plans are fully colored. The color paired with the features availability can put a good mental effect on the subconcious mind to proceed with the non-free plans.
Conclusion
Framer smartly uses color science and psychology to drive the users towards buying the paid plans while showing that it treats all plans same with colors and stuff and doesn’t discourage to stay on the free plan. I don’t know how effective it is, but even being a design detective, I was pumped to buy some plan (although I ended up writing this article).
Framer teaches us that making shiny, amazing, delightful product experience isn’t enough, selling is the crucial part of the business. Product with bad looks but checking off the boxes of user’s needs alongwith good sales strategy makes money.
Let me know your thoughts in the comments. You can connect with me on LinkedIn as well to talk and discuss designs :)
