How We Created a Pricing Page Without the Small Print Feeling

We created a pricing page that does not give the impression of small print, improving user perception.

---

Introduction to the Problem

Recently, a discussion arose in our Slack channel regarding how users perceive our pricing plans. One of the developers shared a screenshot of the old pricing page, and many expressed that the font seemed too small and unreadable. This raised serious concerns for us, as the pricing page is one of the key elements influencing users' purchasing decisions.

Why This Matters

The pricing page is not just a collection of numbers and descriptions. It is an essential part of our product that must clearly and effectively communicate value to our users. When users cannot quickly and easily understand the pricing options we offer, it negatively impacts their decision-making. Moreover, it can deter potential customers who are looking for transparency and simplicity. We understood that improving this page could directly affect our conversion rates and overall brand perception.

Details of the Problem

In the old version of the pricing page, users complained about several issues. Firstly, the font was indeed too small, making it difficult to absorb the information, especially on mobile devices. For example, one user mentioned in the comments that they could not distinguish which plan was suitable for them due to the complex structure and small text. This problem was exacerbated by the fact that the information was presented in a table with small cells and lacked clear visual distinctions.

What We Tried First

Initially, we decided to simply increase the font size and change the background color to a more contrasting one. However, after several iterations and user testing, it became clear that this was not enough. We faced the issue that increasing the font size required us to reduce the amount of information on one page, which also did not solve the clarity problem. This led us to consider a complete redesign of the page.

Technical Approach

Instead of making simple changes, we decided to completely redesign the pricing page. We focused on intuitive design and readability. As a solution, we opted for larger fonts, clear visual separators, and added interactive elements to enhance user engagement. Here is an example of our new CSS code:

.pricing-table {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 20px;
}
.pricing-header {
  font-weight: bold;
  font-size: 1.5rem;
}

We also implemented a feature that allows users to easily switch between plans using tabs, making information consumption more dynamic and user-friendly.

Changes in the Product

After implementing the new design, we noticed significant changes. Users began to engage more actively with the pricing options, and the number of information requests decreased. Improved readability and an intuitive interface allowed users to make decisions more quickly, positively impacting conversion rates. We are confident that the enhanced pricing plans will also affect the /jobs and /for-candidates pages, as clarity in pricing can increase trust in our product.

What We Learned

  • Simplicity and clarity are more important than the amount of information.
  • Interactive elements can significantly enhance the user experience.
  • It is essential to test changes with real users before final implementation.

What This Means for Candidates

For candidates, this means they will now be able to understand more quickly and easily what services we offer and how they can assist in their job search. Clear pricing makes the selection process more transparent and less stressful.

What This Means for Recruiters

Recruiters will see that an improved pricing page can increase interest in our services. Clear and understandable pricing will help attract new clients and enhance the company’s image in the market.

Next Steps

Despite the results achieved, we continue to monitor user feedback. We plan to conduct additional A/B tests to determine which design elements can be further improved. If we had the opportunity to change something, we would focus more on the testing phase to identify potential shortcomings at early stages of development. ---

Related materials

  • Chart plannedГрафик взаимодействия с тарифами
    Изменение уровня взаимодействия пользователей с новой страницей тарифов.
  • Code screenshot plannedПример кода CSS
    Код, использованный для улучшения дизайна страницы с тарифами.

Also on Fitlane AI

Topics: страница тарифов, пользовательский опыт, дизайн интерфейса, HTML, CSS, Fitlane, AI