Главная
Кейсы
«Нефтегазовая вертикаль»

Нефтегазовая
вертикаль: обновление и редизайн официального сайта журнала

Помогли талантливой команде журнала обновить инструменты работы с online и навести порядок на портале

2022

Дизайн

UI/UX

Frontend

Backend

CRM

Адрес:

ngv.ru

Перейти
на сайт

<div class='width105 mt-16'>Нефтегазовая <br> вертикаль: <span>обновление и редизайн официального сайта журнала</span></div>

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

Задача, поставленная заказчиком

Обновить дизайн портала, разработать личные кабинеты, реализовать платные подписки и продажу отдельных материалов

Резюме проекта

Начало
работ:

май 2022

Запуск обновленной
версии:

ноябрь 2022

Окончание
работ:

январь 2023

Какие задачи мы решали в работе с компанией «Нефтегазовая вертикаль»:

Спроектировали структуру

Сделали
верстку

Платный и бесплатный контент

Разделы

Разработали новый дизайн

Интеграция в Яндекс-новости

Конкурс рисунков

Какими инструментами мы пользовались

Для дизайна – традиционная Figma
и немного Photoshop.

Код - HTML, CSS.
Word для формирования отчётности

Figma

Bitrix

HTML

VUE.JS

Excel

Yougile

CSS

MS Word

Спроектировали структуру

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

На всех существующих страницах внесли небольшие улучшения для удобства пользователей. Добавили возможность делиться в социальных сетях новостями и статьями. Предусмотрели возможность публиковать рекламные баннеры на сайте: публикация рекламы – важный аспект работы журнала.

Разработали новый дизайн

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

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

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

Сделали верстку

Использовали БЭМ и rem, верстка сайта сделана исходя из наших корпоративных стандартов: вертикальная двенадцати колоночная сетка, пропорциональные элементам горизонтальные отступы.

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

Разделы

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

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

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

Поиск

На сайте реализован полнотекстовой поиск. В него включены не только названия и краткие описания – поиск работает по всем текстам на сайте.

Поиск можно настраивать: указывать период публикации материала и раздел, в котором необходимо искать статью. Реализован на стандартном модуле поиска Bitrix.

Платный
и бесплатный контент

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

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

Есть два уровня подписки:

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

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

Online-оплата

Реализована с помощью сервиса Robokassa. У них оказались самые выгодные условия по эквайрингу и подключению, когда мы делали срез поставщиков платежного сервиса.

Личные
кабинеты

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

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

В личном кабинете можно оформить подписку и купить отдельные статьи, с возможностью оплатить их онлайн: покупка доступна через стандартный механизм корзины и check-out Bitrix. Все купленные статьи доступны для просмотра бессрочно.

Вот посмотрите:

https://ngv.ru/

Конкурс
рисунков

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

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

Интерфейсные
решения

Сделать удобный сайт – основная цель нашей работы над порталом «Нефтегазовая вертикаль».

На части страниц показываем последний опубликованный номер журнала, для быстрого доступа к скачиванию и онлайн-просмотру. Аналогичный блок есть в сквозном меню сайта. Их CTR за 6 месяцев – 22,4%.

В шапке сайта показываем актуальные биржевые котировки нефти разных марок (Brent, Urals, WTI) и курсы валют. Их обновление происходит автоматически в реальном времени. Это удобно, но снижает скорость загрузки главной страницы портала - на время ответа поставщиков данных.

Интеграция в сервис Яндекс-новости

Новости, при публикации на сайте, могут быть отправлены в сервис Яндекс Новости. Как правило туда попадают трендовые материалы: при отправке в Яндекс Новости материал попадает в поисковую выдачу в течение 30-60 минут. Интеграция реализована как RSS-поток, в который добавляются отмеченные администратором новости, как размеченный в соответствии с требованиями новостной фид.

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

Особенности

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

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

Для продажи рекламы сделали набор страниц с условиями и показателями эффективности, и возможностью скачать условия в pdf. Посмотреть можно по ссылке -> https://ngv.ru/ad/

В сайт интегрировали рекламный сервис relap.io. Получили опыт работы с ним и можем смело советовать никогда не использовать.