Проект

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

Разработка B2C-сайта для топ-1 провайдера в Кузбассе

Сайт Гудлайна

Экспертизы

Дизайн Frontend

Дата

2024

Тип продукта

Порталы и сервисы

Веб-дизайн

Отрасль

Телеком

Содержание

Клиент
Задача
Решение: сайт с новым интерфейсом и функционалом
Аналитика: как работал предыдущий сайт
Дизайн: свежий взгляд на бренд с историей
Фокус-группы: как макеты тестировали реальные клиенты 
Навигация и структура сайта
Подключение услуг
Страницы услуг
Цены и тарифы
Конструктор тарифов
Самостоятельная заявка на подключение
Гибкие инструменты для продаж и маркетинга
Отзыв
Результат

Клиент

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

Задача

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

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

Смотреть подборку кейсов Атвинты для телекома

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

Прошлый и новый сайт компании

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

+15% к трафику по небрендовым запросам.
+3% к конверсии в лид.
высокий CES (индекс удовлетворенности сайтом).

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

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

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

Главная страница сайта

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

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

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

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

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

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

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

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

Некоторые страницы услуг вели на другие поддомены. Из-за этого пользователи покидали основной сайт, а аналитические системы фиксировали меньшее время пребывания на страницах.
Разная структура страниц в десктопной и мобильной версиях. Без единообразия пользователям было сложнее работать в разных версиях сайта и находить нужную информацию.
Малое количество отзывов снижало доверие аудитории. Требовалось показать больше обратной связи от клиентов с помощью текстов и видеороликов.
Отсутствие метатегов, SEO-текстов и оптимизации по небрендовым запросам ограничивало приток органического трафика.
Технические ошибки мешали индексации страниц в поисковых системах.
Некликабельные баннеры и малоконтрастные кнопки делали сайт менее удобным для пользователей, снижая конверсию в заявку.

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

17% изучают тарифы и услуги, но только 49% находят нужную информацию, а 51% — нет.
10% интересуются ценами и оборудованием, но не могут быстро найти эти разделы.
Никто из опрошенных не заметил вкладки «Услуги» и «Оборудование», так как их заголовки были окрашены в серый цвет. Недостаток визуальных акцентов мешает пользователям находить важные разделы.
80% ищут тарифы по пути «Интернет — Как подключиться», но пакеты услуг находятся справа под заголовком «Тарифы».
Пользователи не понимают, как разбираться в тарифах и ценообразовании. Информация подана сложно, ее нужно объяснять пошагово.

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

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

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

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

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

Дизайн-концепция проекта

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

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

Макеты будущего сайта

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

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

Заказать редизайн сайта в Атвинте

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

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

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

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

После эксперимента в макеты добавили около 40 изменений. При этом все участники высоко оценили структуру и дизайн нового сайта

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

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

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

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

Выпадающее меню

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

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

Персонализированный блок на главной странице

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

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

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

Преимущества подключения провайдера Goodline

Форма обратной связи при успешной проверке подключения

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

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

Подборка каналов в пакетах услуг

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

Карточка товара в разделе «Оборудование»

Цены и тарифы

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

Подборка тарифов и услуг

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

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

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

Калькулятор тарифа

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

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

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

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

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

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

Памятка о регистрации заявки и заключении договора

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

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

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

Подборка с предложениями и разными переходами

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

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

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

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

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

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

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

Популярные продукты и услуги

Отзыв

Максим Рыльцев

Заместитель директора по цифровым продуктам В2В в Goodline

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

Результат

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

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

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