Корпоративный портал мобильного оператора Life

В 2017 году наша компания принимала участие в реализации одного из самых амбициозных и сложных проектов на рынке СНГ — нового интернет-портала для мобильного оператора Life. Мобильный оператор Life своим главным приоритетом поставил активное привлечение молодой аудитории и активный, даже агрессивный, маркетинг.
Маркетологи Life хотели создать полностью уникальный программный продукт, как по визуальной составляющей, так и по сложности и разнообразию программных решений. Полноценный интернет-магазин с внутренней CRM, позволяющей оценивать эффективность работы менеджеров и каналов привлечения трафика. Личный кабинет пользователя, транслирующий данные в режиме реального времени, система идентификации, которая в режиме реального времени формирует уникальное предложение для разных групп пользователей.

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

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

Представление контента на сайте Life 

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

safari
Разводящая Тарифы и Услуги
Разводящая Тарифы и Услуги

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

Главные компоненты для каждой услуги:

  • Бегущая строка с уникальной информацией
  • Заголовок и главное изображение с креативом плюс короткое описание услуги.
  • Стоимость и подключение услуги. Запрос передается в процессинг, и активированная услуга сразу отображается в личном кабинете.
  • Подробные описания, реализованные в виде элемента аккордеон. Администратор может установить необходимое количество информации.

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

Пример реализации карточки услуги на примере раздела AppsClub

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

Продажа мобильный устройств и аксессуаров Life.

Интернет-магазин Life разделен на три основных категории:

  • Мобильные телефоны
  • Планшеты
  • Модемы с безлимитным интернетом

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

safari
Разводящая категории Смартфоны
Разводящая категории Смартфоны

Карточка товара мобильного телефона

Каждая карточка товара собирается из уникальных react компонентов аналогично странице услуги. Из основных особенностей — наличие галереи с уникальными изображениями для каждого смартфона и его СКУ по цвету.

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

Галерея, технические характеристики смартфона и возможные виды рассрочек и тарифов

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

Изображение является примером работы тестового сайта и не имеет отношения к реальной работе сайта Life.com.by

 

В 2018 году задача любого интернет-проекта для бизнеса — не только быть красивым и быстро работать; главная задача — эффективно продавать услуги и товары компании. Для достижения максимальной эффективности мы внедрили в разработку наше программное решение — продукт, позволяющий в режиме реального времени генерировать уникальные, а главное, - персональные торговые предложения для клиентов компании.

OXPE - система омниканальной персонализации.

Главная особенность омниканальной персонализации – это оценка в режиме реального времени пользовательского профиля и истории, и формирование персонализированных предложений для пользователей. К примеру, система может запомнить вашу историю просмотра страниц (заинтересованность в товаре), и, зная ваш актуальный тариф и баланс, сделать вам уникальное предложение по приобретению нового устройства или тарифа. Использования программного обеспечения подобного класса позволяет отделам маркетинга эффективней взаимодействовать с пользователями сайта и интернет-магазина.

Личный кабинет пользователя Life

Личный кабинет пользователя реализован в виде стороннего react приложения. Через api вся информация синхронизируется в режиме реального времени с процессингом оператора. Вы можете пополнить счет, ознакомиться с подключенными услугами и управлять ими (подключать новые или удалять имеющиеся), также есть возможность проводить внутренние настройки профиля.

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

safari
Личный кабент Life
Личный кабент Life

Главной особенность всего проекта является реализация классического web-сайта в виде современного одностраничного react приложения. Первая техническая задача, которую нам необходимо было решить, это игнорирование react приложений поисковыми машинами. Для решения данной задачи, был параллельно создан процесс, с изоморфным рендерингом, который при первом заходе параллельно генерирует статическую HTML страницу, которая и обрабатывается поисковой машиной.
Также необходимо было работать с такой системой управления сайтом, которая поддерживает работу в Headless режиме. Данный режим исключает работу с классическими шаблонами и классическим рендерингом.
С задачей работы в безголовом режиме прекрасно справилась система управления сайтом X4M, это значительно ускорило процесс разработки, т.к. команде не пришлось с нуля реализовывать механизмы хранения и обработки данных.

Подготовка технической документации по RESTfull API

Для удобства разработки и последующие поддержки сайта необходимо было создать подробное описание всех функций API, для этой задачи мы использовали SWAGGER – это удобный и простой в освоении набор сервисов и программ, позволяющий определять REST API в формате дружественном к пользователю и компьютеру.



Полученный результат может легко использоваться как для дальнейшего расширения и доработки имеющегося функционала, так и для подключения к нашему back-end дополнительных приложений и сервисов. К примеру, life может разрабатывать мобильное приложение, но им по факту не нужно разрабатывать дополнительный back-end, они могут забирать все необходимые данные и проводить все вычисления используя нашу систему и синхронизируя свое приложения с нами через API.

Готовы сотрудничать?