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

Experience Standpoint:

  • Visual Hierarchy Issues: The current pricing page lacks clear visual hierarchy, making it difficult for users to navigate.
  • Feature Emphasis: There's too much focus on final monthly prices rather than highlighting the features and services offered.
  • Small Feature Descriptions: Features, technologies, and values are presented too small compared to the pricing information.
  • Button Overload: Multiple buttons are repeated, especially in the first fold, increasing cognitive load and making decision-making harder for users.

UI Standpoint:

  • Visual Hierarchy: The page lacks a clear visual hierarchy, making it confusing.
  • Typography Issues: There are inconsistencies in typography, with mismatched colors not aligned with the brand.
  • Font Sizes and Weights: Numerous font sizes and weights are used, complicating the design. I aimed to reduce these variations, adhering to the "less is more" concept for simplicity and clarity.
  • Feature Comparison Layout: The layout of the features comparison table is confusing, making it hard for users to compare different plans' features.

Tools used

Figma

From brief

Topics

Share

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

Reviews

1 review


I just spent a week straight comparing prices from SaaS products to be used in one of the companies I work for. I think I legit have a say in this 😄

My goals are:

  1. The company can afford it, within budget.
  2. Offer a specific feature that is needed.

Note: this is probably a particular user scenario as well:

### First

The original design is more suitable for me to reach my goal. The price is there, huge, eye-catching. I'll be opening a few tabs at the same time and navigate it seamlessly from left to right, and this one will catch my attention in an instant.

### Second

The original pricing card design will help me achieve my next goal; prominently, it has a clear hierarchy of the paragraphs with the usage of spacing and font-weight. The green circular checklist icon may or may not help, but alas, I'll just categorize it as a 'nice to have.' Compared to your redesign, it's more like a block of a paragraph; it'll take me twice as long to digest the features they're offering.

But, no doubt yours is more unified and perhaps sticking to their brand guidelines.

Kudos on the clever use of tabs instead of an accordion 👍🏻


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