- Заказчик
- Goodline
- Задача
- Клиент обратился в Атвинту за дизайном B2C-сайта с услугами для физических лиц. Нам предстояло подготовить макеты с новым визуалом, а также подключить фронтенд и сделать верстку.
Клиент
Goodline — топ-1 провайдер в Кемеровской области (по версии Liveinternet.ru от 09.11.2023). Компания подключает интернет, телевидение, а также устанавливает видеонаблюдение. Goodline обслуживает как физические лица, так и организации.
Задача
Клиент обратился в Атвинту с просьбой создать B2C-сайт с услугами для физических лиц. Нам предстояло подготовить макеты с новым визуалом, а также подключить фронтенд и сделать верстку.
Телекоммуникации — одна из ведущих отраслей, в которой мы работаем. Для провайдеров и операторов разработаны личные кабинеты, мобильные приложения, корпоративные сайты и клиентские порталы. В том числе не первый раз сотрудничаем и с Goodline — ранее делали для заказчика несколько проектов.
Прошлый сайт для физических лиц был создан давно, пока его дизайн и функционал устарели. В результате исследования компании — по итогам оценки юзабилити стало известно, что побочное отрицательное влияние происходит на лидогенерацию, и сайт недооценивает потенциальный трафик.
Цель проекта — создать новый сайт, который улучшит метрики:
- +15% к трафику по небрендовым запросам.
- +3% к конверсии в лид на 3%.
- Высокий CES (индекс удовлетворенности сайтом).
Гудлайн провела аналитику, представила структуру сайта и взяла на себя бэкэнд. Наша команда занималась изайном и фронтенд-разработкой.
Решение: сайт с новым интерфейсом и функционалом
Совместно с командой 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 3 флагманских продукта: интернет, ТВ и видеонаблюдение. Это разные услуги со своей спецификой и нюансами. Для каждой из них проработана отдельная структура. Например, на странице телевидения есть блоки с преимуществами подписки, набором каналов, бонусами (квизы, караоке) и каталогом приставок, которые нужны для подключения.
Страницу с оборудованием оформили в формате маркетплейса. Для каждого продукта есть карточка товара: название, фотография, вариант оплаты, кнопка «Заказать», описание продукта, его характеристики и отзывы.
Цены и тарифы
Мы реализовали интерфейс так, чтобы клиенту было удобно изучать цены. Карточки готовых тарифов структурированы и оформлены от меньшего к большему, что визуально помогает оценить наполнение пакета.
Конструктор тарифов
На новом сайте кроме фиксированных тарифов добавлен конструктор пакетов, где можно самому выбрать нужный набор опций.
Конструктор дает дополнительное касание с клиентом — на этом этапе абонент уже «примеряет» услугу на себя. Такая функция полезна для людей с индивидуальными запросами и снижает количество отказов на этапе выбора услуг.
В конструкторе учли особенность формирования услуг провайдера. Например, некоторые допы возможны только при подключении интернета. Тогда при добавлении высокой скорости интерфейс автоматически добавит сопутствующую услугу с подключением.
Также за использование сразу нескольких услуг Goodline дает скидку — это тоже автоматически считает конструктор. Так у клиента формируется корректный тариф.
В конструкторе реализованы удобные переключатели, цветовые индикаторы опций и плашка с прозрачным расчетом тарифа, где отображено, из чего складывается цена.
Самостоятельная заявка на подключение
Эта функция — новинка для рынка телеком-услуг в регионе. В то время как другие провайдеры по-прежнему работают через менеджеров, Goodline предлагает полностью самостоятельное подключение на сайте — все можно оформить онлайн за несколько минут.
Заявка оформляется за 7 шагов. Пользователь выбирает оборудование и услуги, слот для установки и сразу видит, сколько ему предстоит заплатить — без скрытых начислений или дополнительных услуг. Гибкие инструменты для продаж и маркетинга
Гибкие инструменты для продаж и маркетинга
Первый экран с акциями и предложениями
Подборка с акциями и предложениями на первом экране — один из ключевых инструментов маркетолога на сайте. Здесь можно менять сообщения и устанавливать два вида переходов: открытие новой страницы или модального окна. Функция позволяет тестировать разные гипотезы и сценарии взаимодействия с клиентами.
Мотивационные теги
Специальные метки «Хиты продаж», «Новинки», «Акция», обращают внимание клиента на актуальные предложения.
Модальные окна
Модальных окна на сайте помогают отслеживать самые конверсионные страницы. За каждой формой закреплена информация для менеджера — с какого баннера пришла заявка.
Динамические блоки
Блок с современными услугами, оборудованием и сервисом является стимулом и меняется в зависимости от того, на какой странице находится пользователь. Вся информация подтягивается на других страницах сайта и применяется в шахматном порядке, чтобы карточки не сливались с соседями.
Так мы рассказываем обо всех услугах Goodline и предлагаем клиентам дополнительные продукты компании, что однозначно скажется на среднем чеке.
Результат
Goodline и Atvinta создают новый B2C-сайт, в котором усовершенствован пользовательский опыт, реализован современный дизайн, добавлены маркетинговые инструменты, удобный конструктор тарифов и самостоятельные заказы на подключение.
Все обновления направлены на рост показателей: CES, трафик по небрендовым запросам, рост конверсии в лид. Благодаря новым возможностям удобно проверять гипотезы, получать больше внимания от клиента и его внимания. Сайт структурирован и доступно презентует поставщика услуг, что важно для компаний с разными продуктами в линейке.
Несмотря на недавний запуск, сайт клиентам уже нравится — во время фокус-группы были получены отзывы об удобной процедуре, приятном визуальном оформлении и высоком уровне юзабилити.