Перезапуск и развитие сайта оператора СберМобайл

СберMобайл

2024

Клиент

СберМобайл — это мобильная связь большой экосистемы Сбера, которая работает на сетях МегаФона и t2. Сегодня СберМобайл доступен во всех регионах России.

Более 280 тысяч вышек обеспечивают масштабное покрытие, поэтому связь не пропадёт даже в самых дальних уголках страны.

Контекст

В июле 2024 года СберМобайл обновил визуальный стиль. Изменилась цветовая палитра бренда, дизайн иллюстраций, а также подход в коммуникации с аудиторией.

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

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

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

Для реализации новой логики мы полностью переписали фронтенд и доработали бэкенд сайта.

Техническая реализация редизайна

Акцентом в дизайне стал оранжевый градиент. Он выполнял роль не только декоративного элемента, но и «визуального проводника».

Пользователи интуитивно следовали за переходами цвета и выполняли целевые действия.

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

Это позволило выявить паттерны пользовательского поведения и поставить цветовые акценты в нужных местах.

Чтобы сайт выглядел более привлекательным и современным, мы добавили анимации: ховеры, движение объектов при скролле, анимированные баннеры.

Это удерживает внимание пользователя и побуждает его совершить целевые действия.

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

Переработка сценария оформления eSIM

Виртуальная сим-карта eSim оформляется по тому же принципу, что и физическая: с паспортом, договором и официальной подписью.

Весь процесс оформления eSim перенесен в онлайн. Пользователь заполняет информацию и получает сим-карту.

Чтобы оформление проходило еще быстрее, мы сократили процесс получения eSim практически в 2 раза. Обмен данными происходит за секунды, а весь процесс заказа «симки» занимает не больше 5 минут.

«Под капотом» скрывается множество процессов — документы верифицируются, данные регистрируются и вносятся в базу, к профилю абонента привязывается его номер. Но для пользователя это занимает всего несколько минут.

Обмен данными

На каждом этапе оформления eSim нужно синхронизировать статус заказа между браузером абонента и бэкендом.

При этом оформлять «симку» могут сразу много пользователей, а это дополнительная нагрузка на сайт.

Чтобы повысить отказоустойчивость ресурса, мы использовали сервер очередей Gearman и сервис Centrifugo.

Первый обрабатывает задачи в несколько потоков и передает второму, чтобы поддерживать быстрый обмен статусами между браузером и бэкендом.

Перенос номера

В форме для заказа eSim теперь можно сразу оформить переход на СберМобайл с номером другого оператора — в сценарий мы внедрили функцию переноса номера.

Пользователь заказывает eSim и одновременно подает заявку на переход — через 8 дней номер переносится в СберМобайл.

Настройка зон доставки для всей страны

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

За счет этого удалось сократить негатив от клиентов и повысить их лояльность к компании.

Интеграция со службой доставки для доставки пластиковой сим-карты

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

Для курьеров это выглядит как обычный заказ, только вместо продуктов они доставляют сим-карту СберМобайла. Пользователь получает ее в течение 30 минут.

Модуль SberPay

Мы первые в сегменте Сбера интегрировали на сайт модуль SberPay webSDK. Теперь для оплаты услуг СберМобайла пользователю достаточно авторизоваться на сайте по СберID и нажать кнопку оплаты.

Благодаря этой функции пополнять счет с компьютера или телефона стало удобнее.

Тест-кейсы для всех функций на сайте

Мы упорядочили процесс  QA на сайте СберМобайла  — написали библиотеку из 40+ тест-кейсов с документацией для проверки всех функций ресурса.

Для предрелизного QA мы составили чит-листы, в которых подробно описали последовательность действий для детальной проверки.

Настройка аналитики

Так как сценарии оформления eSim, авторизации и заказа сим-карты изменились, мы заново разметили функциональные страницы и настроили новые бизнес-цели.