Дизайн и аналитика тарифной витрины на сайте оператора связи «СберМобайл»

Этап № 1. Аналитика На первом этапе работы мы проанализировали пользовательский опыт тарифного блока и обнаружили следующие недочеты: — нерациональное использование интерфейсного пространства на главной и детальных страницах: CTA-кнопки и описания тарифов разделяли крупные пробелы; карточки выглядели чересчур длинными и не воспринимались как единый элемент интерфейса; — дублирование визуала на детальных страницах разных тарифов: из-за одинаковых иллюстраций тарифы было сложно «отстроить» друг от друга.Анализ конкурентов показал, что на сайтах операторов нельзя сравнить предложения в разрезе одного интерфейса, так как для каждого тарифа создана отдельная детальная страница. Для сопоставления условий пользователь вынужден открывать тарифы в разных вкладках, что в значительной степени усложняет UX. Этап № 2. UX/UI-дизайнДизайн тарифной витрины разработан на основе гайдланов экосистемы Сбера с классическими шрифтами и цветовой схемой бренда. Мы уменьшили размер карточек на витрине, увеличили шрифт и подчеркнули ключевые поинты, чтобы создать визуальные якоря и упростить восприятие. Детальная страница получила новую структуру. Контент распределен по принципу «перевернутой пирамиды»: сначала знакомство с базовыми характеристиками плана, затем детали. Дополнительные опции оформлены в слайдер. Так нам удалось достичь оптимальной когнитивной нагрузки, создать логичный и последовательный пользовательский путь. Чтобы можно было сравнить несколько планов в режиме одного окна, мы создали тарифную карусель. С ее помощью пользователь переключается между детальными страницами, не открывая несколько вкладок одновременно. Этап № 3. A/B-тестированиеРедизайн тарифной витрины полностью основан на данных. Чтобы сравнить эффективность прошлой и новой версий, мы запустили двухнедельное A/B-тестирование тарифного блока. Аналитика опиралась на важные для клиента целевые действия: нажатия на кнопку «Выбрать» и «Подробнее», посещение корзины, доход и транзакции. В общей сложности было отслежено 59 тысяч сеансов в Google Analytics 360. В новой концепции мы сфокусировались на дозированной подаче информации, поэтому структура карточек, верстка и оформление у двух версий сильно различались. Чтобы успешно провести тестирование, контент-менеджер вручную вносил все данные по каждому из 60 регионов присутствия СберМобайла. Для технической реализации мы использовали Vue компонент, который подгружал на страницу одну из версий блока через Google Optimize в зависимости от параметра ссылки. В результате мы провели полное тестирование работы всех компонентов и функций сайта, а также доступность тарифных опций для каждого региона. A/B-тестирование тарифного блока показало, что количество переходов в корзину на новом дизайне выросло более чем на 24%. За счет внедрения дизайн-концепции нашей команды улучшился UX витрины, она стала более привлекательной для пользователя.