О компании
СберМобайл — федеральный виртуальный оператор, работающий на сетях «МегаФона»
и t2, доступен в 89 регионах России. В июле 2024 года бренд обновил визуальный стиль: палитру, иллюстрации и тон коммуникации. Сайт должен был стать частью этого единого визуального и смыслового языка.
Задача
Создать продуктовый сайт, который:
- поддерживает новый визуальный стиль бренда;
- логично и прозрачно объясняет продукт;
- упрощает ключевые пользовательские сценарии;
- работает быстро и стабильно при высокой нагрузке.
Решение
UX и UI-дизайн
Центральным элементом визуальной системы стал оранжевый градиент — не просто декоративный приём, а визуальный навигатор по пользовательскому сценарию.
Для оптимизации взаимодействия анализировали тепловые карты, выявляли паттерны поведения, расставляли цветовые и смысловые акценты
в ключевых точках сценариев.
Анимация
Мы добавили движение и интерактив: мягкие и объемные 3D и изображения, анимированные баннеры и т.д. Это удерживает внимание пользователя и побуждает его совершить целевые действия.
Mobile-first
Большая часть трафика приходится на мобильные устройства, поэтому мобильная версия проектировалась приоритетно:
- выстроен ритм интерфейса;
- упрощена структура страниц;
- улучшена читаемость и навигация;
- сокращены ключевые сценарии.
Ключевые сценарии:
1. Оформление заказа: пользователь проходит последовательный путь без лишних шагов.
2. Цифровой ассистент на базe GigaChat: помогает находить ответы на типовые вопросы и подсказывает решения прямо в процессе взаимодействия с сайтом. Это ускоряет получение информации и снижает нагрузку на поддержку.
3. Безопасность: раздел переработан с фокусом на системную защиту пользователя и интеграцию антиспам- и антифрод-сервисов в основные сценарии сайта.
4. eSIM для путешествий: выбор нужного объёма и возможность быстрого подключения пакета.
Технологии:
1. Анимации реализованы через секвенции —
как мини‑видео. Вес около 1 МБ вместо 5 МБ, сайт загружается быстрее.
2. Gearman + Centrifugo: для синхронизации eSIM-заказов при нагрузке применены очередь и real-time сервисы.
3. MNP: переход с номером другого оператора оформляется прямо в заказе пластика или eSIM.
4. Интеграция доставки сим-карт: API-интеграция с доставкой ускорила получение сим-карт до 30 минут и снизила количество ошибок.
Аналитика и тестирование
Мы упорядочили весь процесс QA на сайте СберМобайла – написали большую библиотеку из 200+ тест-кейсов с документацией для проверки всех функций. Для предрелизного QA мы составили чек-листы с подробным описанием последовательности действий для детальной проверки.
Поскольку сценарии оформления eSim, авторизации и заказа сим-карты изменились, мы заново разметили функциональные страницы и настроили новые бизнес-цели в аналитике.
Результаты
Команда подготовила около 20 новых страниц, а также провела значительный объём исследований и доработок пользовательских сценариев и экранов:
1. Общая конверсия увеличилась на 47%: Mobile – 74%, Desktop – 42%;
2. Время, проведенное пользователем на сайте, увеличилось на 43%;
3. Отказы уменьшились на 5%.
Выставлено в номинациях:
— Сайт телекоммуникационной компании