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

Недавно в нашем 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 тесты, чтобы определить, какие элементы дизайна еще можно улучшить. Если бы у нас была возможность что-то изменить, мы бы уделили больше внимания этапу тестирования, чтобы выявить возможные недостатки на ранних стадиях разработки.