Pricelist redesign

My role

Category

Scope

UX/UI Designer,

UX Researcher

Case Study

3 months

2024

Year

Landingi is desktop platform where users can create their own landing page and then take a series of steps to help optimize their marketing campaign.
 

The task was to redesign the existing plan change screen and all its modules. 

Brief

⤷ The existing design was outdated and unintuitive in terms of upgrading to higher plans.

 
⤷ High exposure of the Free plan which may have affected the Trial to Paid conversion

Problems statement

1. User can do the plan upgrade and downgrade on their own, knowing the benefits/minuses of such a decision.

 

2. User has a clear and understandable information message on the modals during the plan upgrade and dowgrade.

 

3. User can also select the add-ons according to the plan they are entitled to.

Goals

I started my work by “stepping into the shoes” of the user. I wrote down all the key questions that came up after seeing the price list for the first time.

Empathizing

  1. Toggle change subscription period

  2. Information: 2 months free of charge!

  3. Listed information: Unique visits, custom domains, data preview time, chat/tel support

  4. Free plan tile - this area is most often analyzed by users, the least is Agency Plan.

I noticed that the most interaction with the pricing (clicks, scrolls, cursor movements) occurs:

How does the user navigate?

First of all, I had to look at the solutions of competitor Landingi.com but not only.
I took into account other top Saas B2B sites that showed good UX solutions.

Competitive analysis

The current price list presented the total amount on an annual basis. The user of changing the billing period has no sense of how much he is saving.

Annual billing as a per month amount

No FAQ section in the current price list design. The user at the stage of selecting/changing a plan often has questions.

FAQ section

Instead of generic plan names such as Free, Basic and Pro, try to come up with something more memorable and illustrate each option.

Add personality to the brand

While scrolling, the user must constantly see which columns are assigned to a particular plan.

Sticky headers for comparison tables

Text on the plans: no simple and clear wording + no tooltips next to unclear wording. At the end of the list of the most important elements, you can show “Find out more” for those users who are not satisfied with the above knowledge.

Avoid a “wall” of checkmarks or icons

Steve Jobs famously used this principle when he first unveiled the iPad with a “$999” sign obscuring the screen behind it, and then announced that the actual price would be $499, prompting a sigh of disbelief.

The most expensive plan on the left side

How much user will save by switching to annual billing.

Visible discount

The above theses and conclusions allowed me to prepare an outline of all the improvements that can be implemented to make UX easily accessible and enjoyable.

Conclusions

I prepared a diagram of all the possible situations a user might encounter, and then optimized all possible elements.

Ideation

There was also a need for single plan variants - the user's choice of plan is mainly determined by the number of visits to the landing page and secondarily are the domains.

Those associated with the user in sales lacked a place that directly invites the user to provide possible consultation.

The current price list presented the total amount on an annual basis. The user of changing the billing period has no sense of how much he is saving.

I ran two iterations of the tests, which showed the following findings:

Usability testing

Final project

The redesign of the existing pricing was my first extensive project at Landingi.
I had to deal with a detailed understanding of all key processes. At times, the amount of information posed a serious challenge in determining priorities that needed to be completed on time.

Reflections 🤔

Email me 

LinkedIn

Let's be in touch!

Feel free to contact me if having any questions. I'm available for new opportunities or just for chatting.

Strona zrobiona w WebWave.