Контекст
Перед тем, как обратиться к нам, СберМобайл провел аналитику тарифной витрины на сайте. Оказалось, что по сравнению с приложением на карточки приходится на 30% меньше пользовательского внимания.
Для блока с тарифными предложениями нужен был новый UX и дизайн, чтобы заинтересовать пользователей в услугах СберМобайла и увеличить число абонентов.
Для блока с тарифными предложениями нужен был новый UX и дизайн, чтобы заинтересовать пользователей в услугах СберМобайла и увеличить число абонентов.
СберМобайл
СберМобайл — виртуальный оператор сотовой связи, который входит в экосистему Сбера. География оператора насчитывает 66 регионов, его услугами пользуются более 1,2 миллионов абонентов в России.
Цветовая палитра
Проблемы дизайна
Дизайн-концепция разработана на основе визуальной системы Сбера — использованы фирменные шрифты и цветовая схема бренда. Клиенту было важно акцентировать тарифы «Салют» и «Оптимум», для них дизайнер использовал трехцветный градиент в палитре СберМобайла.
Мы провели UX-аналитику интерфейса и увидели, что на десктопе в карточках тарифа не использованы цветовые акценты и не рационально распределено пространство — много пустых зон, большое расстояние между описанием тарифа и кнопкой его выбора. Карточки выглядели чересчур длинными. Те же проблемы нашли и в мобильной версии. По результатам анализа дизайнер предложил новую визуальную концепцию.
Работа над проектом
Минималистичные баннеры
Для каждой детальной страницы мы сделали баннер со своим визуалом, чтобы отстроить тарифы друг от друга. Информацию о тарифе уменьшили — теперь пользователь сразу видит ключевые поинты: количество интернета, минут и стоимость.
Дизайн детальной страницы
Мы уменьшили страницу в два раза и распределили контент по принципу «перевернутой пирамиды». Сначала дается базовая информация о тарифе, затем — дополнительные услуги. Основные характеристики пользователь видит полностью, а объемные дополнительные предложения оформлены в слайдер, чтобы не усложнять восприятие.
Data Driven подход
Клиент хотел запустить в релиз дизайн, который гарантированно даст результат. Для этого мы провели двухнедельное A/B-тестирование на весь блок с карточками. Перед тестом назначили KPI, по которым оценивали изменения.
Тарифная карусель
После анализа конкурентов СберМобайла поняли, что на сайтах операторов редко можно сравнить полные условия разных тарифов в разрезе одной страницы. Обычно пользователю приходится открывать каждую страницу в новой вкладке, что усложняет CX. Мы изменили подход — на детальной странице дали развернутое описание с каруселью для переключения между тарифами, а на главной оставили только ключевые факты.
разработка
Самое интересное в этом тестировании — его техническая часть. Нам нужно было выкатить два динамических блока карточек с разной структурой и одинаковой информацией. Верстка карточек сильно отличалась: разные иконки, количество контентных опций. Чтобы решить эту задачу, разработчик использовал Vue компонент, который через Google Optimize в зависимости от параметра ссылки подгружал на страницу либо старые карточки, либо новые.
A/B-тестирование
Здесь мы столкнулись с двумя сложностями:
№ 1. Разные тарифные условия в каждом регионе
СберМобайл делит регионы на фул и медиум, их стоимость, условия и набор контентных опций отличаются. Например, абоненты из Москвы могут добавить в тариф Shazam, а из Мурманска — нет. Поэтому информацию по всем 60 регионам контент-менеджер заполнял отдельно вручную.
№ 2. Контент новых и старых карточек сильно отличался
В новом дизайне размер карточек сильно уменьшился — изначально из семи контентных опций оставили только две. Каждую карточку нужно было заполнить по-своему, для этого мы продублировали опции в административной панели.
Все тарифные предложения и связи с контентными опциями настроили в тестовой среде и затем перенесли в продакшен. По скрипту разработчика они подгружались вместо старых тарифов. В новых карточках контент-менеджер убирал лишние пункты, затем мы тестировали промокоды и доступность опций для каждого региона.
Через две недели A/B-теста стало очевидно, что новый дизайн имеет более высокие прогнозируемые конверсии и целевые показатели, чем старый.
№ 1. Разные тарифные условия в каждом регионе
СберМобайл делит регионы на фул и медиум, их стоимость, условия и набор контентных опций отличаются. Например, абоненты из Москвы могут добавить в тариф Shazam, а из Мурманска — нет. Поэтому информацию по всем 60 регионам контент-менеджер заполнял отдельно вручную.
№ 2. Контент новых и старых карточек сильно отличался
В новом дизайне размер карточек сильно уменьшился — изначально из семи контентных опций оставили только две. Каждую карточку нужно было заполнить по-своему, для этого мы продублировали опции в административной панели.
Все тарифные предложения и связи с контентными опциями настроили в тестовой среде и затем перенесли в продакшен. По скрипту разработчика они подгружались вместо старых тарифов. В новых карточках контент-менеджер убирал лишние пункты, затем мы тестировали промокоды и доступность опций для каждого региона.
Через две недели A/B-теста стало очевидно, что новый дизайн имеет более высокие прогнозируемые конверсии и целевые показатели, чем старый.
контент
A/B-тест проводился для 10 страниц, мы отдельно тестировали мобильную версию и десктоп. Аналитик отслеживал целевые действия в обоих сегментах: нажатия на кнопку «Выбрать» и «Подробнее», посещение корзины, доход и транзакции. В целом мы отследили 59 тысяч сеансов в Google Analytics 360.
аналитика
часа работ над дизайном
спрогнозированный рост конверсии по главным целевым кнопкам
часа контентных работ
сеансов отследил аналитик в Google Analytics 360
104
12%
32
59 000
часов фронтенд и бэкенд разработки
спрогнозированный коэффициент транзакций
114
4%
Результаты