---

Введення в проблему

Нещодавно в нашому Slack-каналі виникла дискусія про те, як користувачі сприймають наші тарифні плани. Один із розробників поділився скріншотом сторінки зі старими тарифами, і багато хто висловився, що шрифт здається занадто дрібним і нечитаємим. Це викликало в нас серйозні побоювання, адже сторінка з тарифами — це один із ключових елементів, що впливають на рішення користувачів про покупку.

Чому це важливо

Сторінка з тарифами — це не просто набір цифр і описів. Це важлива частина нашого продукту, яка повинна чітко і зрозуміло донести цінність нашим користувачам. Коли користувачі не можуть швидко і легко зрозуміти, які тарифи ми пропонуємо, це негативно впливає на їхнє рішення. Більше того, це може відштовхнути потенційних клієнтів, які шукають прозорість і простоту. Ми усвідомлювали, що покращення цієї сторінки може безпосередньо вплинути на наші показники конверсії та загальне сприйняття бренду.

Подробиці проблеми

В старій версії сторінки з тарифами користувачі скаржилися на кілька речей. По-перше, шрифт дійсно був занадто дрібним, що ускладнювало сприйняття інформації, особливо на мобільних пристроях. Наприклад, один з користувачів у коментарях зазначив, що не може розібратися, який тариф йому підходить, через складну структуру та дрібний текст. Цю проблему ускладнювало те, що інформація була представлена у вигляді таблиці з дрібними клітинками і без чітких візуальних виділення.

Що ми пробували в першу чергу

Спочатку ми вирішили просто збільшити розмір шрифту і змінити колір фону на більш контрастний. Однак, після кількох ітерацій і тестування з користувачами, стало очевидно, що цього недостатньо. Ми зіткнулися з проблемою, що при збільшенні шрифту нам доводилося зменшувати кількість інформації на одній сторінці, що також не вирішувало проблему ясності. Це привело нас до думки про необхідність повного перегляду дизайну сторінки.

Технічний підхід

Замість простих змін ми вирішили заново спроектувати сторінку з тарифами. Ми зосередилися на інтуїтивному дизайні та читаемості. Як рішення ми обрали більш великі шрифти, чіткі візуальні роздільники і додали інтерактивні елементи для покращення взаємодії. Ось приклад нашого нового CSS-коду:

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

Ми також впровадили можливість користувачам легко перемикатися між тарифами за допомогою табів, що зробило сприйняття інформації більш динамічним і зручним.

Зміни в продукті

Після реалізації нового дизайну ми помітили значні зміни. Користувачі почали активніше взаємодіяти з тарифами, а кількість запитів на інформацію скоротилася. Поліпшена читаємість та інтуїтивний інтерфейс дозволили користувачам швидше приймати рішення, що позитивно вплинуло на конверсію. Ми впевнені, що покращені тарифи також вплинуть на сторінки /jobs та /for-candidates, адже ясність у цінах може підвищити довіру до нашого продукту.

Чому ми навчилися

• Простота і ясність важливіші, ніж кількість інформації.
• Інтерактивні елементи можуть значно покращити користувацький досвід.
• Потрібно тестувати зміни з реальними користувачами, перш ніж остаточно їх впроваджувати.

Що це означає для кандидатів

Для кандидатів це означає, що тепер вони зможуть швидше і простіше зрозуміти, які послуги ми пропонуємо, і як вони можуть допомогти у пошуку роботи. Ясність цін робить процес вибору більш прозорим і менш стресовим.

Що це означає для рекрутерів

Рекрутери побачать, що покращена сторінка з тарифами може збільшити інтерес до наших послуг. Ясні та зрозумілі тарифи допоможуть у залученні нових клієнтів і покращенні іміджу компанії на ринку.

Наступні кроки

Незважаючи на досягнуті результати, ми продовжуємо слідкувати за відгуками користувачів. Ми плануємо провести додаткові A/B тести, щоб визначити, які елементи дизайну ще можна покращити. Якби у нас була можливість щось змінити, ми б приділили більше уваги етапу тестування, щоб виявити можливі недоліки на ранніх стадіях розробки. ---