У каждого телеком-оператора есть большой набор тарифов и услуг, которые предназначены для корпоративных клиентов. Таких услуг может быть несколько десятков. Обычно пользователям в них сложно разобраться — трудности возникают уже на этапе подключения. Приходится «пролезать» сквозь бесчисленные лендинги, авторизации, формы заявок и строчки мелкого шрифта. Мы хотели, чтобы все стало просто и понятно. Для этого мы решили создать платформу «МегаФон.Бизнес». О том, как мы собирали экосистему решений для корпоративных клиентов и что в итоге получилось, расскажем в этом посте.
В этой статье вы узнаете:
Работу над новой платформой мы начали с исследования наших корпоративных клиентов — их целей, задач, потребностей. По итогам исследования мы сгруппировали компании по размеру бизнеса с ориентиром на приоритеты, которые стоят перед ними. Выделили тех, кто, например, стремится сокращать затраты, привлекать новых клиентов или расширять бизнес. В соответствии с этим делением распределили все корпоративные услуги и составили для них разные описания.
Например, услуга «Бесплатный номер 8 800». Если мы говорим о компании, которая в первую очередь стремится привлечь новых клиентов, описание услуги для нее основывается на том, что бесплатный номер добавляет солидности и увеличивает доверие потенциального клиента. Если говорим о более крупном бизнесе — то включаем в описание возможность для клиентов бесплатно звонить из регионов (например, при организации «горячей линии»).
Согласно этому подходу, стали по-другому предлагать и виртуальную АТС. Большие компании оценят, если им расскажут о совместимости с физическими АТС, о многоканальности и экономии. А малый бизнес — если узнает о том, что с помощью виртуальной АТС можно прослушивать разговоры специалистов колл-центра и оценивать качество работы звонящих сотрудников.
Как выглядит наша лаборатория, в которой мы проводим юзабилити-тестирование
Кроме анализа потребностей рынка, мы провели юзабилити-исследование всех личных кабинетов и продуктовых страниц МегаФона. Описания на этих страницах создавались по разным принципам, что создавало сложности при навигации между сервисами. Одинаковые по замыслу функциональные блоки выглядели по-разному. Тесты показали, что клиенты не понимали, куда нажимать, чтобы получить нужный результат, попадали не туда, куда планировали. Находили и откровенные ляпы, например, на странице описания услуги «8 800» на b2b.megafon.ru было две ссылки на личный кабинет — одна на кабинет корпоративного клиента, другая на кабинет услуги. Мы поставили цель добиться унификации пользовательского опыта — чтобы все было доступно практически в один клик, как при заказе такси или покупках в интернет-магазинах.
Проработку интерфейса начали с создания CJM (Customer Journey Map — карта пути пользователя). Все важные маршруты проработали в UML-диаграммах, на основе которых сделали кликабельные прототипы. Дали их пользователям, собрали обратную связь, внесли коррективы. Затем отрисовали страницы услуг и личные кабинеты — процесс сильно ускорился благодаря тому, что у нас есть единая дизайн-система на основе атомарного дизайна.
Помимо самых примитивных элементов, типа чекбоксов и кнопок, в дизайн-системе для B2B используются более сложные — например, топ-бары и боттом-бары. Мы собрали все это в библиотеку, которую впоследствии будем дополнять новыми составными компонентами. Вообще в перспективе мы планируем создать конструктор, с помощью которого можно будет собирать из готовых компонентов продуктовые страницы.
В дизайн-системе использовали родительские компоненты — responsive шаблоны, на основе которых строилась значительная часть сайта. Разработка и внедрение шаблонов заняли некоторое время, но впоследствии мы сэкономим больше. Любые изменения достаточно внести в родительский компонент, и они автоматически применяются везде.
Чтобы объединить множество разных сервисов под одной крышей, сохранив постоянную работоспособность и масштабируемость, мы применили микросервисную архитектуру. Бэкенд «МегаФон.Бизнес» делится на 4 логических блока: E-commerce, CMS, CRM и DXP (Digital Experience Platform).
О блоке DXP стоит рассказать подробней. Этот фреймворк используется при разработке систем с большим количеством пользователей. Здесь собирается информация обо всех триггерах, которые влияют на пользовательский опыт. С их помощью система понимает, что делать на следующем шаге, в какое поле воронки конверсии нужно включить карточку пользователя. Триггеры и воронки конверсии связаны с большим набором правил, согласно которому DXP персонализирует контент, отправляет рассылки, ставит задачи телесейлзам и службе поддержки.
Триггеры могут быть разные. Например, пользователь проводит определенное время на странице определенной услуги. Это значит, что он заинтересовался, и интерес этот нужно подогревать через остальные каналы взаимодействия. Если пользователь начал заполнять анкету на подключение, но не завершил ее, полученные данные уходят в CRM, и затем на основе триггеров заполнения определяется, в какую воронку конверсии отправить юзера. DXP позволяет гораздо лучше взаимодействовать с пользователем чем более старые инструменты — UTM-метки, узкая аналитика и т.п.
На уровне фронтенда мы применяем принципы SPA (Single Page Application) — весь «МегаФон.Бизнес» представляет собой веб-приложение, которое размещено на одной странице и загружается целиком вместе с ней. При первом визите подгружается интерфейс, потом контент. Веб-приложение сохраняется в памяти, и при повторных посещениях нужно загружать только обновления, что сильно экономит время.
Первая версия. Намечена основная структура
Эскизы реализации основных элементов.
Использование технологий PWA (Progressive Web App) позволяет создать веб-приложение, наиболее похожее на мобильное приложение. Если соединения с интернетом нет, вы все равно можете работать с платформой, с сохраненными ранее данными. И все внесенные в офлайн-режиме изменения будут подгружены, когда подключение вновь появится.
Не обошлось в проекте и без приключений. Начались они месяца за три до конца проекта. Сроки поджимали, а реализовать нужно было еще много чего. Чтобы ускориться, мы пошли в Agile и быстрыми спринтами внедряли все необходимое в виде микросервисов. Это было главное требование — если выбранное решение не укладывалось в микросервисную архитектуру, мы заменяли его аналогом или делали что-то свое. В итоге в течение финального этапа выкинули 70% бэклога, оставив только то, что действительно нужно.
За две недели до запуска случился новый форс-мажор: Роскомнадзор начал блокировку Telegram. Постепенно сервисы, используемые нами, начали отказывать — от капчи гугла до облачной базы данных, которую мы использовали для контента. На устранение проблемы оставалась неделя, и мы уговорили хостеров используемой облачной платформы перенести ее с заблокированных серверов в Амстердаме на еще пока не заблокированные сервера в Германии. В итоге релиз откладывать не пришлось.
Заходя на сайт, посетители видят персональные предложения. Если посетитель новый, то ему предлагается выбрать категорию, отражающую количество сотрудников в его компании. Делается это ненавязчиво: количество сотрудников — это просто фильтр, в котором сейчас доступно три варианта: до 15, 15-250, 250 и более. Затем в зависимости от выбранной категории выводятся услуги с описаниями. Если посетитель авторизованный, учитывается его уровень доступа, сегмент его компании и наличие уже подключенных услуг. Исходя из этого подгружаются релевантные предложения с подходящими описаниями. В дальнейшем мы планируем углубить персонализацию, например, используя разделение по отраслям.
Финальный вид «МегаФон.Бизнес» на момент релиза
Уровень доступа абонента определяется биллинговой системой. У компании есть администратор с максимально возможными правами — он раздает права другим учетным записям подключать конкретные услуги на конкретные номера. При наличии прав пользователи могут подключать к одному профилю несколько учетных записей одной услуги.
Помимо услуг оператора, в «МегаФон.Бизнес» представлены услуги наших партнеров — облачных провайдеров, конструктор сайтов, сервисы бухгалтерии. Все эти услуги можно оформить на специальных условиях, доступных только нашим клиентам. Если вы подаете заявку, то всю необходимую информацию партнеру отсылает система.
Наконец, на отдельной вкладке собраны все бизнес-новости МегаФона — можно быстро узнать, если появилось что-то интересное.
После запуска мы начали анализировать трафик. В течение первого месяца его оказалось в 10 раз больше, чем мы планировали! Люди приходят в основном с продуктовых страниц МегаФона. Мы обходимся практически без рекламных источников. Сейчас основная аудитория — это корпоративные клиенты МегаФона, которые используют сервис для навигации между услугами, — как мы и задумывали. Посетители изучают разные сервисы, ищут ответы на конкретные вопросы, управляют услугами. Сейчас мы активно применяем A/B-тестирование, собираем статистику, описывающую взаимодействие с платформой. С другой стороны, обдумываем, какие еще метрики отражают качество пользовательского опыта, а какие связаны с количеством подключаемых услуг и важными этапами работы с «МегаФон.Бизнес».
С помощью новой платформы мы хотим добиться, чтобы корпоративные пользователи могли работать с оператором в онлайне так же легко, как и обычные клиенты. Сейчас в B2B-сегменте на онлайн приходится всего 5% продаж — и мы планируем увеличить эту долю с помощью «МегаФон.Бизнес».
Люди, которые стоят за этой историей
В этой статье вы узнаете:
- Какие инструменты мы использовали, чтобы определить потребности пользователя;
- Какие процессы мы меняли, чтобы успеть в условиях горящих дедлайнов;
- Какой фреймворк используем при разработке систем с большим количеством пользователей.
Изучаем аудиторию
Работу над новой платформой мы начали с исследования наших корпоративных клиентов — их целей, задач, потребностей. По итогам исследования мы сгруппировали компании по размеру бизнеса с ориентиром на приоритеты, которые стоят перед ними. Выделили тех, кто, например, стремится сокращать затраты, привлекать новых клиентов или расширять бизнес. В соответствии с этим делением распределили все корпоративные услуги и составили для них разные описания.
Например, услуга «Бесплатный номер 8 800». Если мы говорим о компании, которая в первую очередь стремится привлечь новых клиентов, описание услуги для нее основывается на том, что бесплатный номер добавляет солидности и увеличивает доверие потенциального клиента. Если говорим о более крупном бизнесе — то включаем в описание возможность для клиентов бесплатно звонить из регионов (например, при организации «горячей линии»).
Согласно этому подходу, стали по-другому предлагать и виртуальную АТС. Большие компании оценят, если им расскажут о совместимости с физическими АТС, о многоканальности и экономии. А малый бизнес — если узнает о том, что с помощью виртуальной АТС можно прослушивать разговоры специалистов колл-центра и оценивать качество работы звонящих сотрудников.
Как выглядит наша лаборатория, в которой мы проводим юзабилити-тестирование
Кроме анализа потребностей рынка, мы провели юзабилити-исследование всех личных кабинетов и продуктовых страниц МегаФона. Описания на этих страницах создавались по разным принципам, что создавало сложности при навигации между сервисами. Одинаковые по замыслу функциональные блоки выглядели по-разному. Тесты показали, что клиенты не понимали, куда нажимать, чтобы получить нужный результат, попадали не туда, куда планировали. Находили и откровенные ляпы, например, на странице описания услуги «8 800» на b2b.megafon.ru было две ссылки на личный кабинет — одна на кабинет корпоративного клиента, другая на кабинет услуги. Мы поставили цель добиться унификации пользовательского опыта — чтобы все было доступно практически в один клик, как при заказе такси или покупках в интернет-магазинах.
Дизайнерские дела
Проработку интерфейса начали с создания CJM (Customer Journey Map — карта пути пользователя). Все важные маршруты проработали в UML-диаграммах, на основе которых сделали кликабельные прототипы. Дали их пользователям, собрали обратную связь, внесли коррективы. Затем отрисовали страницы услуг и личные кабинеты — процесс сильно ускорился благодаря тому, что у нас есть единая дизайн-система на основе атомарного дизайна.
Помимо самых примитивных элементов, типа чекбоксов и кнопок, в дизайн-системе для B2B используются более сложные — например, топ-бары и боттом-бары. Мы собрали все это в библиотеку, которую впоследствии будем дополнять новыми составными компонентами. Вообще в перспективе мы планируем создать конструктор, с помощью которого можно будет собирать из готовых компонентов продуктовые страницы.
В дизайн-системе использовали родительские компоненты — responsive шаблоны, на основе которых строилась значительная часть сайта. Разработка и внедрение шаблонов заняли некоторое время, но впоследствии мы сэкономим больше. Любые изменения достаточно внести в родительский компонент, и они автоматически применяются везде.
DXP и другой бэкенд
Чтобы объединить множество разных сервисов под одной крышей, сохранив постоянную работоспособность и масштабируемость, мы применили микросервисную архитектуру. Бэкенд «МегаФон.Бизнес» делится на 4 логических блока: E-commerce, CMS, CRM и DXP (Digital Experience Platform).
О блоке DXP стоит рассказать подробней. Этот фреймворк используется при разработке систем с большим количеством пользователей. Здесь собирается информация обо всех триггерах, которые влияют на пользовательский опыт. С их помощью система понимает, что делать на следующем шаге, в какое поле воронки конверсии нужно включить карточку пользователя. Триггеры и воронки конверсии связаны с большим набором правил, согласно которому DXP персонализирует контент, отправляет рассылки, ставит задачи телесейлзам и службе поддержки.
Триггеры могут быть разные. Например, пользователь проводит определенное время на странице определенной услуги. Это значит, что он заинтересовался, и интерес этот нужно подогревать через остальные каналы взаимодействия. Если пользователь начал заполнять анкету на подключение, но не завершил ее, полученные данные уходят в CRM, и затем на основе триггеров заполнения определяется, в какую воронку конверсии отправить юзера. DXP позволяет гораздо лучше взаимодействовать с пользователем чем более старые инструменты — UTM-метки, узкая аналитика и т.п.
Веб-приложение решает
На уровне фронтенда мы применяем принципы SPA (Single Page Application) — весь «МегаФон.Бизнес» представляет собой веб-приложение, которое размещено на одной странице и загружается целиком вместе с ней. При первом визите подгружается интерфейс, потом контент. Веб-приложение сохраняется в памяти, и при повторных посещениях нужно загружать только обновления, что сильно экономит время.
Первая версия. Намечена основная структура
Эскизы реализации основных элементов.
Использование технологий PWA (Progressive Web App) позволяет создать веб-приложение, наиболее похожее на мобильное приложение. Если соединения с интернетом нет, вы все равно можете работать с платформой, с сохраненными ранее данными. И все внесенные в офлайн-режиме изменения будут подгружены, когда подключение вновь появится.
Пылающие дедлайны
Не обошлось в проекте и без приключений. Начались они месяца за три до конца проекта. Сроки поджимали, а реализовать нужно было еще много чего. Чтобы ускориться, мы пошли в Agile и быстрыми спринтами внедряли все необходимое в виде микросервисов. Это было главное требование — если выбранное решение не укладывалось в микросервисную архитектуру, мы заменяли его аналогом или делали что-то свое. В итоге в течение финального этапа выкинули 70% бэклога, оставив только то, что действительно нужно.
За две недели до запуска случился новый форс-мажор: Роскомнадзор начал блокировку Telegram. Постепенно сервисы, используемые нами, начали отказывать — от капчи гугла до облачной базы данных, которую мы использовали для контента. На устранение проблемы оставалась неделя, и мы уговорили хостеров используемой облачной платформы перенести ее с заблокированных серверов в Амстердаме на еще пока не заблокированные сервера в Германии. В итоге релиз откладывать не пришлось.
Что получилось
Заходя на сайт, посетители видят персональные предложения. Если посетитель новый, то ему предлагается выбрать категорию, отражающую количество сотрудников в его компании. Делается это ненавязчиво: количество сотрудников — это просто фильтр, в котором сейчас доступно три варианта: до 15, 15-250, 250 и более. Затем в зависимости от выбранной категории выводятся услуги с описаниями. Если посетитель авторизованный, учитывается его уровень доступа, сегмент его компании и наличие уже подключенных услуг. Исходя из этого подгружаются релевантные предложения с подходящими описаниями. В дальнейшем мы планируем углубить персонализацию, например, используя разделение по отраслям.
Финальный вид «МегаФон.Бизнес» на момент релиза
Уровень доступа абонента определяется биллинговой системой. У компании есть администратор с максимально возможными правами — он раздает права другим учетным записям подключать конкретные услуги на конкретные номера. При наличии прав пользователи могут подключать к одному профилю несколько учетных записей одной услуги.
Помимо услуг оператора, в «МегаФон.Бизнес» представлены услуги наших партнеров — облачных провайдеров, конструктор сайтов, сервисы бухгалтерии. Все эти услуги можно оформить на специальных условиях, доступных только нашим клиентам. Если вы подаете заявку, то всю необходимую информацию партнеру отсылает система.
Наконец, на отдельной вкладке собраны все бизнес-новости МегаФона — можно быстро узнать, если появилось что-то интересное.
Первые итоги
После запуска мы начали анализировать трафик. В течение первого месяца его оказалось в 10 раз больше, чем мы планировали! Люди приходят в основном с продуктовых страниц МегаФона. Мы обходимся практически без рекламных источников. Сейчас основная аудитория — это корпоративные клиенты МегаФона, которые используют сервис для навигации между услугами, — как мы и задумывали. Посетители изучают разные сервисы, ищут ответы на конкретные вопросы, управляют услугами. Сейчас мы активно применяем A/B-тестирование, собираем статистику, описывающую взаимодействие с платформой. С другой стороны, обдумываем, какие еще метрики отражают качество пользовательского опыта, а какие связаны с количеством подключаемых услуг и важными этапами работы с «МегаФон.Бизнес».
С помощью новой платформы мы хотим добиться, чтобы корпоративные пользователи могли работать с оператором в онлайне так же легко, как и обычные клиенты. Сейчас в B2B-сегменте на онлайн приходится всего 5% продаж — и мы планируем увеличить эту долю с помощью «МегаФон.Бизнес».
Люди, которые стоят за этой историей
