СберМобайл

Дизайн и аналитика тарифных карточек

СберМобайл

СберМобайл появился в 2016 году как часть экосистемы Сбера, а теперь является ключевым брендом ООО «Сбербанк–Телеком».

—

Оператор предлагает выгодные тарифы и комфортные способы их подключения как для частных лиц, так и для бизнеса. Связь стабильная, а новые продукты и решения — удобные и технологичные.

Контекст

Первое, что было сделано, — проведена комплексная аналитика блока с тарифами.

Выяснилось, что тарифные карточки в мобильном приложении получают на 30% меньше пользовательского внимания, чем на десктопной версии.

Чтобы привлечь ещё больше клиентов, было принято решение обновить UX-дизайн.

Работа над проектом

Проблемы дизайна

Мы провели UX-аналитику интерфейса и увидели, что на десктопе в карточках тарифа не использованы цветовые акценты и не рационально распределено пространство:

Те же проблемы нашли и в мобильной версии.
По результатам анализа дизайнер предложил новую визуальную концепцию.

работа над проектом

работа над проектом

много пустых зон
большое расстояние между описанием тарифа
карточки выглядели чересчур длинными

Дизайн-концепция разработана на основе визуальной системы Сбера — использованы фирменные шрифты и цветовая схема бренда.

Клиенту было важно акцентировать тарифы «Салют» и «Оптимум», для них дизайнер использовал трехцветный градиент в палитре СберМобайла.

Цветовая палитра

Дизайн детальной страницы

Мы уменьшили страницу в два раза и распределили контент по принципу «перевернутой пирамиды». Сначала дается базовая информация о тарифе, затем — дополнительные услуги.

Основные характеристики пользователь видит полностью, а объемные дополнительные предложения оформлены в слайдер, чтобы не усложнять восприятие.

Минималистичные баннеры

Для каждой детальной страницы мы сделали баннер со своим визуалом, чтобы отстроить тарифы друг от друга.
Информацию о тарифе уменьшили — теперь пользователь сразу видит ключевые поинты: количество интернета, минут и стоимость.

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

A/B ТЕСТИРОВАНИЕ

Аналитика

A/B-тест проводился для 10 страниц, мы отдельно тестировали мобильную версию и десктоп. Аналитик отслеживал целевые действия в обоих сегментах: нажатия на кнопку «Выбрать» и «Подробнее», посещение корзины, доход и транзакции. В целом мы отследили 59 тысяч сеансов в Google Analytics 360.

Самое интересное в этом тестировании — его техническая часть. Нам нужно было выкатить два динамических блока карточек с разной структурой и одинаковой информацией. Верстка карточек сильно отличалась: разные иконки, количество контентных опций. Чтобы решить эту задачу, разработчик использовал Vue компонент, который через Google Optimize в зависимости от параметра ссылки подгружал на страницу либо старые карточки, либо новые.

Разработка

Здесь мы столкнулись с двумя сложностями:

Контент

№ 1. Разные тарифные условия в каждом регионе
СберМобайл делит регионы на фул и медиум, их стоимость, условия и набор контентных опций отличаются. Например, абоненты из Москвы могут добавить в тариф Shazam, а из Мурманска — нет. Поэтому информацию по всем 60 регионам контент-менеджер заполнял отдельно вручную.

№ 2. Контент новых и старых карточек сильно отличался
В новом дизайне размер карточек сильно уменьшился — изначально из семи контентных опций оставили только две. Каждую карточку нужно было заполнить по-своему, для этого мы продублировали опции в административной панели.
Все тарифные предложения и связи с контентными опциями настроили в тестовой среде и затем перенесли в продакшен. По скрипту разработчика они подгружались вместо старых тарифов. В новых карточках контент-менеджер убирал лишние пункты, затем мы тестировали промокоды и доступность опций для каждого региона.

Через две недели A/B-теста стало очевидно, что новый дизайн имеет более высокие прогнозируемые конверсии и целевые показатели, чем старый контент

Результаты