<?xml version="1.0" encoding="utf-8"?>
Open full project

I'm designing a pricing page for a SaaS website with a focus on clarity and usability.

Key Design Decisions:

Limited to Three Plans: I’ve structured the pricing into three distinct plans—Starter, Pro, and Enterprise. Offering only three options prevents choice overload, ensuring users don’t feel confused or frustrated while making a decision.

Clear and Concise Plan Names: The plan names are straightforward and self-explanatory, making it easy for users to understand which plan suits their needs at a glance.

Pricing That Stands Out: I’ve made the pricing highly visible by using the brand’s color scheme, ensuring accessibility and quick recognition. This helps users focus on the cost and value without distractions.

Simplified Feature List: Instead of overwhelming users with a long list of features, I’ve carefully selected key highlights for each plan. This approach makes it easy to compare plans without getting lost in excessive details.

FAQ Section to Eliminate Cost-Related Concerns: To address common customer doubts, I’ve included an FAQ section. This helps eliminate cost-related concerns, ensuring transparency and building trust with potential buyers.

Testimonials to Enhance Credibility: To strengthen user confidence, I’ve added a testimonial section. Real customer reviews and success stories provide social proof, making it easier for users to trust the product.

Resolve some issue in the previous design

Missing a 'Learn More' button in the plan description for a detailed comparison.

Missing a 'Pricing’ button in the navbar for easy access.

Color Pallet doesn’t meet accessibility standard.

This is the previous design.

Pricing page for a SaaS website 1

Tools used

Figma
FigJam
Notion
Adobe Photoshop

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


You made some great design choices here! Keeping the pricing plans limited to three is a solid approach, it makes decision-making easier and avoids overwhelming users. If the middle plan is pre-selected, adding a small label like "Best option for you" could help guide users even more. Since the plan descriptions are quite concise, a "Learn More" button linking to a detailed comparison table might be useful for users who want more information.

The page layout is well-structured, and putting the pricing section at the top is a smart move. One thing to consider is how users get to this page, does the main navigation include a "Pricing" tab? If not, adding one (and highlighting it when on this page) could make navigation clearer.

Now, about the colors: while the palette is visually appealing, it doesn’t meet accessibility standards. The salmon/opal red against light grey has low contrast, and the white text on the salmon/opal red button doesn’t pass accessibility checks at all. Adjusting these colors slightly to improve contrast will make the page more readable for all users.

The serif font used for the plan names is a nice contrast, but right now, it feels isolated. Bringing it into other sections (like the FAQ or Testimonials) could help add more depth and improve the overall visual hierarchy. Right now, those sections feel a bit flat in comparison.

This is already a well-structured and thoughtful design, and making these small refinements will make it even stronger, both visually and functionally!


Great design! The only thing I would add is more contrast. The site seems a little overwhelming, so "cooling it down" would help with the appeal a lot.

(edited)

11 Claps
Average 3.7 by 3 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>