Кейс: Редизайн страницы тарифы для SaaS. Как упростить выбор тарифа и повысить конверсию
Страница с ценами — это, пожалуй, самый критичный этап пользовательского пути. Именно здесь принимаются решения. Недавно я занималась редизайном страницы тарифов для крупной B2B SaaS-платформы, специализирующейся на корпоративных коммуникациях. Моей задачей было превратить перегруженный таблицами интерфейс в легкий, прозрачный и конверсионный инструмент.
В этой статье расскажу, как я подошла к этой задаче: от исследований до финального UI.
🧩 Процесс: Сначала исследования
Получив задачу на редизайн, я не стала сразу бросаться рисовать макеты, а подошла к процессу системно.
- Юзабилити-аудит: Провела коридорное тестирование текущей страницы, чтобы выявить реальные боли пользователей и моменты, вызывающие путаницу.
- Анализ конкурентов: Изучила прямых конкурентов и лучшие практики SaaS-рынка, чтобы понять индустриальные стандарты и ожидания пользователей.
- Прототипирование: На основе полученных инсайтов создала low-fidelity прототип, чтобы проверить новую структуру и логику до перехода к финальному дизайну.
🔴 Проблема (До)
Изначальный дизайн страдал от высокой когнитивной нагрузки. Пользователи чувствовали себя перегруженными, а не вовлеченным в контекст.
- Лишний текст и шум: Страница начиналась с длинных описательных текстов еще до того, как пользователь видел цифры. Люди, приходящие сюда, обычно готовы сравнивать цены, а не читать вступления. Это создавало ненужное трение.
- Запутанная навигация: Табы с продуктами имели невнятные названия и не выглядели кликабельными. Пользователи часто даже не понимали, что могут переключаться между продуктами.
- Криптический нейминг: Названия тарифов вроде «WEB-100» были непонятны. Пользователь гадал: «Это что-то про интернет? Это скорость?». Ценностное предложение терялось в нейминге.
- «Стена таблиц»: Интерфейс был завален бесконечными таблицами данных. Быстро просканировать взглядом или сравнить опции было невозможно.
- Критические проблемы на мобильных: На смартфонах карточки с ценами даже не помещались на первый экран. Пользователям приходилось скроллить сломанные горизонтальные таблицы, чтобы найти базовую информацию. Сравнение тарифов стало практически невыполнимым квестом.
🟢 Решение (После)
Я сфокусировалась на ясности предложения, упрощении флоу и подходе Mobile-First.
- Фокус на контенте: Я убрала детальные описания продуктов в раздел FAQ и на отдельные продуктовые страницы. Теперь страница цен сфокусирована строго на главном: карточках и стоимости.
- Визуальная дифференциация и цветовое кодирование: Внедрила четкий цветовой код и набор иконок для каждого продукта. Когда пользователь переключает вкладки, акцентный цвет карточек меняется соответственно. Это дает мгновенную обратную связь, помогая четко различать продукты (например, Вебинары vs. Почта) и интуитивно собирать свой идеальный микс услуг.
- Интуитивный нейминг: Заменила абстрактные коды на понятные названия. Вместо «WEB-100» тариф теперь четко называется «Вебинары-100». Само название мгновенно сообщает ключевую ценность и лимиты.
- Упрощение выбора и триальный тариф: Сократила визуальный шум до трех понятных карточек на каждый продукт. Критически важно, что одна из них теперь — карточка Триального тарифа (которой вообще не было в старом дизайне, а соответсвенно пользователи не могли узнать о триальном периоде).
- Интерактивный конфигуратор: Вместо статичных таблиц я внедрила логику. Сначала пользователь выбирает количество участников, и цена обновляется динамически. Продвинутые модули спрятаны под кнопку «Настроить тариф», сохраняя чистоту начального вида.
- Доступная поддержка: Сразу под тарифами я добавила заметный баннер с номером телефона и формой обратной связи, чтобы предотвратить уход пользователя, если у него возникнут вопросы.
- Mobile-First UX: Мобильная версия стала полностью дружелюбной. Карточки с ценами идеально помещаются на первый экран. Больше никакого горизонтального скролла огромных таблиц.
🏁 Вывод
Убрав отвлекающие факторы, сделав копирайтинг понятным и приоритизировав мобильное поведение, новый дизайн снизил когнитивную нагрузку и начал вести пользователя к решению, а не путать его.
Что думаете? По вашему опыту, всегда ли упрощение выбора на странице цен ведет к росту конверсии? Буду рада услышать ваши мысли в комментариях!