Клиентский портал интернет-провайдера Goodline

Клиент

Goodline — топ-1 провайдер в Кемеровской области (по версии Liveinternet.ru от 09.11.2023). Компания подключает интернет, телевидение, а также устанавливает видеонаблюдение. Goodline обслуживает как физические лица, так и организации.

Задача

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

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

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

Цель проекта — создать новый сайт, который улучшит метрики:

Goodline провел аналитику, подготовил структуру сайта и взял на себя бэкэнд. Наша команда занималась дизайном и фронтенд-разработкой. 

Решение: сайт с новым интерфейсом и функционалом

Совместно с командой Goodline мы создали динамичный и удобный интерфейс, который работает на улучшение метрик, позволяет тестировать маркетинговые гипотезы и получать больше трафика за счет проработки SEO-факторов. 

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

Одна из главных функций — самостоятельное оформление заявки на подключение. Это новое решение для всего телеком-рынка в регионе — Goodline первым внедрил такую возможность на своем сайте. Обновление убирает лишние касания с менеджерами и помогает быстрее получить услугу.

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

Большой пласт работ касался интеграции с API Goodline:

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

Аналитика: как работал предыдущий сайт

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

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

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

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

Дизайн: свежий взгляд на бренд с историей

Для дизайна было важно, что Goodline — это бренд с двадцатилетней историей, который есть почти в каждом доме. Провайдер запускает рекламные кампании со узнаваемым визуалом офлайн и онлайн. А плюсом еще и активный участник жизни региона: фестивали, ивенты, проекты по улучшению среды.

На сайте нужно было сохранить узнаваемость топового регионального бренда, но представить его в современном обновленном виде. 

Для этого в дизайн-концепции мы по-новому посмотрели на яркие корпоративные цвета компании — зеленый и оранжевый. Ушли в более мягкие градиентные оттенки, а яркие и насыщенные акценты использовали для элементов, на которые нужно обратить внимание: кнопки, поля, теги, баннеры.

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

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

Также создали индивидуальные 3D-иконки для баннеров и карточек услуг. Они помогают акцентировать внимание на нужных элементах и ориентироваться в контенте за счет визуальных подсказок.

Фокус-группы: как макеты тестировали реальные клиенты 

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

В эксперименте участвовали три фокус-группы по 20 человек разного возраста (от 18 до 70 лет), которые в течение трех дней выполняли целевые действия. 

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

Фокус-группы — лучший инструмент для проверки эффективности будущего интерфейса. Он помог учесть реальные потребности и поведение пользователей на новых экранах сервиса.

Навигация и структура сайта

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

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

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

На главной странице добавлен блок для действующих абонентов с информацией по договору, которая определяется по IP. Персонализированный блок экономит время и сокращает количество кликов для поиска — клиент видит актуальную информацию сразу без перехода в личный кабинет.

Подключение услуг

На сайте появилась возможность проверки подключения к интернету. Теперь посетителю не нужно тратить время на запросы в техподдержку — он сразу видит на сайте, доступно ли подключение по его адресу. 

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

Страницы услуг

В линейке Goodline 3 флагманских продукта: интернет, ТВ и видеонаблюдение. Это разные услуги со своей спецификой и нюансами. Для каждой из них проработана отдельная структура. Например, на странице телевидения есть блоки с преимуществами подписки, набором каналов, бонусами (квизы, караоке) и каталогом приставок, которые нужны для подключения.

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

Цены и тарифы

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

Конструктор тарифов

На новом сайте кроме фиксированных тарифов добавлен конструктор пакетов, где можно самому выбрать нужный набор опций. 

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

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

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

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

Самостоятельная заявка на подключение

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

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

Гибкие инструменты для продаж и маркетинга

Первый экран с акциями и предложениями

Подборка с акциями и предложениями на первом экране — один из ключевых инструментов маркетолога на сайте. Здесь можно менять сообщения и устанавливать два вида переходов: открытие новой страницы или модального окна. Функция позволяет тестировать разные гипотезы и сценарии взаимодействия с клиентами.

Мотивационные теги

Специальные метки «Хиты продаж», «Новинки», «Акция», обращают внимание клиента на актуальные предложения.

Модальные окна

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

Динамические блоки

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

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

Отзыв

Результат

Goodline и Атвинта создали новый B2C-сайт компании, где улучшен пользовательский опыт, реализован современный дизайн, добавлены маркетинговые инструменты, удобный конструктор тарифов и самостоятельное подключение заявки.

Все обновления направлены на рост метрик: CES, трафик по небрендовым запросам, рост конверсии в лид. С новыми возможностями удобно проверять гипотезы, получать дополнительные касания с клиентом и его внимание. Сайт структурировано и понятно презентует услуги провайдера, что важно для компаний с разными продуктами в линейке.

Несмотря на недавний запуск, клиентам сайт уже нравится — во время проведения фокус-групп были получены отзывы об удобной структуре, приятном визуале и высоком уровне юзабилити.