СберМобайл · Web · 2024
Большой редизайн сайта СберМобайла
Контекст
В 2024 году СберМобайл обновил маркетинговую стратегию, позиционирование и визуальный стиль. Изменения затронули все ключевые точки контакта с клиентами — сайт, приложение и личный кабинет. Сайт нужно было привести к новому брендбуку и сделать удобнее для решения повседневных задач
и увеличить продажи
сим-карт
Моя роль
Я участвовала в работе от анализа данных до дизайн-ревью. Вместе с разработкой и маркетингом соединяла задачи бизнеса, новый визуальный язык и технические ограничения
- Анализ и исследования. Изучала данные о поведении на сайте, клиентские пути и результаты исследований
- Проработка решений. Помогала переводить выводы в структуру сайта, сценарии и макеты
- Передача в разработку. Готовила макеты и согласовывала решения с командой с учётом технических ограничений
- Дизайн-ревью. Проверяла реализацию и сохраняла единый визуальный подход в готовом интерфейсе
Проблемы
Интерфейс выглядел устаревшим, разделы отличались друг от друга, а клиентские пути разных продуктов были сложными. Конверсия сайта в заказ сим-карты составляла около 1,5%
- Разрозненный интерфейс. Не хватало единой логики и визуального подхода к элементам разных разделов. Отсутствовали общие компоненты и дизайн-система
- Сложный путь пользователя. Было трудно быстро найти нужное действие и разобраться в условиях тарифов
- Недостаточная доступность. UX-аудит показал, что сайт не соответствует принципам доступности
Как выглядел сайт до редизайна
С чего начали
Сопоставили данные о поведении на сайте, клиентские пути и ответы пользователей, чтобы понять, где возникают сложности и какие задачи важнее всего решить в редизайне
Веб-аналитика
Я изучила воронки и слабые места клиентских путей, тепловые карты и карты кликов. На общей встрече со стейкхолдерами и технической поддержкой собрали и зафиксировали проблемы сайта
UX-аудит
Собрали все клиентские пути. На сессиях обсудили, что можно улучшить и упростить, и добавили возможные изменения в бэклог. Выявили, что сайт не соответствует принципам доступности
Качественное исследование
Провели 8 онлайн-интервью с представителями целевой аудитории. Записывали разговоры и делали заметки, чтобы изучить потребности, поведение, мотивацию и трудности при использовании сайта оператора
Какие вопросы задавали на интервью 12 открытых вопросов
- Расскажите немного о себе: кем вы работаете, чем занимаетесь?
- Какой у вас мобильный оператор сейчас?
- Пользуетесь ли вы его сайтом? Как часто?
- С какими задачами вы обычно заходите на сайт мобильного оператора?
- Через какие устройства вы чаще всего заходите на сайт: телефон, компьютер или планшет?
- Когда вы в последний раз заходили на сайт оператора? По какому поводу?
- Насколько легко вам удалось найти нужную информацию или услугу?
- Какие действия вы чаще всего выполняете на сайте: пополнение баланса, просмотр или смену тарифа, подключение услуг?
- Когда вы хотите сменить тариф или узнать условия, вы идёте на сайт или используете другое средство? Почему?
- Пользуетесь ли вы сайтами других операторов? Чем они лучше или хуже?
- Если бы вы выбирали нового оператора, какую роль сыграл бы сайт в этом выборе?
- Есть ли сайт мобильного оператора, который вам нравится? Почему?
Jobs to be done
Прописали основные джобы, с которыми пользователи приходят на сайт. Это помогло выстроить структуру сайта и сценарии взаимодействия вокруг реальных задач пользователей
Совместные сессии
Вместе с маркетингом, копирайтерами и UX-редакторами определили маркетинговую и коммуникационную стратегию, её отражение на сайте, Tone of Voice и направление развития бренда
Что узнали о пользователях
Приходят с конкретной задачей
Пополнить счёт, проверить остатки, выбрать или сменить тариф, подключить интернет для поездки
«Я захожу только когда надо посмотреть, сколько осталось гигабайт, или оплатить»
Ищут действие сразу
Новости и реклама не помогают, если на первом экране сложно найти нужный сценарий
«Я просто сразу ищу кнопку «Пополнить» — всё остальное мне неинтересно»
Хотят сравнивать без усилий
Цена, объём услуг и условия тарифа должны быть понятными и сопоставимыми
«Дайте мне таблицу: цена — столько, гигабайт — столько. Без всего этого «включено до 3 месяцев»…»
Ценят прозрачный язык
Мелкий текст и маркетинговые формулировки снижают доверие
«Чем больше текста и красивых слов — тем меньше верю»
От исследования к макетам
Результаты исследования и совместных сессий помогли связать пользовательские сценарии с новым визуальным языком и коммуникацией бренда
Итогом стали макеты обновлённого сайта, в том числе главной страницы. В процессе я сопровождала передачу дизайна в разработку и проводила дизайн-ревью
Начало пути к дизайн-системе
Масштабный редизайн стал началом работы над компонентами будущей дизайн-системы для веба. Мы проработали базовые элементы интерфейса — кнопки, поля и подсказки, определили первичные правила отступов и поведения элементов на разных размерах экрана
Сформировали стиль оформления и документации компонентов
Результат
конверсия в заказ сим-карты после редизайна; до него — около 1,5%
выросло количество внутренних переходов по сайту
компонентов легли в основу будущего UI-kit для веба
Обратная связь
Публичные отзывы пользователей об оформлении сим-карты и eSIM на сайте СберМобайла
«Мне на это не больше 5–7 минут понадобилось. Делается это прямо на сайте.»
«Очень удобно подключаться: не нужно таскать с собой документы в салон связи, все оформил за пять минут прямо на сайте.»
«СберМобайл приятно удивил простым подключением — сим-карту или eSIM реально оформить за пять минут без визита в офис.»
«Оформил е сим в СберМобайле за пять минут, даже никуда идти не надо.»
